Overhaul markers

Author: hlfan

app/assets/config/manifest.js

@@ -17,6 +17,4 @@
 
 //= 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

app/assets/images/marker-blue.png

@@ -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, 40],
+      iconAnchor: [12, 40],
+      shadowUrl: <%= image_path("leaflet/dist/images/marker-shadow.png").to_json %>,
+      shadowSize: [41, 41]
     }) }).addTo(map);
   }
 

app/assets/images/marker-blue.svg

@@ -4,8 +4,8 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, ch
   endpoint.marker = L.marker([0, 0], {
     icon: L.icon({
       iconUrl: iconUrl,
-      iconSize: [25, 41],
-      iconAnchor: [12, 41],
+      iconSize: [25, 40],
+      iconAnchor: [12, 40],
       popupAnchor: [1, -34],
       shadowUrl: OSM.MARKER_SHADOW,
       shadowSize: [41, 41]

app/assets/images/marker-from.svg

@@ -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']"), OSM.MARKER_FROM, endpointDragCallback, endpointChangeCallback),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), OSM.MARKER_TO, endpointDragCallback, endpointChangeCallback)
   ];
 
   let downloadURL = null;

app/assets/images/marker-green.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
 };
 
@@ -398,8 +398,8 @@ OSM.isDarkMap = function () {
 OSM.getUserIcon = function (url) {
   return L.icon({
     iconUrl: url || OSM.MARKER_RED,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
+    iconSize: [25, 40],
+    iconAnchor: [12, 40],
     popupAnchor: [1, -34],
     shadowUrl: OSM.MARKER_SHADOW,
     shadowSize: [41, 41]

app/assets/images/marker-green.svg

@@ -32,17 +32,19 @@ 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_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 %>,
+  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_NOTE_NEW: <%= image_path("marker-note-new.svg").to_json %>,
   MARKER_NOTE_OPEN: <%= image_path("marker-note-open.svg").to_json %>,
   MARKER_NOTE_CLOSED: <%= image_path("marker-note-closed.svg").to_json %>,
 
+  MARKER_FROM: <%= image_path("marker-from.svg").to_json %>,
+  MARKER_TO: <%= image_path("marker-to.svg").to_json %>,
+
+  MARKER_SHADOW: <%= image_path("leaflet/dist/images/marker-shadow.png").to_json %>,
+
   apiUrl: function (object) {
     const apiType = object.type === "note" ? "notes" : object.type;
     let url = "/api/" + OSM.API_VERSION + "/" + apiType + "/" + object.id;

app/assets/images/marker-note-closed.svg

@@ -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-note-new.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 } %>