feat: custom icon on markers

Author: sblondeau

src/Map/CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.24
 
 -  Installing the package in a Symfony app using Flex won't add the `@symfony/ux-map` dependency to the `package.json` file anymore.
+-  Add `Icon` to customize a `Marker` icon (URL or SVG content)
 
 ## 2.23
 

src/Map/assets/dist/abstract_map_controller.d.ts

@@ -3,6 +3,12 @@ export type Point = {
     lat: number;
     lng: number;
 };
+export type Icon = {
+    content: string;
+    type: 'url' | 'inline-svg' | 'ux-icon';
+    width: number;
+    height: number;
+};
 export type Identifier = string;
 export type WithIdentifier<T extends Record<string, unknown>> = T & {
     '@id': Identifier;
@@ -11,6 +17,7 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<
     position: Point;
     title: string | null;
     infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
+    icon?: Icon;
     rawOptions?: MarkerOptions;
     extra: Record<string, unknown>;
 }>;
@@ -105,6 +112,10 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
         definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
         element: Marker | Polygon | Polyline;
     }): InfoWindow;
+    protected abstract doCreateIcon({ definition, element, }: {
+        definition: Icon;
+        element: Marker;
+    }): void;
     private createDrawingFactory;
     private onDrawChanged;
 }

src/Map/assets/src/abstract_map_controller.ts

@@ -1,14 +1,20 @@
 import { Controller } from '@hotwired/stimulus';
 
 export type Point = { lat: number; lng: number };
-
+export type Icon = {
+    content: string;
+    type: 'url' | 'inline-svg' | 'ux-icon';
+    width: number;
+    height: number;
+};
 export type Identifier = string;
 export type WithIdentifier<T extends Record<string, unknown>> = T & { '@id': Identifier };
 
 export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
     position: Point;
     title: string | null;
     infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
+    icon?: Icon;
     /**
      * Raw options passed to the marker constructor, specific to the map provider (e.g.: `L.marker()` for Leaflet).
      */
@@ -268,6 +274,13 @@ export default abstract class<
         definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
         element: Marker | Polygon | Polyline;
     }): InfoWindow;
+    protected abstract doCreateIcon({
+        definition,
+        element,
+    }: {
+        definition: Icon;
+        element: Marker;
+    }): void;
 
     //endregion
 

src/Map/config/services.php

@@ -11,6 +11,7 @@
 
 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
 
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\Renderer\AbstractRendererFactory;
 use Symfony\UX\Map\Renderer\Renderer;
 use Symfony\UX\Map\Renderer\Renderers;
@@ -20,6 +21,7 @@
 /*
  * @author Hugo Alliaume <hugo@alliau.me>
  */
+
 return static function (ContainerConfigurator $container): void {
     $container->services()
         ->set('ux_map.renderers', Renderers::class)
@@ -28,10 +30,16 @@
                 abstract_arg('renderers configuration'),
             ])
 
+        ->set('.ux_map.ux_icons.renderer', UxIconRenderer::class)
+            ->args([
+                service('.ux_icons.icon_renderer')->nullOnInvalid(),
+            ])
+
         ->set('ux_map.renderer_factory.abstract', AbstractRendererFactory::class)
             ->abstract()
             ->args([
                 service('stimulus.helper'),
+                service('.ux_map.ux_icons.renderer')->nullOnInvalid(),
             ])
 
         ->set('ux_map.renderer_factory', Renderer::class)

src/Map/doc/index.rst

@@ -108,6 +108,10 @@ You can add markers to a map using the ``addMarker()`` method::
             infoWindow: new InfoWindow(
                 headerContent: '<b>Lyon</b>',
                 content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
+            ),
+            icon: new Icon(
+                content: '<svg>....</svg>'
+                icontType: 'html'
             )
         ))
 
@@ -128,6 +132,25 @@ You can add markers to a map using the ``addMarker()`` method::
         ))
     ;
 
