feat(maps_utils): improved marker + marker shadow, fix scrolling on mobile devices

maps_utils/static/maps_utils/geo-feature-collection.css

@@ -116,5 +116,4 @@
 
 .geo-feature-collection-tooltip:before {
     display: none;
-
 }

maps_utils/static/maps_utils/geo-feature-collection.js

@@ -11,8 +11,11 @@ const buildMarkerIcon = (color, number) => {
 
     return new L.Icon({
         iconUrl,
-        iconSize: [40, 64],
-        iconAnchor: [20, 64],
+        shadowUrl: `/maps/marker-shadow/`,
+        iconSize: [44, 64],
+        iconAnchor: [22, 64],
+        shadowSize:   [48, 68],
+        shadowAnchor: [22, 68],
     });
 };
 
@@ -104,6 +107,8 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
         },
     },
     data: function () {
+        const tileOpts = tileStyles[this.tileStyle](this.apiKeys);
+
         return {
             // Future map reference
             map: null,
@@ -113,7 +118,15 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
             categories: [],
             zoom: this.initialZoom,
             currentItem: null,
-            ...tileStyles[this.tileStyle](this.apiKeys),
+            mapOptions: {
+                dragging: !L.Browser.mobile,
+                tap: !L.Browser.mobile,
+                maxNativeZoom: tileOpts.maxNativeZoom,
+                zoomSnap: 0.5,
+                zoomControl: this.displayZoomControl,
+
+            },
+            ...tileOpts,
         };
     },
     computed: {
@@ -270,7 +283,7 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                     .bindTooltip(feature.properties.title, {
                         className: "geo-feature-collection-tooltip",
                         direction: "top",
-                        offset: [0, -62],
+                        offset: [0, -64],
                     });
 
                 // Add item marker to the cluster.
@@ -500,7 +513,7 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                     :style="{height: height}"
                     :zoom="zoom"
                     :maxZoom="maxZoom"
-                    :options="{maxNativeZoom: maxNativeZoom, zoomSnap: 0.5, zoomControl: displayZoomControl}"
+                    :options="mapOptions"
                 >
                     <l-tile-layer
                         :url="url"

maps_utils/static/marker-numbered.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 40 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,0.830095,-0.855097)">
-        <g transform="matrix(1.6,0,0,1.70554,-26.0301,-28.3709)">
-            <circle cx="28.25" cy="27.25" r="8.75" style="fill:#FFFFFF;"/>
-            <text text-anchor="middle" dominant-baseline="central" x="28.25" y="27.25" style="font-family:'Roboto-Bold', 'Roboto';font-weight:700;font-size:10px;">16</text>
-        </g>
-        <g transform="matrix(1,0,0,1,-0.830095,0.855097)">
-            <path d="M20,64L18,60L22,60L20,64ZM18,34.385C9.421,33.393 2.75,26.095 2.75,17.25C2.75,7.729 10.479,0 20,0C29.521,0 37.25,7.729 37.25,17.25C37.25,26.095 30.579,33.393 22,34.385L22,60L18,60L18,34.385ZM20,3.536C27.569,3.536 33.714,9.681 33.714,17.25C33.714,24.819 27.569,30.964 20,30.964C12.431,30.964 6.286,24.819 6.286,17.25C6.286,9.681 12.431,3.536 20,3.536Z" style="fill:#$FILLCOLOR$;"/>
-        </g>
+<svg width="100%" height="100%" viewBox="0 0 44 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.305521,0,0,0.305521,-2.51011,-3.06191)">
+        <path d="M80.2,219.5C78,216.4 75.8,213.5 73.8,210.6C54.9,183.8 37.4,156 23,126.2C18.3,116.5 14.2,106.5 11.4,95.9C8.1,83.3 8.7,70.9 13.1,58.8C22,34.2 38.9,18.4 63.3,12.2C101.1,2.6 138,25.7 148.6,62.5C153.4,79.3 151.1,95.3 144.4,110.9C133.1,137.4 118.9,162.1 103.3,186C96.5,196.4 89.3,206.5 82.2,216.7C81.7,217.6 81,218.4 80.2,219.5ZM80.4,36.9C56.7,36.9 37.5,56.8 37.5,81.3C37.5,105.7 56.7,125.7 80.1,125.8C103.8,125.8 123.1,106 123.1,81.4C123.1,57 104,37 80.4,36.9Z" style="fill:#ddd;"/>
+    </g>
+    <g transform="matrix(0.965517,0,0,0.933333,-10.3448,-8.82194)">
+        <circle cx="33.5" cy="33" r="14.5" style="fill:#FFFFFF; stroke: #000; stroke-width: 2px;"/>
+        <text text-anchor="middle" dominant-baseline="central" x="33.5" y="33" style="font-family:'Roboto-Bold', 'Roboto', 'Helvetica';font-weight:700;font-size:18px;">16</text>
     </g>
 </svg>

