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.

diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
index d2fc81e387a48ee897125c6caa71e0ea66bcc6a1..eb5ce64f310b178126b5885186e6032a809ef8a4 100644 (file)
--- 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 (file)
index 0000000..5409c9e
--- /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 90744a1876d0920f196f3a2d04818c0843122410..72bb89ba1ddd884ae0f611abc179be2c8bc406c1 100644 (file)
--- 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 8190ac1f87deb73607c90054d5f2a92dd9a9ba54..98cfba5290b2a9b3d49fc80073cee4e9e25c8c20 100644 (file)
--- 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 %>
   <h2><%= t "welcome_page.title" %></h2>
   <h3><%= t "welcome_page.subtitle" %></h3>
@@ -79,7 +83,13 @@
 <div class='pad2 drop'>
   <h3><%= t "welcome_page.section_6.title" %></h3>
   <% if @user %>
-    <p><%= t "welcome_page.section_6.paragraph_1_html" %></p>
+    <p>
+      <%= t "welcome_page.section_6.paragraph_1_html" %>
+      <span class='edit-located'><%= t "welcome_page.section_6.paragraph_located" %></span>
+      <span class='edit-geocoded'><%= t "welcome_page.section_6.paragraph_geocoded_html" %></span>
+      <span class='edit-geolocated'><%= t "welcome_page.section_6.paragraph_geolocated" %></span>
+    </p>
+    <button class="edit-located edit-geocoded edit-geolocated start-mapping">Start Mapping</button>
   <% else %>
     <p><%= t "welcome_page.section_6.paragraph_1_no_user_html" %></p>
   <% end %>

diff --git a/config/environments/production.rb b/config/environments/production.rb
index 6486be003ad427e669409a3a9bc34364245fe158..824c11573f6d8408ae80bfe790429ca24a08726f 100644 (file)
--- 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 5a02fae8702a261adab092320fddf369fdb59fd8..16e3fcbde5e36c440eb3b77b286e8f60f5e5d4f8 100644 (file)
--- 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 <em>Edit</em> button to start editing.
+      paragraph_located: |
+        Or, start editing now:
+      paragraph_geocoded_html: |
+        Or, start near <span class='edit-geocoded-location'></span>:
+      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 <em>Edit</em>
         button to start editing.