Overhaul markers

hlfan · hlfan · commit de43fe58a2f1 · 2025-03-14T04:26:40.000+01:00
diff --git a/app/assets/config/manifest.js b/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
diff --git a/app/assets/images/marker-blue.png b/app/assets/images/marker-blue.png
diff --git a/app/assets/images/marker-blue.svg b/app/assets/images/marker-blue.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#4d9cd1"/>
+      <stop offset="1" stop-color="#266bb3"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3984b9"/>
+      <stop offset="1" stop-color="#265475"/>
+    </linearGradient>
+    <path id="c" stroke-linecap="round" stroke-linejoin="round" d="M10 12a1 1 0 0 1 5 1 1 1 0 0 1-5-1"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.3" href="#c"/>
+  </g>
+  <use stroke="url(#b)" stroke-width="5.1" href="#c"/>
+  <use fill="#fff" stroke="#fff" stroke-width="2.9" href="#c"/>
+</svg>
diff --git a/app/assets/images/marker-from.svg b/app/assets/images/marker-from.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#a2c857"/>
+      <stop offset="1" stop-color="#7ab825"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#89b73e"/>
+      <stop offset="1" stop-color="#5d7336"/>
+    </linearGradient>
+    <path id="c" stroke-linecap="round" stroke-linejoin="round" d="M6 13h7v7l5-12Z"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.1" href="#c"/>
+  </g>
+  <use stroke="url(#b)" stroke-width="4.9" href="#c"/>
+  <use fill="#fff" stroke="#fff" stroke-width="2.7" href="#c"/>
+</svg>
diff --git a/app/assets/images/marker-green.png b/app/assets/images/marker-green.png
diff --git a/app/assets/images/marker-green.svg b/app/assets/images/marker-green.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#a2c857"/>
+      <stop offset="1" stop-color="#7ab825"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#89b73e"/>
+      <stop offset="1" stop-color="#5d7336"/>
+    </linearGradient>
+    <path id="c" stroke-linecap="round" stroke-linejoin="round" d="M10 12a1 1 0 0 1 5 1 1 1 0 0 1-5-1"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.1" href="#c"/>
+  </g>
+  <use stroke="url(#b)" stroke-width="4.9" href="#c"/>
+  <use fill="#fff" stroke="#fff" stroke-width="2.7" href="#c"/>
+</svg>
diff --git a/app/assets/images/marker-note-closed.svg b/app/assets/images/marker-note-closed.svg
@@ -1,19 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="40.226" width="25.1">
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
   <defs>
-    <linearGradient id="A" x1="106.764" gradientUnits="userSpaceOnUse" y1="59.373" x2="106.764" y2="21.809">
-      <stop stop-color="#7cb928" offset="0"/>
-      <stop stop-color="#a2c857" offset="1"/>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#a2c857"/>
+      <stop offset="1" stop-color="#7ab825"/>
     </linearGradient>
-    <linearGradient id="B" x1="106.76" gradientUnits="userSpaceOnUse" y1="40.861" x2="106.76" y2="21.809">
-      <stop stop-color="#74963a" offset="0"/>
-      <stop stop-color="#89b63e" offset="1"/>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#89b73e"/>
+      <stop offset="1" stop-color="#5d7336"/>
     </linearGradient>
+    <path id="c" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M7.157 14.649Q8.9 16 11.22 18.761 14.7 11.7 17.843 8.239"/>
   </defs>