maps_utils/static/marker.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 40 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,0.830095,-0.855097)">
-        <g transform="matrix(1.4663,0,0,1.56302,-22.253,-24.4872)">
-            <ellipse cx="28.25" cy="27.25" rx="8.75" ry="8.25" style="fill:rgb(242,242,242);"/>
-        </g>
-        <g transform="matrix(1,0,0,1,-0.830095,0.855097)">
-            <path d="M20,64L18,60L22,60L20,64ZM18,34.385C9.421,33.393 2.75,26.095 2.75,17.25C2.75,7.729 10.479,0 20,0C29.521,0 37.25,7.729 37.25,17.25C37.25,26.095 30.579,33.393 22,34.385L22,60L18,60L18,34.385ZM20,3.536C27.569,3.536 33.714,9.681 33.714,17.25C33.714,24.819 27.569,30.964 20,30.964C12.431,30.964 6.286,24.819 6.286,17.25C6.286,9.681 12.431,3.536 20,3.536Z" style="fill:rgb(255,31,110);"/>
-        </g>
-        <g id="g4674" transform="matrix(0.631511,0,0,0.629547,3.63473,-0.246209)">
-            <path id="path4657" d="M24.7,7.2C18.8,7.2 13.3,9.5 9.2,13.6C5,17.7 2.7,23.3 2.7,29.1C2.7,35 5,40.5 9.1,44.7C13.3,48.8 18.8,51.1 24.6,51.1C30.5,51.1 36,48.8 40.1,44.7C44.3,40.6 46.5,35 46.5,29.2C46.5,23.3 44.2,17.8 40.1,13.7C36.1,9.4 30.6,7.2 24.7,7.2M24.7,49C13.7,49 4.8,40.1 4.8,29.1C4.8,18.1 13.7,9.2 24.7,9.2C35.7,9.2 44.6,18.1 44.6,29.1C44.6,40.1 35.7,49 24.7,49" style="fill-rule:nonzero;"/>
-            <path id="path4659" d="M18.1,16.1L18.1,13L16.2,13L16.2,16.6C14.9,17 14.1,17.4 14.3,17.7C14.7,17.6 15.4,17.5 16.2,17.6L16.2,36C14.2,39.8 17.1,45.7 17.1,45.7C17.1,45.7 15,39.4 19.7,36.4C24,33.7 39,34.9 38.9,26.5C38.8,14.6 25,14.6 18.1,16.1M24.2,27.7C23.5,30.9 20.1,32.5 18,33.9L18,17.8C21.5,18.6 25.6,21.3 24.2,27.7" style="fill-rule:nonzero;"/>
+<svg width="100%" height="100%" viewBox="0 0 44 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.965517,0,0,0.933333,-10.3448,-8.82194)">
+        <ellipse cx="33.5" cy="33" rx="14.5" ry="15" style="fill:white;"/>
+    </g>
+    <g transform="matrix(0.305521,0,0,0.305521,-2.51011,-3.06191)">
+        <path d="M80.2,219.5C78,216.4 75.8,213.5 73.8,210.6C54.9,183.8 37.4,156 23,126.2C18.3,116.5 14.2,106.5 11.4,95.9C8.1,83.3 8.7,70.9 13.1,58.8C22,34.2 38.9,18.4 63.3,12.2C101.1,2.6 138,25.7 148.6,62.5C153.4,79.3 151.1,95.3 144.4,110.9C133.1,137.4 118.9,162.1 103.3,186C96.5,196.4 89.3,206.5 82.2,216.7C81.7,217.6 81,218.4 80.2,219.5ZM80.4,36.9C56.7,36.9 37.5,56.8 37.5,81.3C37.5,105.7 56.7,125.7 80.1,125.8C103.8,125.8 123.1,106 123.1,81.4C123.1,57 104,37 80.4,36.9Z" style="fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(0.636364,0,0,0.636364,6.28182,3.41818)">
+        <g transform="matrix(1.00457,0,0,1.00228,-0.0123288,-0.0164009)">
+            <path d="M24.7,7.2C18.8,7.2 13.3,9.5 9.2,13.6C5,17.7 2.7,23.3 2.7,29.1C2.7,35 5,40.5 9.1,44.7C13.3,48.8 18.8,51.1 24.6,51.1C30.5,51.1 36,48.8 40.1,44.7C44.3,40.6 46.5,35 46.5,29.2C46.5,23.3 44.2,17.8 40.1,13.7C36.1,9.4 30.6,7.2 24.7,7.2M24.7,49C13.7,49 4.8,40.1 4.8,29.1C4.8,18.1 13.7,9.2 24.7,9.2C35.7,9.2 44.6,18.1 44.6,29.1C44.6,40.1 35.7,49 24.7,49" style="fill-rule:nonzero;"/>
         </g>
