Consolidate leaflet marker creation in OSM.getMarker

diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index bfc3fc0128a70470324f68117f7789d1316d8584..e434460941529f39642e29af7658fe8d0bcc235d 100644 (file)
--- a/app/assets/javascripts/diary_entry.js
+++ b/app/assets/javascripts/diary_entry.js
@@ -11,7 +11,7 @@ $(function () {
       map.removeLayer(marker);
     }
 
-    marker = L.marker(e.latlng, { icon: OSM.getUserIcon() }).addTo(map)
+    marker = L.marker(e.latlng, { icon: OSM.getMarker({}) }).addTo(map)
       .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
   }
 
@@ -36,7 +36,7 @@ $(function () {
     map.setView(centre, params.zoom);
 
     if ($("#latitude").val() && $("#longitude").val()) {
-      marker = L.marker(centre, { icon: OSM.getUserIcon() }).addTo(map)
+      marker = L.marker(centre, { icon: OSM.getMarker({}) }).addTo(map)
         .bindPopup(OSM.i18n.t("diary_entries.edit.marker_text"));
     }
 

diff --git a/app/assets/javascripts/index/directions-endpoint.js b/app/assets/javascripts/index/directions-endpoint.js
index a4b3a928bbbfa85a68eb5a7647bcaaaa8490efa8..97b841f1443c6dceae67daeb7845a167708159e2 100644 (file)
--- a/app/assets/javascripts/index/directions-endpoint.js
+++ b/app/assets/javascripts/index/directions-endpoint.js
@@ -1,15 +1,8 @@
-OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, changeCallback) {
+OSM.DirectionsEndpoint = function Endpoint(map, input, marker, dragCallback, changeCallback) {
   const endpoint = {};
 
   endpoint.marker = L.marker([0, 0], {
-    icon: L.icon({
-      iconUrl: iconUrl,
-      iconSize: [25, 41],
-      iconAnchor: [12, 41],
-      popupAnchor: [1, -34],
-      shadowUrl: OSM.MARKER_SHADOW,
-      shadowSize: [41, 41]
-    }),
+    icon: OSM.getMarker(marker),
     draggable: true,
     autoPan: true
   });

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index 05793345327d42714b6d23f308135f83cff528b2..57def249ac68d1d58800a0a8798e6a986b7e3c56 100644 (file)
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -33,8 +33,8 @@ OSM.Directions = function (map) {
   };
 
   const endpoints = [
-    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), OSM.MARKER_GREEN, endpointDragCallback, endpointChangeCallback),
-    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), OSM.MARKER_RED, endpointDragCallback, endpointChangeCallback)
+    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "MARKER_GREEN" }, endpointDragCallback, endpointChangeCallback),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "MARKER_RED" }, endpointDragCallback, endpointChangeCallback)
   ];
 
   let downloadURL = null;