-  <path fill-rule="evenodd" fill="#fff" d="M4.123 4.656h16.838v17.462H4.123z"/>
-  <g transform="translate(-94.205 -21.438)">
-    <g stroke-width="1.1">
-      <path d="m 106.8,21.988 c -6.572,0 -12.045,5.691 -12.045,11.865 0,2.777 1.564,6.309 2.693,8.747 l 9.307,17.871 9.262,-17.871 c 1.131,-2.438 2.738,-5.792 2.738,-8.747 0,-6.174 -5.38,-11.865 -11.96,-11.865 z m -1.18,20.069 c -0.521,0 -1.025,-0.215 -1.389,-0.604 -0.025,-0.027 -2.609,-2.793 -3.945,-3.996 -0.779,-0.703 -0.841,-1.904 -0.139,-2.684 0.703,-0.781 1.904,-0.842 2.684,-0.139 0.64,0.576 1.501,1.438 2.275,2.232 1.244,-2.398 3.327,-6 5.765,-8.545 0.726,-0.758 1.929,-0.783 2.687,-0.057 0.758,0.725 0.783,1.928 0.058,2.686 -3.412,3.562 -6.228,9.906 -6.255,9.971 -0.258,0.584 -0.792,1 -1.422,1.108 -0.11,0.018 -0.22,0.028 -0.32,0.028 z" fill-rule="evenodd" stroke="url(#B)" fill="url(#A)"/>
-      <path d="M106.79 23.093c-5.943 0-10.938 5.221-10.938 10.75 0 2.359 1.443 5.832 2.562 8.25.006.012.025.021.031.031l8.312 15.969 8.25-15.969c.006-.012.025-.02.031-.031 1.135-2.448 2.625-5.706 2.625-8.25.01-5.537-4.93-10.75-10.87-10.75zm5.45 3.543a3.01 3.01 0 0 0-2.166.926c-2.09 2.18-3.914 5.074-5.236 7.471-.502-.498-.928-.904-1.273-1.217-.553-.498-1.266-.771-2.009-.771a3 3 0 0 0-2.228.992c-1.107 1.227-1.01 3.129.219 4.236 1.288 1.16 3.85 3.901 3.874 3.926.569.609 1.368.957 2.196.957a3.08 3.08 0 0 0 .498-.041c1.002-.172 1.841-.824 2.248-1.75.029-.064 2.805-6.271 6.043-9.652a2.98 2.98 0 0 0 .834-2.141c-.018-.801-.346-1.547-.925-2.102a3.01 3.01 0 0 0-2.08-.834z" stroke-opacity=".122" stroke="#fff" fill="none"/>
-    </g>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.1" href="#c"/>
   </g>
+  <use stroke="url(#b)" stroke-width="4.9" href="#c"/>
+  <use stroke="#fff" stroke-width="2.7" href="#c"/>
 </svg>
diff --git a/app/assets/images/marker-note-new.svg b/app/assets/images/marker-note-new.svg
@@ -1,15 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="40.226" width="25.099">
-  <linearGradient id="A" x1="12.548" gradientUnits="userSpaceOnUse" y1="37.935" x2="12.548" y2=".371">
-    <stop stop-color="#286eb5" offset="0"/>
-    <stop stop-color="#4d9cd1" offset="1"/>
-  </linearGradient>
-  <linearGradient id="B" x1="12.55" gradientUnits="userSpaceOnUse" y1="19.423" x2="12.55" y2=".371">
-    <stop stop-color="#306d98" offset="0"/>
-    <stop stop-color="#3984b8" offset="1"/>
-  </linearGradient>
-  <g fill-rule="evenodd">
-    <path fill="#fff" d="M2.063 13.585L12.069 2.251l11.124 12.602-10.006 11.335z"/>
-    <path fill="url(#A)" d="M 12.594,0.55000001 C 6.022,0.55000001 0.55000001,6.241 0.55000001,12.415 c 0,2.777 1.56299999,6.309 2.69299999,8.747 l 9.307,17.871 9.262,-17.871 c 1.13,-2.438 2.737001,-5.792 2.737001,-8.747 C 24.539001,6.241 19.159,0.55000001 12.589,0.55000001 v 0 z M 14.644,11.411 V 6.595 c 0,-1.105 -0.895,-2 -2,-2 -1.104,0 -2.001,0.897 -2,2 V 11.41 H 5.829 c -1.104,-10e-4 -2,0.896 -2,2 0,1.104 0.895,2 2,2 h 4.815 v 4.815 c -10e-4,1.104 0.896,2 2,2 0.552,0 1.052,-0.224 1.414,-0.586 0.361,-0.361 0.586,-0.861 0.586,-1.414 V 15.41 h 4.815 c 0.551,0 1.052,-0.224 1.414,-0.586 0.361,-0.362 0.585,-0.862 0.586,-1.415 0.001,-1.104 -0.896,-2.001 -2,-2 -0.008,0.0044 -4.815,0.002 -4.815,0.002 z" stroke="url(#B)" stroke-width="1.1"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#4d9cd1"/>
+      <stop offset="1" stop-color="#266bb3"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#3984b9"/>
+      <stop offset="1" stop-color="#265475"/>
+    </linearGradient>
+    <path id="c" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M5.75 13.5h13.5m-6.75-6.75v13.5"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.3" href="#c"/>
   </g>
