From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Fri, 28 Mar 2025 07:18:50 +0000 (+0100)
Subject: Consolidate leaflet marker creation in OSM.getMarker
X-Git-Tag: live~91^2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/6d8d41b166d59ddb3250d7b8d5b5f275c86bedf1?ds=inline;hp=-c

Consolidate leaflet marker creation in OSM.getMarker
---

6d8d41b166d59ddb3250d7b8d5b5f275c86bedf1
diff --git a/app/assets/javascripts/diary_entry.js b/app/assets/javascripts/diary_entry.js
index bfc3fc012..e43446094 100644
--- 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 a4b3a928b..97b841f14 100644
--- 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 057933453..57def249a 100644
--- 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 597b68eff..1cc644cf2 100644
--- 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 104f6f2f2..00f1fb4e9 100644
--- 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 b1457d10b..1b409846f 100644
--- 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 f0b7dae27..a77735c95 100644
--- 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 b3ef3ceb3..4c1213320 100644
--- 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 ac31f7941..b301711a2 100644
--- 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 4f0bd8f77..6762ce6b0 100644
--- 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 77a71097b..a2516984e 100644
--- 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 0dda0b354..fc99ada79 100644
--- 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 e110ad531..894edd240 100644
--- 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 } %>