diff --git a/app/assets/javascripts/index/home.js b/app/assets/javascripts/index/home.js
index 597b68eff4a7216e81cb1c39eacf101cbb1cb8bd..1cc644cf2bc64b32ad514e1e66036ba94db6f2b6 100644 (file)
--- a/app/assets/javascripts/index/home.js
+++ b/app/assets/javascripts/index/home.js
@@ -17,7 +17,7 @@ OSM.Home = function (map) {
         map.setView(OSM.home, 15, { reset: true });
       });
       marker = L.marker(OSM.home, {
-        icon: OSM.getUserIcon(),
+        icon: OSM.getMarker({}),
         title: OSM.i18n.t("javascripts.home.marker_title")
       }).addTo(map);
     } else {

diff --git a/app/assets/javascripts/index/layers/notes.js b/app/assets/javascripts/index/layers/notes.js
index 104f6f2f22cbf40d226bdfe1c411cb108c6a354f..00f1fb4e93be9c561edc1b7e25566b68590551ac 100644 (file)
--- a/app/assets/javascripts/index/layers/notes.js
+++ b/app/assets/javascripts/index/layers/notes.js
@@ -3,24 +3,6 @@ OSM.initializeNotesLayer = function (map) {
   const noteLayer = map.noteLayer;
   let notes = {};
 
-  const noteIcons = {
-    "new": L.icon({
-      iconUrl: OSM.NEW_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "open": L.icon({
-      iconUrl: OSM.OPEN_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "closed": L.icon({
-      iconUrl: OSM.CLOSED_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    })
-  };
-
   noteLayer.on("add", () => {
     loadNotes();
     map.on("moveend", loadNotes);
@@ -41,7 +23,7 @@ OSM.initializeNotesLayer = function (map) {
   function updateMarker(old_marker, feature) {
     let marker = old_marker;
     if (marker) {
-      marker.setIcon(noteIcons[feature.properties.status]);
+      marker.setIcon(OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }));
     } else {
       let title;
       const description = feature.properties.comments[0];
@@ -51,7 +33,7 @@ OSM.initializeNotesLayer = function (map) {
       }
 
       marker = L.marker(feature.geometry.coordinates.reverse(), {
-        icon: noteIcons[feature.properties.status],
+        icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
         title,
         opacity: 0.8,
         interactive: true

diff --git a/app/assets/javascripts/index/new_note.js b/app/assets/javascripts/index/new_note.js
index b1457d10b0233a745b5e9c4a2736637bcfe63834..1b409846f870848fb48d9871061d71e53ce6b99f 100644 (file)
--- a/app/assets/javascripts/index/new_note.js
+++ b/app/assets/javascripts/index/new_note.js
@@ -6,24 +6,6 @@ OSM.NewNote = function (map) {
   let newNoteMarker,
       halo;
 
-  const noteIcons = {
-    "new": L.icon({
-      iconUrl: OSM.NEW_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "open": L.icon({
-      iconUrl: OSM.OPEN_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "closed": L.icon({
-      iconUrl: OSM.CLOSED_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    })
-  };
-
   addNoteButton.on("click", function (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -49,7 +31,7 @@ OSM.NewNote = function (map) {
 
   function addCreatedNoteMarker(feature) {
     const marker = L.marker(feature.geometry.coordinates.reverse(), {
-      icon: noteIcons[feature.properties.status],
+      icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
       opacity: 0.9,
       interactive: true
     });
@@ -79,7 +61,7 @@ OSM.NewNote = function (map) {
     if (newNoteMarker) map.removeLayer(newNoteMarker);
 
     newNoteMarker = L.marker(latlng, {
-      icon: noteIcons.new,
+      icon: OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }),
       opacity: 0.9,
       draggable: true
     });

diff --git a/app/assets/javascripts/index/note.js b/app/assets/javascripts/index/note.js
index f0b7dae273d9b02a0ac812d36125b4dd2bbe5fd5..a77735c95966890a66eab7c0b3e52ff8995d04bf 100644 (file)
--- a/app/assets/javascripts/index/note.js
+++ b/app/assets/javascripts/index/note.js
@@ -2,24 +2,6 @@ OSM.Note = function (map) {
   const content = $("#sidebar_content"),
         page = {};
 
-  const noteIcons = {
-    "new": L.icon({
-      iconUrl: OSM.NEW_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "open": L.icon({
-      iconUrl: OSM.OPEN_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    }),
-    "closed": L.icon({
-      iconUrl: OSM.CLOSED_NOTE_MARKER,
-      iconSize: [25, 40],
-      iconAnchor: [12, 40]
-    })
-  };
-
   page.pushstate = page.popstate = function (path, id) {
     OSM.loadSidebarContent(path, function () {
       const data = $(".details").data();
@@ -87,7 +69,7 @@ OSM.Note = function (map) {
         type: "note",
         id: parseInt(id, 10),
         latLng: L.latLng(data.coordinates.split(",")),
-        icon: noteIcons[data.status]
+        icon: OSM.getMarker({ icon: `${data.status}_NOTE_MARKER`, shadow: false, height: 40 })
       }, function () {
         if (!hashParams.center && !skipMoveToNote) {
           const latLng = L.latLng(data.coordinates.split(","));

diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index b3ef3ceb3c13de3d4a7dbad7b4d8f7a313719000..4c1213320a70672bbe7f2c72e44ecee242ddf857 100644 (file)
--- a/app/assets/javascripts/index/search.js
+++ b/app/assets/javascripts/index/search.js
@@ -63,7 +63,7 @@ OSM.Search = function (map) {
     if (!marker) {
       const data = $(this).find("a.set_position").data();
 
-      marker = L.marker([data.lat, data.lon], { icon: OSM.getUserIcon() });
+      marker = L.marker([data.lat, data.lon], { icon: OSM.getMarker({}) });
 
       $(this).data("marker", marker);
     }

diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
index ac31f79416034e1f894e7cefbedcfdd678606b0c..b301711a2679758deea332603d34acf13acc363d 100644 (file)
--- a/app/assets/javascripts/leaflet.map.js
+++ b/app/assets/javascripts/leaflet.map.js
@@ -391,13 +391,17 @@ OSM.isDarkMap = function () {
   return window.matchMedia("(prefers-color-scheme: dark)").matches;
 };
 
-OSM.getUserIcon = function (url) {
-  return L.icon({
-    iconUrl: url || OSM.MARKER_RED,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowUrl: OSM.MARKER_SHADOW,
-    shadowSize: [41, 41]
-  });
+OSM.getMarker = function ({ icon = "MARKER_RED", shadow = true, height = 41 }) {
+  const options = {
+    iconUrl: OSM[icon.toUpperCase()] || OSM.MARKER_RED,
+    iconSize: [25, height],
+    iconAnchor: [12, height],
+    popupAnchor: [1, -34]
+  };
+  if (shadow) {
+    options.shadowUrl = OSM.MARKER_SHADOW;
+    options.shadowSize = [41, 41];
+    options.shadowAnchor = [12, 41];
+  }
+  return L.icon(options);
 };

diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
index 4f0bd8f777c608986d65c4e1d7ab1589dad8d07c..6762ce6b08abc9d4ea2e4194fad9b12e0c2fdd91 100644 (file)
--- a/app/assets/javascripts/osm.js.erb
+++ b/app/assets/javascripts/osm.js.erb
@@ -30,6 +30,7 @@ OSM = {
   LAYER_DEFINITIONS: <%= MapLayers::full_definitions("config/layers.yml").to_json %>,
   LAYERS_WITH_MAP_KEY: <%= YAML.load_file(Rails.root.join("config/key.yml")).keys.to_json %>,
 
+  MARKER_BLUE: <%= image_path("marker-blue.png").to_json %>,
   MARKER_GREEN: <%= image_path("marker-green.png").to_json %>,
   MARKER_RED: <%= image_path("marker-red.png").to_json %>,
 

diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 77a71097b1d41d899372c043e5341ba8f1ce2e27..a2516984e0a84da9ccab4ca92c525f403f9623ce 100644 (file)
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -51,7 +51,7 @@ $(function () {
 
     if ($("#map").hasClass("set_location")) {
       marker = L.marker([0, 0], {
-        icon: OSM.getUserIcon(),
+        icon: OSM.getMarker({}),
         keyboard: false,
         interactive: false
       });
@@ -124,7 +124,7 @@ $(function () {
       $("[data-user]").each(function () {
         const user = $(this).data("user");
         if (user.lon && user.lat) {
-          L.marker([user.lat, user.lon], { icon: OSM.getUserIcon(user.icon) }).addTo(map)
+          L.marker([user.lat, user.lon], { icon: OSM.getMarker({ icon: user.icon }) }).addTo(map)
             .bindPopup(user.description, { minWidth: 200 });
         }
       });

diff --git a/app/views/dashboards/_contact.html.erb b/app/views/dashboards/_contact.html.erb
index 0dda0b35481f98d146f563974105a6120224c86e..fc99ada79b9aaa6050e7465294f5d969d0b71fe6 100644 (file)
--- a/app/views/dashboards/_contact.html.erb
+++ b/app/views/dashboards/_contact.html.erb
@@ -1,7 +1,7 @@
 <% user_data = {
      :lon => contact.home_lon,
      :lat => contact.home_lat,
-     :icon => image_path(type == "following" ? "marker-blue.png" : "marker-green.png"),
+     :icon => type == "following" ? "MARKER_BLUE" : "MARKER_GREEN",
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>
 <%= tag.div :class => "clearfix row", :data => { :user => user_data } do %>

diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
index e110ad531f1f11ad66b4464e24a39a3e52f7ead9..894edd2404217c37374737594a9bf957e76b84df 100644 (file)
--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@@ -15,7 +15,7 @@
       <% user_data = {
            :lon => current_user.home_lon,
            :lat => current_user.home_lat,
-           :icon => image_path("marker-red.png"),
+           :icon => "MARKER_RED",
            :description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" })
          } %>
       <%= tag.div "", :id => "map", :class => "content_map border border-secondary-subtle rounded z-0", :data => { :user => user_data } %>