-  <path fill="none" stroke-opacity=".122" stroke="#fff" stroke-width="1.1" d="M12.584 1.655c-5.944 0-10.938 5.221-10.938 10.75 0 2.359 1.442 5.832 2.562 8.25.005.012.025.021.03.031l8.313 15.969 8.25-15.969c.005-.012.025-.02.03-.031 1.136-2.448 2.625-5.706 2.625-8.25.01-5.537-4.92-10.75-10.86-10.75h0zm-2.13 2.757a3.08 3.08 0 0 0-.908 2.194l.001 3.714-3.716-.001a3.08 3.08 0 0 0-2.192.908 3.07 3.07 0 0 0-.906 2.193 3.07 3.07 0 0 0 .906 2.191c.586.585 1.365.908 2.193.908l3.714-.001.001 3.716c-.001.826.321 1.605.907 2.191s1.365.908 2.191.907 1.606-.322 2.191-.907a3.08 3.08 0 0 0 .909-2.193l.001-3.713 3.714-.001a3.08 3.08 0 0 0 2.191-.908c.586-.586.909-1.365.908-2.192a3.07 3.07 0 0 0-.907-2.191 3.07 3.07 0 0 0-2.191-.907h-3.717l.002-3.715a3.08 3.08 0 0 0-.908-2.192c-.586-.585-1.364-.908-2.193-.908-.8-.002-1.58.321-2.17.907h0z"/>
+  <use stroke="url(#b)" stroke-width="5.1" href="#c"/>
+  <use stroke="#fff" stroke-width="2.9" href="#c"/>
 </svg>
diff --git a/app/assets/images/marker-note-open.svg b/app/assets/images/marker-note-open.svg
@@ -1,19 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="40.226" width="25.099">
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
   <defs>
-    <linearGradient id="A" x1="27.311" gradientUnits="userSpaceOnUse" y1="59.373" x2="27.311" y2="21.809">
-      <stop stop-color="#c72118" offset="0"/>
-      <stop stop-color="#d2534f" offset="1"/>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d25350"/>
+      <stop offset="1" stop-color="#c61e15"/>
     </linearGradient>
-    <linearGradient id="B" x1="27.31" gradientUnits="userSpaceOnUse" y1="40.861" x2="27.31" y2="21.809">
-      <stop stop-color="#983a38" offset="0"/>
-      <stop stop-color="#b83d3b" offset="1"/>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b93d3b"/>
+      <stop offset="1" stop-color="#753735"/>
     </linearGradient>
+    <path id="c" fill="none" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5 10 10m0-10-10 10"/>
   </defs>
-  <path d="M2.805 9.333l5.717-6.132 9.459.208 4.47 7.068-2.806 11.33-8.835.728-5.405-1.455-2.391-6.444z" fill="#fff"/>
-  <g transform="translate(-14.761 -21.438)">
-    <g stroke-width="1.1">
-      <path d="m 27.355,21.988 c -6.572,0 -12.044,5.691 -12.044,11.865 0,2.777 1.563,6.309 2.693,8.747 L 27.311,60.471 36.573,42.6 c 1.13,-2.438 2.737,-5.792 2.737,-8.747 10e-4,-6.174 -5.382,-11.865 -11.955,-11.865 z m 2.875,12.86 3.547,-3.547 c 0.781,-0.781 0.781,-2.047 0,-2.828 -0.782,-0.781 -2.049,-0.781 -2.829,0 l -3.547,3.547 -3.547,-3.547 c -0.779,-0.781 -2.047,-0.781 -2.828,0 -0.781,0.781 -0.781,2.047 0,2.828 l 3.547,3.547 -3.547,3.546 c -0.781,0.78 -0.781,2.048 0,2.828 0.391,0.391 0.902,0.586 1.414,0.586 0.512,0 1.024,-0.195 1.414,-0.586 l 3.547,-3.546 3.547,3.546 c 0.39,0.391 0.902,0.586 1.414,0.586 0.512,0 1.023,-0.195 1.415,-0.586 0.781,-0.78 0.781,-2.048 0,-2.828 z" fill-rule="evenodd" stroke="url(#B)" fill="url(#A)"/>
-      <path d="M27.343 23.093c-5.944 0-10.938 5.221-10.938 10.75 0 2.359 1.442 5.832 2.562 8.25.005.012.025.021.03.031l8.313 15.969 8.25-15.969c.005-.012.025-.02.03-.031 1.136-2.448 2.625-5.706 2.625-8.25.002-5.537-4.929-10.75-10.872-10.75zm5.02 3.706a3.08 3.08 0 0 0-2.193.909l-2.768 2.769-2.769-2.77a3.08 3.08 0 0 0-2.192-.908c-.828 0-1.607.323-2.191.909s-.908 1.363-.908 2.191a3.08 3.08 0 0 0 .908 2.192l2.769 2.768-2.769 2.77c-.586.584-.908 1.363-.908 2.191s.322 1.607.908 2.191 1.363.908 2.191.908a3.08 3.08 0 0 0 2.193-.908l2.768-2.767 2.769 2.767c.585.586 1.363.908 2.192.908s1.607-.322 2.191-.908a3.07 3.07 0 0 0 .908-2.191c0-.828-.322-1.607-.908-2.191l-2.769-2.77 2.769-2.768a3.08 3.08 0 0 0 0-4.384 3.08 3.08 0 0 0-2.191-.908z" stroke-opacity=".122" stroke="#fff" fill="none"/>
-    </g>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.3" href="#c"/>
   </g>
