From 1a51f2187127f7376e2118b5a4ced49123b0504a Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Wed, 17 Jul 2013 13:29:05 -0700 Subject: [PATCH] Add a "Start Mapping" button Position is determined in one of two ways: lat/lon query parameters (with helpful text from a nominatim reverse geocode), or HTML5 geolocation. --- app/assets/javascripts/osm.js.erb | 10 ++++- app/assets/javascripts/welcome.js | 54 ++++++++++++++++++++++++++ app/assets/stylesheets/common.css.scss | 19 +++++++++ app/views/site/welcome.html.erb | 12 +++++- config/environments/production.rb | 2 +- config/locales/en.yml | 6 +++ 6 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 app/assets/javascripts/welcome.js diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb index d2fc81e38..eb5ce64f3 100644 --- a/app/assets/javascripts/osm.js.erb +++ b/app/assets/javascripts/osm.js.erb @@ -22,8 +22,8 @@ OSM = { return url; }, - mapParams: function (search) { - var params = {}, mapParams = {}, bounds, loc; + params: function(search) { + var params = {}; search = (search || window.location.search).replace('?', '').split(/&|;/); @@ -35,6 +35,12 @@ OSM = { params[key] = decodeURIComponent(val); } + return params; + }, + + mapParams: function (search) { + var params = OSM.params(search), mapParams = {}, bounds, loc; + if (params.mlon && params.mlat) { mapParams.marker = true; mapParams.mlon = parseFloat(params.mlon); diff --git a/app/assets/javascripts/welcome.js b/app/assets/javascripts/welcome.js new file mode 100644 index 000000000..5409c9ec9 --- /dev/null +++ b/app/assets/javascripts/welcome.js @@ -0,0 +1,54 @@ +$(document).ready(function() { + var params = OSM.params(); + + if (params.lat && params.lon) { + $('.edit-located').show(); + + $.ajax({ + url: "http://nominatim.openstreetmap.org/reverse", + data: { + lat: params.lat, + lon: params.lon, + zoom: 10 + }, + success: function(xml) { + var result = $(xml).find('result'); + if (result.length) { + $('.edit-located').hide(); + $('.edit-geocoded').show(); + $('.edit-geocoded-location').text(result.text()); + } + } + }); + + $('.start-mapping').on('click', function(e) { + window.location = '/edit?zoom=17&lat=' + params.lat + '&lon=' + params.lon; + }); + + } else if (navigator.geolocation) { + $('.edit-geolocated').show(); + + function geoSuccess(position) { + window.location = '/edit?zoom=17&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude; + } + + function geoError() { + $('.start-mapping') + .removeClass('loading') + .addClass('error'); + } + + $('.start-mapping').on('click', function(e) { + e.preventDefault(); + + $('.start-mapping') + .addClass('loading'); + + // handle firefox's weird implementation + // https://bugzilla.mozilla.org/show_bug.cgi?id=675533 + window.setTimeout(geoError, 4000); + + navigator.geolocation.getCurrentPosition(geoSuccess, geoError); + }); + } +}); diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 90744a187..72bb89ba1 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -2287,6 +2287,25 @@ a.button { padding: 20px; } + .edit-located, + .edit-geocoded, + .edit-geolocated { + display: none; + } + + .start-mapping { + background: #EB6F67; + color: #FFF; + display: block; + margin: auto; + cursor: pointer; + border: none; + border-radius: 5px; + border-bottom: 1px solid #A53931; + padding: 20px 40px; + font-size: 30px; + } + .note-box { background-color: $offwhite; } diff --git a/app/views/site/welcome.html.erb b/app/views/site/welcome.html.erb index 8190ac1f8..98cfba529 100644 --- a/app/views/site/welcome.html.erb +++ b/app/views/site/welcome.html.erb @@ -1,3 +1,7 @@ +<% content_for :head do %> + <%= javascript_include_tag "welcome" %> +<% end %> + <% content_for :heading do %>

<%= t "welcome_page.title" %>

<%= t "welcome_page.subtitle" %>

@@ -79,7 +83,13 @@

<%= t "welcome_page.section_6.title" %>

<% if @user %> -

<%= t "welcome_page.section_6.paragraph_1_html" %>

+

+ <%= t "welcome_page.section_6.paragraph_1_html" %> + <%= t "welcome_page.section_6.paragraph_located" %> + <%= t "welcome_page.section_6.paragraph_geocoded_html" %> + <%= t "welcome_page.section_6.paragraph_geolocated" %> +

+ <% else %>

<%= t "welcome_page.section_6.paragraph_1_no_user_html" %>

<% end %> diff --git a/config/environments/production.rb b/config/environments/production.rb index 6486be003..824c11573 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -56,7 +56,7 @@ OpenStreetMap::Application.configure do # config.action_controller.asset_host = "http://assets.example.com" # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added) - config.assets.precompile += %w( index.js edit.js browse.js changeset.js ) + config.assets.precompile += %w( index.js edit.js browse.js changeset.js welcome.js ) config.assets.precompile += %w( user.js diary_entry.js pngfix.js swfobject.js ) config.assets.precompile += %w( large-ltr.css small-ltr.css print-ltr.css ) config.assets.precompile += %w( large-rtl.css small-rtl.css print-rtl.css ) diff --git a/config/locales/en.yml b/config/locales/en.yml index 5a02fae87..16e3fcbde 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1209,6 +1209,12 @@ en: title: Start Editing paragraph_1_html: | You can zoom in anywhere in the world and click the Edit button to start editing. + paragraph_located: | + Or, start editing now: + paragraph_geocoded_html: | + Or, start near : + paragraph_geolocated: | + Or, start directly at your current location: paragraph_1_no_user_html: | Once you have an account, you can zoom in anywhere in the world and click the Edit button to start editing. -- 2.43.2