Switch to inline colourable markers

app/assets/javascripts/dashboard.js

@@ -25,7 +25,7 @@ $(function () {
     $("[data-user]").each(function () {
       const user = $(this).data("user");
       if (user.lon && user.lat) {
-        L.marker([user.lat, user.lon], { icon: OSM.getMarker({ icon: user.icon }) }).addTo(map)
+        L.marker([user.lat, user.lon], { icon: OSM.getMarker({ color: user.color }) }).addTo(map)
           .bindPopup(user.description, { minWidth: 200 });
       }
     });

app/assets/javascripts/index/directions.js

@@ -24,8 +24,8 @@
   };
 
   const endpoints = [
-    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { icon: "MARKER_GREEN" }, endpointDragCallback, endpointChangeCallback),
-    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { icon: "MARKER_RED" }, endpointDragCallback, endpointChangeCallback)
+    OSM.DirectionsEndpoint(map, $("input[name='route_from']"), { color: "green" }, endpointDragCallback, endpointChangeCallback),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), { color: "red" }, endpointDragCallback, endpointChangeCallback)
   ];
 
   const expiry = new Date();
@@ -133,7 +133,7 @@
     routeOutput.remove();
     sidebarReadyPromise = null;
     map.setSidebarOverlaid(true);
     // TODO: collapse width of sidebar back to previous
   }
 
   setEngine("fossgis_osrm_car");
@@ -156,14 +156,18 @@
     getRoute(true, true);
   });
 