+        <path d="M18.1,16.1L18.1,13L16.2,13L16.2,16.6C14.9,17 14.1,17.4 14.3,17.7C14.7,17.6 15.4,17.5 16.2,17.6L16.2,36C14.2,39.8 17.1,45.7 17.1,45.7C17.1,45.7 15,39.4 19.7,36.4C24,33.7 39,34.9 38.9,26.5C38.8,14.6 25,14.6 18.1,16.1M24.2,27.7C23.5,30.9 20.1,32.5 18,33.9L18,17.8C21.5,18.6 25.6,21.3 24.2,27.7" style="fill-rule:nonzero;"/>
     </g>
 </svg>

maps_utils/templates/maps_utils/marker-numbered.svg.template

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 40 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,0.830095,-0.855097)">
-        <g transform="matrix(1.6,0,0,1.70554,-26.0301,-28.3709)">
-            <circle cx="28.25" cy="27.25" r="8.75" style="fill:#FFFFFF;"/>
-            <text text-anchor="middle" dominant-baseline="central" x="28.25" y="27.25" style="font-family:'Roboto-Bold', 'Roboto';font-weight:700;font-size:10px;">$FILLNUMBER$</text>
-        </g>
-        <g transform="matrix(1,0,0,1,-0.830095,0.855097)">
-            <path d="M20,64L18,60L22,60L20,64ZM18,34.385C9.421,33.393 2.75,26.095 2.75,17.25C2.75,7.729 10.479,0 20,0C29.521,0 37.25,7.729 37.25,17.25C37.25,26.095 30.579,33.393 22,34.385L22,60L18,60L18,34.385ZM20,3.536C27.569,3.536 33.714,9.681 33.714,17.25C33.714,24.819 27.569,30.964 20,30.964C12.431,30.964 6.286,24.819 6.286,17.25C6.286,9.681 12.431,3.536 20,3.536Z" style="fill:#$FILLCOLOR$;"/>
-        </g>
+<svg width="100%" height="100%" viewBox="0 0 44 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.305521,0,0,0.305521,-2.51011,-3.06191)">
+        <path d="M80.2,219.5C78,216.4 75.8,213.5 73.8,210.6C54.9,183.8 37.4,156 23,126.2C18.3,116.5 14.2,106.5 11.4,95.9C8.1,83.3 8.7,70.9 13.1,58.8C22,34.2 38.9,18.4 63.3,12.2C101.1,2.6 138,25.7 148.6,62.5C153.4,79.3 151.1,95.3 144.4,110.9C133.1,137.4 118.9,162.1 103.3,186C96.5,196.4 89.3,206.5 82.2,216.7C81.7,217.6 81,218.4 80.2,219.5ZM80.4,36.9C56.7,36.9 37.5,56.8 37.5,81.3C37.5,105.7 56.7,125.7 80.1,125.8C103.8,125.8 123.1,106 123.1,81.4C123.1,57 104,37 80.4,36.9Z" style="fill:#$FILLCOLOR$;"/>
+    </g>
+    <g transform="matrix(0.965517,0,0,0.933333,-10.3448,-8.82194)">
+        <circle cx="33.5" cy="33" r="14.5" style="fill:#FFFFFF; stroke: #000; stroke-width: 2px;"/>
+        <text text-anchor="middle" dominant-baseline="central" x="33.5" y="33" style="font-family:'Roboto-Bold', 'Roboto', 'Helvetica';font-weight:700;font-size:18px;">$FILLNUMBER$</text>
     </g>
 </svg>

