Convert leaflet markers to SVG

Author: hlfan

app/assets/config/manifest.js

@@ -17,7 +17,5 @@
 
 //= link_tree ../../../vendor/assets/leaflet .png
 
-//= link leaflet/dist/images/marker-icon.png
-//= link leaflet/dist/images/marker-icon-2x.png
 //= link leaflet/dist/images/marker-shadow.png
 //= link cal-heatmap/dist/cal-heatmap.css

app/assets/images/closed_note_marker.svg

@@ -59,11 +59,11 @@ window.onload = function () {
 
   if (args.marker) {
     L.marker(args.marker.split(","), { icon: L.icon({
-      iconUrl: <%= asset_path('leaflet/dist/images/marker-icon.png').to_json %>,
-      iconSize: new L.Point(25, 41),
-      iconAnchor: new L.Point(12, 41),
-      shadowUrl: <%= asset_path('leaflet/dist/images/marker-shadow.png').to_json %>,
-      shadowSize: new L.Point(41, 41)
+      iconUrl: <%= image_path("marker-blue.svg").to_json %>,
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      shadowUrl: <%= image_path("leaflet/dist/images/marker-shadow.png").to_json %>,
+      shadowSize: [41, 41]
     }) }).addTo(map);
   }
 

app/assets/images/marker-blue.png

@@ -373,8 +373,8 @@ 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-icon.png": OSM.MARKER_BLUE,
+  "/images/marker-icon-2x.png": OSM.MARKER_BLUE,
   "/images/marker-shadow.png": OSM.MARKER_SHADOW
 };
 

app/assets/images/marker-blue.svg

@@ -32,11 +32,10 @@ OSM = {
   LAYER_DEFINITIONS: <%= YAML.load_file(Rails.root.join("config/layers.yml")).to_json %>,
   LAYERS_WITH_MAP_KEY: <%= YAML.load_file(Rails.root.join("config/key.yml")).keys.to_json %>,
 
-  MARKER_GREEN: <%= image_path("marker-green.png").to_json %>,
-  MARKER_RED: <%= image_path("marker-red.png").to_json %>,
+  MARKER_RED: <%= image_path("marker-red.svg").to_json %>,
+  MARKER_GREEN: <%= image_path("marker-green.svg").to_json %>,
+  MARKER_BLUE: <%= image_path("marker-blue.svg").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 %>,

app/assets/images/marker-green.png

@@ -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 => image_path(type == "following" ? "marker-blue.svg" : "marker-green.svg"),
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>
 <%= tag.div :class => "clearfix row", :data => { :user => user_data } do %>

app/assets/images/marker-green.svg

@@ -15,7 +15,7 @@
       <% user_data = {
            :lon => current_user.home_lon,
            :lat => current_user.home_lat,
-           :icon => image_path("marker-red.png"),
+           :icon => image_path("marker-red.svg"),
            :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/assets/images/marker-red.png

@@ -40,13 +40,13 @@
         <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" %>
+              <%= image_tag "marker-green.svg", :class => "img-fluid", :data => { :type => "from" }, :draggable => "true" %>
             </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" %>
+              <%= image_tag "marker-red.svg", :class => "img-fluid", :data => { :type => "to" }, :draggable => "true" %>
             </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>