+Add Marker icons
+~~~~~~~~~~~~~~~~
+
+.. versionadded:: 2.24
+
+    ``Marker`` icon customizatisation is available since UX Map 2.24.
+When returning a Map, it's quite common to want to customize ``Marker`` icon. It is possible thanks to ``icon`` parameter and ``Icon`` class::
+    
+        // It can be a UX Icon (requires `symfony/ux-icons`)
+        $icon = Icon::fromUxIcon('fa:map-marker');
+        // Or an URL pointing to an image
+        $icon = Icon::fromUrl('https://example.com/marker.png');
+        // Or a plain SVG content
+        $icon = Icon::fromInlineSVG('<svg>(...)</svg>');
+        new Marker(
+            // ...
+            icon: $icon
+))
+
 Remove elements from Map
 ~~~~~~~~~~~~~~~~~~~~~~~~
 

src/Map/src/Bridge/Google/assets/dist/map_controller.d.ts

@@ -1,10 +1,11 @@
 import type { LoaderOptions } from '@googlemaps/js-api-loader';
 import AbstractMapController from '@symfony/ux-map';
-import type { InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
+import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
 type MapOptions = Pick<google.maps.MapOptions, 'mapId' | 'gestureHandling' | 'backgroundColor' | 'disableDoubleClickZoom' | 'zoomControl' | 'zoomControlOptions' | 'mapTypeControl' | 'mapTypeControlOptions' | 'streetViewControl' | 'streetViewControlOptions' | 'fullscreenControl' | 'fullscreenControlOptions'>;
 export default class extends AbstractMapController<MapOptions, google.maps.Map, google.maps.marker.AdvancedMarkerElementOptions, google.maps.marker.AdvancedMarkerElement, google.maps.InfoWindowOptions, google.maps.InfoWindow, google.maps.PolygonOptions, google.maps.Polygon, google.maps.PolylineOptions, google.maps.Polyline> {
     providerOptionsValue: Pick<LoaderOptions, 'apiKey' | 'id' | 'language' | 'region' | 'nonce' | 'retries' | 'url' | 'version' | 'libraries'>;
     map: google.maps.Map;
+    parser: DOMParser;
     connect(): Promise<void>;
     centerValueChanged(): void;
     zoomValueChanged(): void;
@@ -32,6 +33,10 @@ export default class extends AbstractMapController<MapOptions, google.maps.Map,
     }): google.maps.InfoWindow;
     protected doFitBoundsToMarkers(): void;
     private createTextOrElement;
+    protected doCreateIcon({ definition, element, }: {
+        definition: Icon;
+        element: google.maps.marker.AdvancedMarkerElement;
+    }): void;
     private closeInfoWindowsExcept;
 }
 export {};

src/Map/src/Bridge/Google/assets/dist/map_controller.js

@@ -126,6 +126,7 @@ class map_controller extends default_1 {
             });
         }
         super.connect();
