Create osm-specific locate control class

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 5ba36a455db9e3a06ef467a872657844e8f972d9..011f3b28258017b507a1f474942550980b69884e 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -2,6 +2,7 @@
 //= require leaflet.sidebar
 //= require leaflet.sidebar-pane
 //= require leaflet.locatecontrol/src/L.Control.Locate
+//= require leaflet.locate
 //= require leaflet.layers
 //= require leaflet.key
 //= require leaflet.note
@@ -98,34 +99,15 @@ $(document).ready(function () {
     }
   });
 
+  var sidebar = L.OSM.sidebar("#map-ui")
+    .addTo(map);
+
   var position = $("html").attr("dir") === "rtl" ? "topleft" : "topright";
 
   L.OSM.zoom({ position: position })
     .addTo(map);
 
-  var locate = L.control.locate({
-    position: position,
-    icon: "icon geolocate",
-    iconLoading: "icon geolocate",
-    strings: {
-      title: I18n.t("javascripts.map.locate.title"),
-      popup: function (options) {
-        return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance });
-      }
-    }
-  }).addTo(map);
-
-  var locateContainer = locate.getContainer();
-
-  $(locateContainer)
-    .removeClass("leaflet-control-locate leaflet-bar")
-    .addClass("control-locate")
-    .children("a")
-    .attr("href", "#")
-    .removeClass("leaflet-bar-part leaflet-bar-part-single")
-    .addClass("control-button");
-
-  var sidebar = L.OSM.sidebar("#map-ui")
+  L.OSM.locate({ position: position })
     .addTo(map);
 
   L.OSM.layers({

diff --git a/app/assets/javascripts/leaflet.locate.js b/app/assets/javascripts/leaflet.locate.js
new file mode 100644 (file)
index 0000000..d43a5e4
--- /dev/null
+++ b/app/assets/javascripts/leaflet.locate.js
@@ -0,0 +1,26 @@
+L.OSM.locate = function (options) {
+  var control = L.control.locate(Object.assign({
+    icon: "icon geolocate",
+    iconLoading: "icon geolocate",
+    strings: {
+      title: I18n.t("javascripts.map.locate.title"),
+      popup: function (options) {
+        return I18n.t("javascripts.map.locate." + options.unit + "Popup", { count: options.distance });
+      }
+    }
+  }, options));
+
+  control.onAdd = function (map) {
+    var container = Object.getPrototypeOf(this).onAdd.apply(this, [map]);
+    $(container)
+      .removeClass("leaflet-control-locate leaflet-bar")
+      .addClass("control-locate")
+      .children("a")
+      .attr("href", "#")
+      .removeClass("leaflet-bar-part leaflet-bar-part-single")
+      .addClass("control-button");
+    return container;
+  };
+
+  return control;
+};