maps_utils/templates/maps_utils/marker-shadow.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 96 136" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(2,0,0,2,0,0)">
+        <g transform="matrix(0.5,-0,-0,0.5,0,0)">
+            <use xlink:href="#_Image1" x="0" y="0" width="96px" height="136px"/>
+        </g>
+    </g>
+    <defs>
+        <image id="_Image1" width="96px" height="136px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAACICAYAAAAYj+7XAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAK0klEQVR4nO2daZPbxhGGHy65K8WREktyFDt2LCm2pfIZx/n//yOxK1Wp3HJkr6KSvDp2l/nQ6GWjMQOC4AwAkvNWTYHEcnn08U5Pd2MwYzqYbfDc/81iGXm87m+joO2HDP35s5ajP9cFS1ZCXgbO+fOjYAwFxITux7rz9uiF6gUeG7QcB8GQCohZ9gw4qs4dVcP/LaQI/91jQr+MHP1jAo+zYzHAZ7RZsxX4UcuIKcJCBXZpjlbofly4v4W8AzIrIqcCYoK3gp27x/PIeauAI/feCmu5KtALmkK/cI/9a7wy/PsnRQ4FxChGjyrcBSuh28d2eGV4L7AIUY8XvI5zd9TH+trBFJF6DrCC8dTihb0Ajt3zBXVleAXEPCDE/1b4erSC1/HGPQ95hvUq+3lbI5UCQlZvBegFfGyOx+b5Avnhr6rxkxmvqvc5DryHHm8Bt6vXxTwgJPw3ZtjzIUWEvKI3UijAW71aqLfsE+oCV8E9B54CL4Az5Idv+33uAL8GfgW8XZ3zSngTGK9pKsN6RnJv2FYBfoL1/K6CPjHHOSLs/wGnyA/LiTmiiHeB+9Vz6wFeAa8Rb7MKsYpI6g3bKCAU2VhuV4HrWAJPqjHWynMBPKzGCU0lqPDtUYdVhHrS1kqY9/whXvhW8NeQH3cd+Fn1RR8D/0C4fExcAv8FvkME+g7yHX0UFlqDQIaFax8FeMGr8NXSVfBL4F/A94g1TQlL4Afgz8i8cxt4i7giYvmoZeDcRthUASHKsVRzvTqeAv9GrGzqOAW+RX7XbxAlxFbjsYxsb0rdRAFtfH+CWP1rxOpf9P1CI+L7avwWMSS7Cvc5q2ToqoBQpKMT7bVq/Ii49WXkPXYBL4C/sFpPrPMCRVYPCE24VvhzxHLGnmBT4QL4K0Kf77OipFgicKv1wDoFxKId5XyQCGcXuH5TPAH+CXzAipK6psH936LoqoBQqPkGCekmUdrLhDPEG+4jc1xICT4Nruc6yaVNAX7StcK/QPj+EHAO/B34CPntmxSE1iKmAE89NtrRGPqQ8AZZSH6MyGFdKjxW9mxgnQI89cwQ4e8z7cTwClnbfEK9jhISeudkXUgBMeEvkFDzEIWvOEMivo9oys4XgTrRUFcFnCDZy21TxZvCKv+I1URn09kzhl17PEdWz7+rvpPn/lARJ+oNXgGhPM8J4n5nCX9EDLrQs5GFLYqw5vyCYTz0WfVZ7xFWQKzY30BIAT7Pox+YE0nyKtSVYa0zBx4jVHSdpvB9oT+atrYKiHH/M/9PCZE8vWuwdaayw/s/RWoLsWaAGBVdwSvACn/BqhiRGjkFP+RnPgd+gZRA25oBonSkCggtuubVBxS04z/AI0RmsQYw7xFXsAqwwl8ALxk+6tlFXCAByv3quZ0HfItLYy6w+W4b+czYn+zmEPgRKfrfpL0hrOEFvuCg1n/Gbuf1x8BT4FNW84AXfmguqBWblYKW7Gd6OTeeIAs033Bmu/+0mHWVzPMdAHNE+Ll7dfYVR0hJM9aR5+eDoAfkCDsPBd8hgvU5NNvzasubtRMaRhX66Y9LpBXyFvGe1Npc4GudL4f/znuHP9FsSPaPr+RuKUhn74Lt8BjJHIe6wv2cW2u9KxNvOnxLfV0Vut7hygOUfsqqNx3+RrOBLRSGXikAigJS4hnCKKEwv9bopXNAoZ/0OKVJQ40uO31QJt/0OKWZZa6tASgKyIofWAnfKqHWV6QUVBSQHqoAq4TGKB6QD6fVMXQpV80DDrnPJyfOqVcUQxd3zIoC8uKcZi9p7VgUkBdrGwGSX3JTUMPafqeigPyIXbSxpEpHFwyDYHdcUUB+xPpEiwcMhNgWabWacEEe6BVFsT7RKw8oikiPGzTbFe0+dVApYElRQA7cIdwraj2BooB8CHVGNK4ZKCvhfLhFuD2x1qibbR+cAn5Je4PuVV+Qzsh9N28qaOIaq82qYm2JV2GoPinzQDrcodkNF1SCCn1JoaGUuEdzi8zglTLWA6DQUArMkW1uzgOjcaWM9YBCQ2nwAatGt9DuvPba5loYWmgoDe4R3o03dJ0Y3gOg0NA2OAbuEldAlIKg0FAKfMjqEi+rhNiuuzUP0GOhof5Q+jknvNtu44r5kAdAoaE+0J0WQ3tOR6+W93SjWbqigM3xKeENwUP0c4WYB2TZpHSP8XNk65rQNvixzb6BsJDVC4a4wc++4BGrCxy98NX6g9vVxBSgk3GZkNfjBNknos36g/QD4TnAFpCLF6yH7hcUuwNH685ZMZ63XlAQxxzZNcvefUNH8Mp4jzYK0n8oXhDHA1a3RPHhp9/TLrhjVlukU0LS9XhI3frbJt8g1lFQqZbFofcZiCkgmHzzWBfrFy+I4xHrrb+3B0CZC9pwF9msr23yXWv90G21W7ygiS9oCn9j64duFGRH8QK50c/bJLB+6J7vKV6wglq/vdFbL+uH7hRUvEDwIZJ4s7c89LF/Z+uHzTKeh+4FM+AzEnG/YhMKOnQveMDqXmnW8ntxv2LTnL96waHVCo6Qgkts4u1l/frGXeE1e9zy2n2D3jsmdofVXtYP/SxZveBQ6gV6C9y2iddXvDqjDwUdWo7oIfI7PfVsxf2KvlxuFbDPXnCM5Ptj1h9tN+mKvhR0KFWzzxAD83fY3pr7FdtEM7aTbh+joptI6Olvcx5LOffCthS0z17wNSJkL3zl/tZab1ek8IB9TFe/h1zlooK39GO5v7fgFdtSh3rAPqUoZsBXNKnHcn8S64c0CrBjHxZnD5FSo7f+tV1ufZBq8rQpil0OS68jpUZPO2213q2QQgF+Qt5lL/gS+R0x7t867PRIGT7aZq5dnA9uIxfXvaJ94k1m/ZCWgqwX7KICfs8qzMyy6AohhwdoJ9guhaX3kC6HkPXbyCep8CH9CtYqYVcm5AWScmgTfnLqUeRSwC5Vzr5EKDPG/cEbsKVCrhzOruSJbiOF9lc0FZDd+iGPcHYlTzQDvqEecmYPOz1yWufUJ+RH1Ivsg1q+IjcF2bB0ShPyDVZlxjbrT5ZyiCG3B0x1hfwHRMgvqzGK8GGYCdKukKdARfeQi6q7ppqzCR/yC0S/vM4Fc1Y/bgycAJ8jQlfL37q9cBsM6QFToKKvEE9sy/cMJnwYNkYfO1l3F2kt7xLzb1Xn3QRDcbKnogXD3jxujiTblHpiE++g1g/jeMAY1bMvEP4PWf/gE6/FGGkCm6wb4vPvIukGtXpr/aNRj2JoBQydpjhGYn4NOSdDPYqxEmVqbZCXir5G+P+lGVnaS/piLArSY04qeh94lybn2+62rKnmLhjLA3KvDa4hMb+PekLCH4V6FGPn6q31nSR832+qYyzmHyTT2QVjKsBTUaoF2n2krTAU88eintGUMLYHhKKibdLWb7Gq705qwRXD2ApQWGvcZj74Y/U+sQXXZCxfMQUFpKKij1m1lljrz9ZWmAJTyM9DOFe0yar0JvAJzYjHtpcMVmTZBFPwAIs+oekMaS15DZzRXHBNVvgwLQVYKtqkgvYACWGt8EO8Pznhw3QoSLFpBe0Gkmz7iXC+Z9LWD9NuotVwNFY7mCHWD+HuhlHTzF0xVQXY+67rPtaX7jV3kJSD3S4yFPVMVvgwPQpShKjIKuGEFe/r62J3LZq0AqbULBWCWr92Wr+ujjepr5o1cvJ3rdPzkxQ+7IYCoN7qPkOs324WohbuV7p219pJ4v8Bu3APDGoqGgAAAABJRU5ErkJggg=="/>
+    </defs>
+</svg>