+        this.parser = new DOMParser();
     }
     centerValueChanged() {
         if (this.map && this.hasCenterValue && this.centerValue) {
@@ -158,7 +159,7 @@ class map_controller extends default_1 {
         });
     }
     doCreateMarker({ definition, }) {
-        const { '@id': _id, position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
+        const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
         const marker = new _google.maps.marker.AdvancedMarkerElement({
             position,
             title,
@@ -169,6 +170,9 @@ class map_controller extends default_1 {
         if (infoWindow) {
             this.createInfoWindow({ definition: infoWindow, element: marker });
         }
+        if (icon) {
+            this.doCreateIcon({ definition: icon, element: marker });
+        }
         return marker;
     }
     doRemoveMarker(marker) {
@@ -272,6 +276,20 @@ class map_controller extends default_1 {
         }
         return content;
     }
+    doCreateIcon({ definition, element, }) {
+        const { content, type, width, height } = definition;
+        if (type === 'inline-svg') {
+            const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
+            element.content = icon;
+        }
+        else {
+            const icon = document.createElement('img');
+            icon.width = width;
+            icon.height = height;
+            icon.src = content;
+            element.content = icon;
+        }
+    }
     closeInfoWindowsExcept(infoWindow) {
         this.infoWindows.forEach((otherInfoWindow) => {
             if (otherInfoWindow !== infoWindow) {

src/Map/src/Bridge/Google/assets/src/map_controller.ts

@@ -11,6 +11,7 @@ import type { LoaderOptions } from '@googlemaps/js-api-loader';
 import { Loader } from '@googlemaps/js-api-loader';
 import AbstractMapController from '@symfony/ux-map';
 import type {
+    Icon,
     InfoWindowWithoutPositionDefinition,
     MarkerDefinition,
     Point,
@@ -55,6 +56,8 @@ export default class extends AbstractMapController<
 
     declare map: google.maps.Map;
 
+    public parser: DOMParser;
+
     async connect() {
         if (!_google) {
             _google = { maps: {} as typeof google.maps };
@@ -88,6 +91,7 @@ export default class extends AbstractMapController<
         }
 
         super.connect();
+        this.parser = new DOMParser();
     }
 
     public centerValueChanged(): void {
@@ -139,7 +143,7 @@ export default class extends AbstractMapController<
     }: {
         definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>;
     }): google.maps.marker.AdvancedMarkerElement {
-        const { '@id': _id, position, title, infoWindow, extra, rawOptions = {}, ...otherOptions } = definition;
+        const { '@id': _id, position, title, infoWindow, icon, extra, rawOptions = {}, ...otherOptions } = definition;
 
         const marker = new _google.maps.marker.AdvancedMarkerElement({
             position,
@@ -153,6 +157,10 @@ export default class extends AbstractMapController<
             this.createInfoWindow({ definition: infoWindow, element: marker });
         }
 
+        if (icon) {
+            this.doCreateIcon({ definition: icon, element: marker });
+        }
+
         return marker;
     }
 
@@ -297,6 +305,26 @@ export default class extends AbstractMapController<
         return content;
     }
 
+    protected doCreateIcon({
+        definition,
+        element,
+    }: {
+        definition: Icon;
+        element: google.maps.marker.AdvancedMarkerElement;
+    }): void {
+        const { content, type, width, height } = definition;
+        if (type === 'inline-svg') {
+            const icon = this.parser.parseFromString(content, 'image/svg+xml').documentElement;
+            element.content = icon;
+        } else {
+            const icon = document.createElement('img');
+            icon.width = width;
+            icon.height = height;
+            icon.src = content;
+            element.content = icon;
+        }
+    }
+
     private closeInfoWindowsExcept(infoWindow: google.maps.InfoWindow) {
         this.infoWindows.forEach((otherInfoWindow) => {
             if (otherInfoWindow !== infoWindow) {

src/Map/src/Bridge/Google/src/Renderer/GoogleRenderer.php

@@ -12,6 +12,7 @@
 namespace Symfony\UX\Map\Bridge\Google\Renderer;
 
 use Symfony\UX\Map\Bridge\Google\GoogleOptions;
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\MapOptionsInterface;
 use Symfony\UX\Map\Renderer\AbstractRenderer;
 use Symfony\UX\StimulusBundle\Helper\StimulusHelper;
@@ -42,8 +43,9 @@ public function __construct(
          */
         private array $libraries = [],
         private ?string $defaultMapId = null,
+        ?UxIconRenderer $uxIconRenderer = null,
     ) {
-        parent::__construct($stimulusHelper);
+        parent::__construct($stimulusHelper, $uxIconRenderer);
     }
 
     protected function getName(): string

src/Map/src/Bridge/Google/src/Renderer/GoogleRendererFactory.php

@@ -13,6 +13,7 @@
 
 use Symfony\UX\Map\Exception\InvalidArgumentException;
 use Symfony\UX\Map\Exception\UnsupportedSchemeException;
+use Symfony\UX\Map\Icon\UxIconRenderer;
 use Symfony\UX\Map\Renderer\AbstractRendererFactory;
 use Symfony\UX\Map\Renderer\Dsn;
 use Symfony\UX\Map\Renderer\RendererFactoryInterface;
@@ -26,9 +27,10 @@ final class GoogleRendererFactory extends AbstractRendererFactory implements Ren
 {
     public function __construct(
         StimulusHelper $stimulus,
+        ?UxIconRenderer $uxIconRenderer = null,
         private ?string $defaultMapId = null,
     ) {
-        parent::__construct($stimulus);
+        parent::__construct($stimulus, $uxIconRenderer);
     }
 
     public function create(Dsn $dsn): RendererInterface
@@ -51,6 +53,7 @@ public function create(Dsn $dsn): RendererInterface
             version: $dsn->getOption('version', 'weekly'),
             libraries: ['maps', 'marker', ...$dsn->getOption('libraries', [])],
             defaultMapId: $this->defaultMapId,
+            uxIconRenderer: $this->uxIconRenderer,
         );
     }