-  $(".routing_marker_column img").on("dragstart", function (e) {
+  $(".routing_marker_column svg").on("dragstart", function (e) {
     const dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = "move";
-    const dragData = { type: $(this).data("type") };
-    dt.setData("text", JSON.stringify(dragData));
+    const jqthis = $(this);
+    dt.setData("text", JSON.stringify(jqthis.data()));
     if (dt.setDragImage) {
-      const img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
+      const img = jqthis.clone()
+        .toggleClass("img-fluid position-absolute bottom-100 end-100")
+        .attr({ width: "25", height: "40" })
+        .appendTo(document.body);
       dt.setDragImage(img.get(0), 12, 21);
+      setTimeout(() => img.remove(), 0);
     }
   });
 

app/assets/javascripts/index/layers/notes.js

@@ -23,7 +23,7 @@ OSM.initializeNotesLayer = function (map) {
   function updateMarker(old_marker, feature) {
     let marker = old_marker;
     if (marker) {
-      marker.setIcon(OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }));
+      marker.setIcon(OSM.noteMarkers[feature.properties.status]);
     } else {
       let title;
       const description = feature.properties.comments[0];
@@ -33,7 +33,7 @@ OSM.initializeNotesLayer = function (map) {
       }
 
       marker = L.marker(feature.geometry.coordinates.reverse(), {
-        icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
+        icon: OSM.noteMarkers[feature.properties.status],
         title,
         opacity: 0.8,
         interactive: true

app/assets/javascripts/index/new_note.js

@@ -31,7 +31,7 @@ OSM.NewNote = function (map) {
 
   function addCreatedNoteMarker(feature) {
     const marker = L.marker(feature.geometry.coordinates.reverse(), {
-      icon: OSM.getMarker({ icon: `${feature.properties.status}_NOTE_MARKER`, shadow: false, height: 40 }),
+      icon: OSM.noteMarkers[feature.properties.status],
       opacity: 0.9,
       interactive: true
     });
@@ -61,7 +61,7 @@ OSM.NewNote = function (map) {
     if (newNoteMarker) map.removeLayer(newNoteMarker);
 
     newNoteMarker = L.marker(latlng, {
-      icon: OSM.getMarker({ icon: "NEW_NOTE_MARKER", shadow: false, height: 40 }),
+      icon: OSM.noteMarkers.new,
       opacity: 0.9,
       draggable: true
     });

app/assets/javascripts/index/note.js

@@ -69,7 +69,7 @@ OSM.Note = function (map) {
         type: "note",
         id: parseInt(id, 10),
         latLng: L.latLng(data.coordinates.split(",")),
-        icon: OSM.getMarker({ icon: `${data.status}_NOTE_MARKER`, shadow: false, height: 40 })
+        icon: OSM.noteMarkers[data.status]
       }, function () {
         if (!hashParams.center && !skipMoveToNote) {
           const latLng = L.latLng(data.coordinates.split(","));

app/assets/javascripts/leaflet.map.js

@@ -356,23 +356,6 @@ L.OSM.Map = L.Map.extend({
   }
 });
 
-L.Icon.Default.imagePath = "/images/";
-
-L.Icon.Default.imageUrls = {
-  "/images/marker-icon.png": OSM.MARKER_ICON,
-  "/images/marker-icon-2x.png": OSM.MARKER_ICON_2X,
-  "/images/marker-shadow.png": OSM.MARKER_SHADOW
-};
-
-L.extend(L.Icon.Default.prototype, {
-  _oldGetIconUrl: L.Icon.Default.prototype._getIconUrl,
-
-  _getIconUrl: function (name) {
-    const url = this._oldGetIconUrl(name);
-    return L.Icon.Default.imageUrls[url];
-  }
-});
-
 OSM.isDarkMap = function () {
   const mapTheme = $("body").attr("data-map-theme");
   if (mapTheme) return mapTheme === "dark";
@@ -381,17 +364,22 @@ OSM.isDarkMap = function () {
   return window.matchMedia("(prefers-color-scheme: dark)").matches;
 };
 
-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],
+OSM.getMarker = function ({ icon = "dot", color = "red", shadow = true }) {
+  const html = `<svg viewBox="0 0 25 40"${
+    shadow ? " overflow='visible'" : ""
+  }>${
+    shadow ? "<use href='#pin-shadow' />" : ""
+  }<use href="#pin-${icon}" color="${OSM.MARKER_COLORS[color] ?? color}" /></svg>`;
+  return L.divIcon({
+    html,
+    iconSize: [25, 40],
+    iconAnchor: [12, 40],
     popupAnchor: [1, -34]
-  };
-  if (shadow) {
-    options.shadowUrl = OSM.MARKER_SHADOW;
-    options.shadowSize = [41, 41];
-    options.shadowAnchor = [12, 41];
-  }
-  return L.icon(options);
+  });
+};
+
+OSM.noteMarkers = {
+  "closed": OSM.getMarker({ icon: "tick", color: "green", shadow: false }),
+  "new": OSM.getMarker({ icon: "plus", color: "blue", shadow: false }),
+  "open": OSM.getMarker({ icon: "cross", color: "red", shadow: false })
 };

app/assets/javascripts/osm.js.erb

@@ -29,17 +29,7 @@ OSM = {
 
   LAYER_DEFINITIONS: <%= MapLayers::full_definitions("config/layers.yml", :legends => "config/key.yml").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 %>,
-
-  MARKER_ICON: <%= image_path("leaflet/dist/images/marker-icon.png").to_json %>,
-  MARKER_ICON_2X: <%= image_path("leaflet/dist/images/marker-icon-2x.png").to_json %>,
-  MARKER_SHADOW: <%= image_path("leaflet/dist/images/marker-shadow.png").to_json %>,
-
-  NEW_NOTE_MARKER: <%= image_path("new_note_marker.svg").to_json %>,
-  OPEN_NOTE_MARKER: <%= image_path("open_note_marker.svg").to_json %>,
-  CLOSED_NOTE_MARKER: <%= image_path("closed_note_marker.svg").to_json %>,
+  MARKER_COLORS: <%= MARKER_COLORS.to_json %>,
 
   apiUrl: function (object) {
     const apiType = object.type === "note" ? "notes" : object.type;

app/assets/stylesheets/common.scss

@@ -596,7 +596,7 @@ tr.turn {
   margin-right: .35rem;
   width: 15px;
 
-  img {
+  svg {
     cursor: move;
   }
 }

app/assets/stylesheets/leaflet-all.scss

@@ -23,3 +23,8 @@ div.leaflet-marker-icon.location-filter.move-marker {
 .site .leaflet-popup p {
   margin: 0 0 20px 0;
 }
+
+div.leaflet-div-icon {
+  background: none;
+  border: none;
+}

app/views/dashboards/_contact.html.erb

@@ -1,7 +1,7 @@
 <% user_data = {
      :lon => contact.home_lon,
      :lat => contact.home_lat,
-     :icon => type == "following" ? "MARKER_BLUE" : "MARKER_GREEN",
+     :color => MARKER_COLORS[type == "following" ? :blue : :green],
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>
 <%= tag.div :class => "row", :data => { :user => user_data } do %>

app/views/dashboards/show.html.erb

@@ -2,6 +2,7 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
+<%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %>
 <div class="row">
   <div class="col-md order-md-last">
     <% if !current_user.home_location? %>
@@ -15,7 +16,7 @@
       <% user_data = {
            :lon => current_user.home_lon,
            :lat => current_user.home_lat,
-           :icon => "MARKER_RED",
+           :color => MARKER_COLORS[: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 } %>

app/views/layouts/_markers.html.erb

@@ -0,0 +1,44 @@
+<svg width="0" height="0" class="end-100 position-absolute">
+  <defs>
+    <linearGradient id="fill" x1="0" x2="0" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#aaa6" />
+      <stop offset="1" stop-color="#2224" />
+    </linearGradient>
+    <linearGradient id="stroke" x1="0" x2="0" y1="0" y2="20" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6666" />
+      <stop offset="1" stop-color="#4448" />
+    </linearGradient>
+    <clipPath id="pin-clip">
+      <path id="pin-path" d="M12.5 40 2.94 21.6448C1.47 18.8224 0 16 0 12.5a12.5 12.5 0 0 1 25 0c0 3.5-1.47 6.3224-2.94 9.1448z" />
+    </clipPath>
+    <image id="pin-shadow" x="-1" href="<%= image_path("leaflet/dist/images/marker-shadow.png") %>" />
+
+    <% markers = {
+         "plus" => { :"stroke-linecap" => "round", :d => "M5.75 13h13.5m-6.75-6.75v13.5" },
+         "tick" => { :"stroke-linecap" => "round", :"stroke-linejoin" => "round", :fill => "none", :d => "M7.157 14.649Q8.9 16 11.22 18.761 14.7 11.7 17.843 8.239" },
+         "cross" => { :"stroke-linecap" => "round", :d => "m7.5 8 10 10m0-10-10 10" },
+         "dot" => { :"stroke-linecap" => "round", :fill => "#fff", :d => "M11.5 10a1 1 0 0 0 2 5 1 1 0 0 0-2-5" }
+       } %>
+
+    <% types.filter { |type| markers[type] }.each do |type| %>
+      <path id="<%= type %>-path" <%= tag.attributes(markers[type]) %> />
+      <g id="pin-<%= type %>" clip-path="url(#pin-clip)">
+        <use href="#pin-path" fill="currentColor" />
+        <use href="#pin-path" fill="url(#fill)" />
+        <g stroke="#fff" opacity="0.122">
+          <use href="#pin-path" fill="none" stroke-width="4.4" />
+          <use href="#<%= type %>-path" stroke-width="7.2" />
+        </g>
+        <g stroke="currentColor">
+          <use href="#pin-path" fill="none" stroke-width="2.2" />
+          <use href="#<%= type %>-path" stroke-width="5" />
+        </g>
+        <g stroke="url(#stroke)">
+          <use href="#pin-path" fill="none" stroke-width="2.2" />
+          <use href="#<%= type %>-path" stroke-width="5" />
+        </g>
+        <use href="#<%= type %>-path" stroke="#fff" stroke-width="2.8" />
+      </g>
+    <% end %>
+  </defs>
+</svg>

app/views/layouts/_search.html.erb

@@ -42,13 +42,17 @@
         <div class="d-flex flex-column gap-1 flex-grow-1">
           <div class="d-flex gap-2 align-items-center">
             <div class="routing_marker_column position-absolute">
-              <%= image_tag "marker-green.png", :class => "img-fluid", :data => { :type => "from" }, :draggable => "true" %>
+              <svg viewBox="0 0 25 40" class="img-fluid" data-type="from" draggable="true">
+                <use href="#pin-dot" color="<%= MARKER_COLORS[:green] %>" />
+              </svg>
             </div>
             <%= text_field_tag "route_from", params[:from], :placeholder => t("site.search.from"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
           </div>
           <div class="d-flex gap-2 align-items-center">
             <div class="routing_marker_column position-absolute">
-              <%= image_tag "marker-red.png", :class => "img-fluid", :data => { :type => "to" }, :draggable => "true" %>
+              <svg viewBox="0 0 25 40" class="img-fluid" data-type="to" draggable="true">
+                <use href="#pin-dot" color="<%= MARKER_COLORS[:red] %>" />
+              </svg>
             </div>
             <%= text_field_tag "route_to", params[:to], :placeholder => t("site.search.to"), :autocomplete => "on", :class => "form-control py-1 px-2 ps-4", :dir => "auto" %>
           </div>

app/views/layouts/map.html.erb

@@ -18,6 +18,8 @@
 
     <div id="browse_status"></div>
 
+    <%= render :partial => "layouts/markers", :locals => { :types => %w[dot cross tick plus] } %>
+
     <%= render :partial => "layouts/sidebar_close" %>
 
     <div id="sidebar_loader" class="my-3 text-center loader" hidden>

app/views/notes/index.html.erb

@@ -26,6 +26,8 @@
 <% else %>
   <%= render :partial => "notes_paging_nav" %>
 
+  <%= render :partial => "layouts/markers", :locals => { :types => %w[cross tick] } %>
+
   <table class="table table-sm note_list">
     <thead>
       <tr>
@@ -40,11 +42,9 @@
   <% @notes.each do |note| -%>
     <tr<% if note.author == @user %> class="table-primary"<% end %>>
       <td>
-        <% if note.closed? %>
-          <%= image_tag("closed_note_marker.svg", :alt => "closed", :width => 25, :height => 40) %>
-        <% else %>
-          <%= image_tag("open_note_marker.svg", :alt => "open", :width => 25, :height => 40) %>
-        <% end %>
+        <svg width="25" height="40" alt="<%= t(note.closed? ? ".closed" : ".open") %>">
+          <%= tag.use :href => note.closed? ? "#pin-tick" : "#pin-cross", :color => MARKER_COLORS[note.closed? ? :green : :red] %>
+        </svg>
       </td>
       <td><%= link_to note.id, note %></td>
       <td><%= note_author(note.author) %></td>

config/initializers/marker_colors.rb

@@ -0,0 +1,5 @@
+MARKER_COLORS = {
+  :red => "#f6110a",
+  :green => "#9cef11",
+  :blue => "#0b8ef1"
+}.freeze