Create osm-specific locate control class

[rails.git] / app / assets / javascripts / index.js

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 6584864d544a4e05c92cb2f73bed1dd6a9b1f4d6..011f3b28258017b507a1f474942550980b69884e 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -1,5 +1,7 @@
 //= require_self
 //= require leaflet.sidebar
+//= require leaflet.sidebar-pane
+//= require leaflet.locatecontrol/src/L.Control.Locate
 //= require leaflet.locate
 //= require leaflet.layers
 //= require leaflet.key
@@ -20,17 +22,16 @@
 //= require index/changeset
 //= require index/query
 //= require router
-//= require querystring
+//= require qs/dist/qs
 
 $(document).ready(function () {
-  var querystring = require("querystring-component");
-
   var loaderTimeout;
 
   var map = new L.OSM.Map("map", {
     zoomControl: false,
     layerControl: false,
-    contextmenu: true
+    contextmenu: true,
+    worldCopyJump: true
   });
 
   OSM.loadSidebarContent = function (path, callback) {
@@ -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"),
-      metersUnit: I18n.t("javascripts.map.locate.metersUnit"),
-      feetUnit: I18n.t("javascripts.map.locate.feetUnit"),
-      popup: I18n.t("javascripts.map.locate.popup")
-    }
-  }).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({
@@ -189,38 +171,37 @@ $(document).ready(function () {
       map.getLayersCode(),
       map._object);
 
-    $.removeCookie("_osm_location");
-    $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
+    Cookies.set("_osm_location", OSM.locationCookie(map), { secure: true, expires: expiry, path: "/", samesite: "lax" });
   });
 
-  if ($.cookie("_osm_welcome") !== "hide") {
+  if (Cookies.get("_osm_welcome") !== "hide") {
     $(".welcome").addClass("visible");
   }
 
-  $(".welcome .close-wrap").on("click", function () {
+  $(".welcome .btn-close").on("click", function () {
     $(".welcome").removeClass("visible");
-    $.cookie("_osm_welcome", "hide", { expires: expiry, path: "/" });
+    Cookies.set("_osm_welcome", "hide", { secure: true, expires: expiry, path: "/", samesite: "lax" });
   });
 
   var bannerExpiry = new Date();
   bannerExpiry.setYear(bannerExpiry.getFullYear() + 1);
 
-  $("#banner .close-wrap").on("click", function (e) {
+  $("#banner .btn-close").on("click", function (e) {
     var cookieId = e.target.id;
     $("#banner").hide();
     e.preventDefault();
     if (cookieId) {
-      $.cookie(cookieId, "hide", { expires: bannerExpiry, path: "/" });
+      Cookies.set(cookieId, "hide", { secure: true, expires: bannerExpiry, path: "/", samesite: "lax" });
     }
   });
 
-  if (OSM.PIWIK) {
+  if (OSM.MATOMO) {
     map.on("layeradd", function (e) {
       if (e.layer.options) {
-        var goal = OSM.PIWIK.goals[e.layer.options.keyid];
+        var goal = OSM.MATOMO.goals[e.layer.options.keyid];
 
         if (goal) {
-          $("body").trigger("piwikgoal", goal);
+          $("body").trigger("matomogoal", goal);
         }
       }
     });
@@ -263,7 +244,7 @@ $(document).ready(function () {
     var iframe = $("<iframe>")
       .hide()
       .appendTo("body")
-      .attr("src", url + querystring.stringify(query))
+      .attr("src", url + Qs.stringify(query))
       .on("load", function () {
         $(this).remove();
         loaded = true;
@@ -308,7 +289,7 @@ $(document).ready(function () {
     };
 
     page.load = function () {
-      var params = querystring.parse(location.search.substring(1));
+      var params = Qs.parse(location.search.substring(1));
       if (params.query) {
         $("#sidebar .search_form input[name=query]").value(params.query);
       }