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

@@ -39,11 +39,11 @@ window.onload = function () {
 
   if (args.has("marker")) {
     L.marker(args.get("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

@@ -369,8 +369,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

@@ -30,12 +30,10 @@ 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 %>,
+  MARKER_BLUE: <%= image_path("marker-blue.svg").to_json %>,
+  MARKER_GREEN: <%= image_path("marker-green.svg").to_json %>,
+  MARKER_RED: <%= image_path("marker-red.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

@@ -42,13 +42,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>