+  <use stroke="url(#b)" stroke-width="5.1" href="#c"/>
+  <use stroke="#fff" stroke-width="2.9" href="#c"/>
 </svg>
diff --git a/app/assets/images/marker-red.png b/app/assets/images/marker-red.png
diff --git a/app/assets/images/marker-red.svg b/app/assets/images/marker-red.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d25350"/>
+      <stop offset="1" stop-color="#c61e15"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b93d3b"/>
+      <stop offset="1" stop-color="#753735"/>
+    </linearGradient>
+    <path id="c" stroke-linecap="round" stroke-linejoin="round" d="M10 12a1 1 0 0 1 5 1 1 1 0 0 1-5-1"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.3" href="#c"/>
+  </g>
+  <use stroke="url(#b)" stroke-width="5.1" href="#c"/>
+  <use fill="#fff" stroke="#fff" stroke-width="2.9" href="#c"/>
+</svg>
diff --git a/app/assets/images/marker-to.svg b/app/assets/images/marker-to.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="40" stroke-width="1.1">
+  <defs>
+    <linearGradient id="a" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d25350"/>
+      <stop offset="1" stop-color="#c61e15"/>
+    </linearGradient>
+    <linearGradient id="b" x1="12.5" x2="12.5" y1="0" y2="40" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b93d3b"/>
+      <stop offset="1" stop-color="#753735"/>
+    </linearGradient>
+    <path id="c" stroke-linecap="round" stroke-linejoin="round" d="M10 21 7 9c5-3 6 2 11 0l1 4c-5 2-6-3-11 0"/>
+  </defs>
+  <path fill="url(#a)" stroke="url(#b)" d="M12.5 38.79 1.8559 17.9318a11.95 11.95 0 1121.2883 0z"/>
+  <g fill="none" stroke="#fff" opacity=".122">
+    <path d="M12.5 36.37 2.8356 17.4318a10.85 10.85 0 1119.3287 0z"/>
+    <use stroke-width="7.3" href="#c"/>
+  </g>
+  <use stroke="url(#b)" stroke-width="5.1" href="#c"/>
+  <use fill="#fff" stroke="#fff" stroke-width="2.9" href="#c"/>
+</svg>
diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb
@@ -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);
   }
 
diff --git a/app/assets/javascripts/index/directions-endpoint.js b/app/assets/javascripts/index/directions-endpoint.js
@@ -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]
diff --git 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']"), OSM.MARKER_FROM, endpointDragCallback, endpointChangeCallback),
+    OSM.DirectionsEndpoint(map, $("input[name='route_to']"), OSM.MARKER_TO, endpointDragCallback, endpointChangeCallback)
   ];
 
   let downloadURL = null;
diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js
@@ -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]
diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
@@ -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;
diff --git 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 => 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 %>
diff --git 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 => 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 } %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