maps_utils/templates/maps_utils/marker.svg.template

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 40 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,0.830095,-0.855097)">
-        <g transform="matrix(1.4663,0,0,1.56302,-22.253,-24.4872)">
-            <ellipse cx="28.25" cy="27.25" rx="8.75" ry="8.25" style="fill:#FFFFFF;"/>
-        </g>
-        <g transform="matrix(1,0,0,1,-0.830095,0.855097)">
-            <path d="M20,64L18,60L22,60L20,64ZM18,34.385C9.421,33.393 2.75,26.095 2.75,17.25C2.75,7.729 10.479,0 20,0C29.521,0 37.25,7.729 37.25,17.25C37.25,26.095 30.579,33.393 22,34.385L22,60L18,60L18,34.385ZM20,3.536C27.569,3.536 33.714,9.681 33.714,17.25C33.714,24.819 27.569,30.964 20,30.964C12.431,30.964 6.286,24.819 6.286,17.25C6.286,9.681 12.431,3.536 20,3.536Z" style="fill:#$FILLCOLOR$;"/>
-        </g>
-        <g id="g4674" transform="matrix(0.631511,0,0,0.629547,3.63473,-0.246209)">
-            <path id="path4657" d="M24.7,7.2C18.8,7.2 13.3,9.5 9.2,13.6C5,17.7 2.7,23.3 2.7,29.1C2.7,35 5,40.5 9.1,44.7C13.3,48.8 18.8,51.1 24.6,51.1C30.5,51.1 36,48.8 40.1,44.7C44.3,40.6 46.5,35 46.5,29.2C46.5,23.3 44.2,17.8 40.1,13.7C36.1,9.4 30.6,7.2 24.7,7.2M24.7,49C13.7,49 4.8,40.1 4.8,29.1C4.8,18.1 13.7,9.2 24.7,9.2C35.7,9.2 44.6,18.1 44.6,29.1C44.6,40.1 35.7,49 24.7,49" style="fill-rule:nonzero;"/>
-            <path id="path4659" d="M18.1,16.1L18.1,13L16.2,13L16.2,16.6C14.9,17 14.1,17.4 14.3,17.7C14.7,17.6 15.4,17.5 16.2,17.6L16.2,36C14.2,39.8 17.1,45.7 17.1,45.7C17.1,45.7 15,39.4 19.7,36.4C24,33.7 39,34.9 38.9,26.5C38.8,14.6 25,14.6 18.1,16.1M24.2,27.7C23.5,30.9 20.1,32.5 18,33.9L18,17.8C21.5,18.6 25.6,21.3 24.2,27.7" style="fill-rule:nonzero;"/>
+<svg width="100%" height="100%" viewBox="0 0 44 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.965517,0,0,0.933333,-10.3448,-8.82194)">
+        <circle cx="33.5" cy="33.5" r="15" style="fill:white;"/>
+    </g>
+    <g transform="matrix(0.305521,0,0,0.305521,-2.51011,-3.06191)">
+        <path d="M80.2,219.5C78,216.4 75.8,213.5 73.8,210.6C54.9,183.8 37.4,156 23,126.2C18.3,116.5 14.2,106.5 11.4,95.9C8.1,83.3 8.7,70.9 13.1,58.8C22,34.2 38.9,18.4 63.3,12.2C101.1,2.6 138,25.7 148.6,62.5C153.4,79.3 151.1,95.3 144.4,110.9C133.1,137.4 118.9,162.1 103.3,186C96.5,196.4 89.3,206.5 82.2,216.7C81.7,217.6 81,218.4 80.2,219.5ZM80.4,36.9C56.7,36.9 37.5,56.8 37.5,81.3C37.5,105.7 56.7,125.7 80.1,125.8C103.8,125.8 123.1,106 123.1,81.4C123.1,57 104,37 80.4,36.9Z" style="fill:#$FILLCOLOR$;"/>
+    </g>
+    <g transform="matrix(0.636364,0,0,0.636364,6.28182,3.41818)">
+        <g transform="matrix(1.00457,0,0,1.00228,-0.0123288,-0.0164009)">
+            <path d="M24.7,7.2C18.8,7.2 13.3,9.5 9.2,13.6C5,17.7 2.7,23.3 2.7,29.1C2.7,35 5,40.5 9.1,44.7C13.3,48.8 18.8,51.1 24.6,51.1C30.5,51.1 36,48.8 40.1,44.7C44.3,40.6 46.5,35 46.5,29.2C46.5,23.3 44.2,17.8 40.1,13.7C36.1,9.4 30.6,7.2 24.7,7.2M24.7,49C13.7,49 4.8,40.1 4.8,29.1C4.8,18.1 13.7,9.2 24.7,9.2C35.7,9.2 44.6,18.1 44.6,29.1C44.6,40.1 35.7,49 24.7,49" style="fill-rule:nonzero;"/>
         </g>
