From ddf3d6ba57794816a0efd67dec787203498fa86a Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Sat, 28 Sep 2024 00:17:06 +0200 Subject: [PATCH] feat(places): re-use glyphs icons from google maps, but for Leaflet --- assets/controllers/places_controller.js | 44 +++++++++++++++++++ composer.json | 4 +- composer.lock | 29 ++++++------ importmap.php | 9 ++-- .../Controller/ViewPlacesController.php | 5 ++- templates/places/home.html.twig | 2 +- 6 files changed, 69 insertions(+), 24 deletions(-) create mode 100644 assets/controllers/places_controller.js diff --git a/assets/controllers/places_controller.js b/assets/controllers/places_controller.js new file mode 100644 index 0000000..c8b9d2e --- /dev/null +++ b/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: ` +
+ + + + + + + + + + + + + + + +
+`, + iconSize: [25, 41], + iconAnchor: [12.5, 41], + popupAnchor: [0, -41], + className: '', + }) + } + } +} diff --git a/composer.json b/composer.json index 56c5ea9..57265e3 100644 --- a/composer.json +++ b/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.*", diff --git a/composer.lock b/composer.lock index 0d285bd..c4faaca 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "81d2f75156ef389d8be93644ccce035a", + "content-hash": "6e20ea7409716301719642269d908aa3", "packages": [ { "name": "composer/semver", @@ -8252,16 +8252,16 @@ }, { "name": "symfony/ux-leaflet-map", - "version": "v2.19.2", + "version": "v2.20.0", "source": { "type": "git", "url": "https://github.com/symfony/ux-leaflet-map.git", - "reference": "b5f6a7d053646c0d7272cde50822e1d1240139f0" + "reference": "437779e3aebd07cc84911ab1c28ab484ab53bd4c" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/ux-leaflet-map/zipball/b5f6a7d053646c0d7272cde50822e1d1240139f0", - "reference": "b5f6a7d053646c0d7272cde50822e1d1240139f0", + "url": "https://api.github.com/repos/symfony/ux-leaflet-map/zipball/437779e3aebd07cc84911ab1c28ab484ab53bd4c", + "reference": "437779e3aebd07cc84911ab1c28ab484ab53bd4c", "shasum": "" }, "require": { @@ -8300,7 +8300,7 @@ "symfony-ux" ], "support": { - "source": "https://github.com/symfony/ux-leaflet-map/tree/v2.19.2" + "source": "https://github.com/symfony/ux-leaflet-map/tree/v2.20.0" }, "funding": [ { @@ -8316,20 +8316,20 @@ "type": "tidelift" } ], - "time": "2024-08-13T14:54:07+00:00" + "time": "2024-09-24T06:08:11+00:00" }, { "name": "symfony/ux-map", - "version": "v2.19.3", + "version": "v2.20.0", "source": { "type": "git", "url": "https://github.com/symfony/ux-map.git", - "reference": "216594c4bed747b9a580d5f92cdd331152d94c00" + "reference": "db1fc9c98a21a5701f9d4b9426d2ce4d64b3b275" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/ux-map/zipball/216594c4bed747b9a580d5f92cdd331152d94c00", - "reference": "216594c4bed747b9a580d5f92cdd331152d94c00", + "url": "https://api.github.com/repos/symfony/ux-map/zipball/db1fc9c98a21a5701f9d4b9426d2ce4d64b3b275", + "reference": "db1fc9c98a21a5701f9d4b9426d2ce4d64b3b275", "shasum": "" }, "require": { @@ -8340,7 +8340,8 @@ "symfony/asset-mapper": "^6.4|^7.0", "symfony/framework-bundle": "^6.4|^7.0", "symfony/phpunit-bridge": "^6.4|^7.0", - "symfony/twig-bundle": "^6.4|^7.0" + "symfony/twig-bundle": "^6.4|^7.0", + "symfony/ux-twig-component": "^2.18" }, "type": "symfony-bundle", "extra": { @@ -8378,7 +8379,7 @@ "symfony-ux" ], "support": { - "source": "https://github.com/symfony/ux-map/tree/v2.19.3" + "source": "https://github.com/symfony/ux-map/tree/v2.20.0" }, "funding": [ { @@ -8394,7 +8395,7 @@ "type": "tidelift" } ], - "time": "2024-08-14T11:50:02+00:00" + "time": "2024-09-24T06:08:11+00:00" }, { "name": "symfony/ux-turbo", diff --git a/importmap.php b/importmap.php index 484af80..68247ae 100644 --- a/importmap.php +++ b/importmap.php @@ -25,12 +25,6 @@ '@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', ], @@ -38,4 +32,7 @@ 'version' => '1.9.4', 'type' => 'css', ], + '@symfony/ux-leaflet-map' => [ + 'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js', + ], ]; diff --git a/src/Places/Infrastructure/Symfony/Controller/ViewPlacesController.php b/src/Places/Infrastructure/Symfony/Controller/ViewPlacesController.php index 6e73ee4..3bc9ec2 100644 --- a/src/Places/Infrastructure/Symfony/Controller/ViewPlacesController.php +++ b/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(), + ] )); } diff --git a/templates/places/home.html.twig b/templates/places/home.html.twig index 7e2721f..97a195d 100644 --- a/templates/places/home.html.twig +++ b/templates/places/home.html.twig @@ -8,6 +8,6 @@ {% block main %}
- {{ 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'}) }}
{% endblock %}