feat(places): re-use glyphs icons from google maps, but for Leaflet

assets/controllers/places_controller.js

@@ -0,0 +1,44 @@
+import {Controller} from "@hotwired/stimulus";
+
+export default class extends Controller
+{
+    connect() {
+        this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
+    }
+
+    disconnect() {
+        this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);
+    }
+
+    _onMarkerBeforeCreate(event) {
+        const { L, definition } = event.detail;
+
+        definition.rawOptions = {
+            icon: L.divIcon({
+                html: `
+<div class="relative">
+    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linecap="round" clip-rule="evenodd" viewBox="0 0 500 820">
+        <defs>
+            <linearGradient id="__sf_ux_map_gradient_marker_fill" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -37.57 37.57 0 416.45 541)" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stop-color="#126FC6" />
+                <stop offset="1" stop-color="#4C9CD1" />
+            </linearGradient>
+            <linearGradient id="__sf_ux_map_gradient_marker_border" x1="0" x2="1" y1="0" y2="0" gradientTransform="matrix(0 -19.05 19.05 0 414.48 522.49)" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stop-color="#2E6C97" />
+                <stop offset="1" stop-color="#3883B7" />
+            </linearGradient>
+        </defs>
+        <path fill="url(#__sf_ux_map_gradient_marker_fill)" stroke="url(#__sf_ux_map_gradient_marker_border)" stroke-width="1.1" d="M416.54 503.61c-6.57 0-12.04 5.7-12.04 11.87 0 2.78 1.56 6.3 2.7 8.74l9.3 17.88 9.26-17.88c1.13-2.43 2.74-5.79 2.74-8.74 0-6.18-5.38-11.87-11.96-11.87Zm0" transform="translate(-7889.1 -9807.44) scale(19.54)" />
+    </svg>
+
+    <img src="${definition.extra['icon_mask_uri']}" alt="" class="absolute" style="width: 12px; top: 8px; transform: translate3d(50%, 0, 0); filter: invert(1)" />
+</div>
+`,
+                iconSize: [25, 41],
+                iconAnchor: [12.5, 41],
+                popupAnchor: [0, -41],
+                className: '',
+            })
+        }
+    }
+}

composer.json

@@ -44,8 +44,8 @@
         "symfony/stimulus-bundle": "^2.16",
         "symfony/twig-bundle": "7.1.*",
         "symfony/ux-icons": "^2.19",
-        "symfony/ux-leaflet-map": "^2.19",
-        "symfony/ux-map": "^2.19",
+        "symfony/ux-leaflet-map": "^2.20",
+        "symfony/ux-map": "^2.20",
         "symfony/ux-turbo": "^2.18",
         "symfony/ux-twig-component": "^2.16",
         "symfony/validator": "7.1.*",

importmap.php

@@ -25,17 +25,14 @@
     '@hotwired/turbo' => [
         'version' => '8.0.5',
     ],
-    '@symfony/ux-map/abstract-map-controller' => [
-        'path' => './vendor/symfony/ux-map/assets/dist/abstract_map_controller.js',
-    ],
-    '@symfony/ux-leaflet-map/map-controller' => [
-        'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
-    ],
     'leaflet' => [
         'version' => '1.9.4',
     ],
     'leaflet/dist/leaflet.min.css' => [
         'version' => '1.9.4',
         'type' => 'css',
     ],
+    '@symfony/ux-leaflet-map' => [
+        'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
+    ],
 ];

src/Places/Infrastructure/Symfony/Controller/ViewPlacesController.php

@@ -57,7 +57,10 @@ public function __invoke(
                     content: $this->renderView('places/_info_window.html.twig', [
                         'place' => $place,
                     ]),
-                )
+                ),
+                extra: [
+                    'icon_mask_uri' => $place->getIconMaskUri(),
+                ]
             ));
         }
 

templates/places/home.html.twig

@@ -8,6 +8,6 @@
 
 {% block main %}
 <main class="flex-1 relative">
-    {{ render_map(map, {class: 'absolute top-0 bottom-0 right-0 left-0'}) }}
+    {{ render_map(map, {'data-controller': 'places', class: 'absolute top-0 bottom-0 right-0 left-0'}) }}
 </main>
 {% endblock %}