#25 Add a "Use my location" control

OSMBrasil · Feb 18, 2017 · ff2001b · ff2001b
1 parent 2008660
commit ff2001b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -45,6 +45,8 @@ <h2 data-i18n="app.title"></h2>
                         <form id='find'>
                             <input class='col8' id='address' placeholder='' data-i18n="[placeholder]step1.addr"/>
                             <button class='col4' id='findme' data-i18n="step1.button"></button>
+                            <br />
+                            Or <a id="use_my_location" href="#" onclick="return false">use my current location</a>.
                         </form>
                     </div>
                     <br />

diff --git a/js/site.js b/js/site.js
@@ -36,6 +36,32 @@ $("#category").select2({
     }
 });
 
+function zoom_to_point(chosen_place, map, marker) {
+    console.log(chosen_place);
+
+    marker.setOpacity(1);
+    marker.setLatLng([chosen_place.lat, chosen_place.lon]);
+
+
+    map.setView(chosen_place, 18, {animate: true});
+}
+$("#use_my_location").click(function (e) {
+    if ("geolocation" in navigator) {
+        navigator.geolocation.getCurrentPosition(function(position) {
+            var point = {
+                lat: position.coords.latitude,
+                lon: position.coords.longitude
+            }
+
+            zoom_to_point(point, findme_map, findme_marker);
+
+            $('#instructions').html(successString);
+            $('.step-2 a').attr('href', '#details');
+        });
+    } else {
+      /* geolocation IS NOT available */
+    }
+});
 $("#find").submit(function(e) {
     e.preventDefault();
     $("#couldnt-find").hide();
@@ -50,17 +76,7 @@ $("#find").submit(function(e) {
     $("#findme").addClass("loading");
     $.getJSON(url, function(data) {
         if (data.length > 0) {
-            var chosen_place = data[0];
-            console.log(chosen_place);
-
-            var bounds = new L.LatLngBounds(
-                [+chosen_place.boundingbox[0], +chosen_place.boundingbox[2]],
-                [+chosen_place.boundingbox[1], +chosen_place.boundingbox[3]]);
-
-            findme_map.fitBounds(bounds);
-
-            findme_marker.setOpacity(1);
-            findme_marker.setLatLng([chosen_place.lat, chosen_place.lon]);
+            zoom_to_point(data[0], findme_map, findme_marker);
 
             $('#instructions').html(successString);
             $('.step-2 a').attr('href', '#details');