+        <path d="M18.1,16.1L18.1,13L16.2,13L16.2,16.6C14.9,17 14.1,17.4 14.3,17.7C14.7,17.6 15.4,17.5 16.2,17.6L16.2,36C14.2,39.8 17.1,45.7 17.1,45.7C17.1,45.7 15,39.4 19.7,36.4C24,33.7 39,34.9 38.9,26.5C38.8,14.6 25,14.6 18.1,16.1M24.2,27.7C23.5,30.9 20.1,32.5 18,33.9L18,17.8C21.5,18.6 25.6,21.3 24.2,27.7" style="fill-rule:nonzero;"/>
     </g>
 </svg>

maps_utils/urls.py

 from django.urls import re_path
 
-from .views import serve_colored_marker
+from .views import serve_colored_marker, serve_marker_shadow
 
 urlpatterns = [
     re_path(
@@ -8,4 +8,9 @@ urlpatterns = [
         serve_colored_marker,
         name="maps_utils_serve_colored_marker",
     ),
+    re_path(
+        r"^marker-shadow/$",
+        serve_marker_shadow,
+        name="maps_utils_serve_marker_shadow",
+    ),
 ]

maps_utils/views.py

@@ -28,3 +28,10 @@ def serve_colored_marker(request, color: str, number: Optional[int] = None):
         value,
         content_type="image/svg+xml",
     )
+
+
+def serve_marker_shadow(request):
+    return HttpResponse(
+        get_marker_template("marker-shadow.svg"),
+        content_type="image/svg+xml",
+    )