Use a SVG marker icon. Allows for custom marker color

Author: sylvainjule

README.md

@@ -254,7 +254,7 @@ mymap:
 
 #### 5.9. `marker`
 
-The color of the marker used, either `dark` or `light` (in case you are using `mapbox.dark` as your tile-layer). Default is `dark`.
+The color of the marker used, either `dark`, `light` or your own HEX value. Default is `dark`.
 
 ```yaml
 mymap:

assets/images/marker-icon-dark.png

@@ -53,9 +53,8 @@
             },
 		),
 		'computed' => array(
-			'markerUrl' => function() {
-				$tint = in_array($this->marker, ['light', 'dark']) ? $this->marker : option('sylvainjule.locator.marker');
-				return kirby()->url('media') . '/plugins/sylvainjule/locator/images/marker-icon-'. $tint .'.png';
+			'markerColor' => function() {
+				return $this->marker ?? option('sylvainjule.locator.marker');
 			},
 			'mapbox' => function() {
                 $idSwap = [

assets/images/marker-icon-light.png

@@ -71,7 +71,6 @@ export default {
         }
     },
     props: {
-        markerUrl:    String,
         tiles:        String,
         center:       Object,
         zoom:         Object,
@@ -81,11 +80,11 @@ export default {
         display:      [Array, Boolean],
         geocoding:    String,
         liststyle:    String,
-        liststyle:    String,
         draggable:    Boolean,
         autocomplete: Boolean,
         language:     [String, Boolean],
         dblclick:     String,
+        markerColor:  String,
 
         // general options
         label:     String,
@@ -102,10 +101,17 @@ export default {
             return 'map-'+ this._uid
         },
         icon() {
+            let color = this.markerColor
+                color = color == 'light' ? '#efefef' : color
+                color = color == 'dark'  ? '#161719' : color
+
+            let icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 142"><path fill="'+ color +'" d="M60,0A59.68,59.68,0,0,0,27.37,9.62c-.31.19-.61.39-.92.6A55.74,55.74,0,0,0,7.57,30.71,59.75,59.75,0,0,0,2.63,77.35q.45,1.53,1,3a83.85,83.85,0,0,0,20.53,32.08c9.72,9.51,20.75,17.68,31.2,26.45l3.7,3.09h2c4.7-3.67,9.69-7,14-11.1,9.2-8.69,18.47-17.37,26.92-26.77.49-.54,1-1.09,1.44-1.64l.3-.36c.43-.54.86-1.06,1.28-1.6s.9-1.16,1.34-1.76,1-1.31,1.4-2,.8-1.21,1.19-1.82c.06-.09.12-.18.17-.27.36-.56.72-1.14,1.06-1.72l.08-.13c.29-.5.58-1,.86-1.51.46-.82.91-1.64,1.34-2.48a58.77,58.77,0,0,0,5.35-13s0,0,0,0A59.85,59.85,0,0,0,60,0Zm0,37.55a22.23,22.23,0,1,1-22.2,22.33A22.15,22.15,0,0,1,60,37.55Z"/></svg>'
+            let iconUrl = 'data:image/svg+xml;base64,' + btoa(icon);
+
             return L.icon({
-                iconUrl: this.markerUrl,
+                iconUrl: iconUrl,
                 iconSize: [40, 47],
-                iconAnchor: [20, 47],
+                iconAnchor: [20, 47]
             })
         },
         valueExists() {