feature #2340 [Map] add polyline support (sblondeau)

This PR was merged into the 2.x branch.

Discussion
----------

[Map] add polyline support

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

Add polyline support to Map for Leaflet and GoogleMap (useful e.g. for itinerary drawing)

```php
public function index(): Response
    {
        $map = (new Map('default'))
            ->center(new Point(45.7534031, 4.8295061))
            ->zoom(6)

            ->addPolyline(
                new Polyline(
                    title: 'my title',
                    points: [
                        new Point(48.8566, 2.3522),
                        new Point(45.7640, 4.8357),
                        new Point(43.2965, 5.3698),

                    ]
                )
            )
      ;
        return $this->render('hom/index.html.twig', [
            'map' => $map,
        ]);;
    }
```

![image](https://github.com/user-attachments/assets/d49631ee-fbea-4baa-835a-0dfad4fbbbc2)

Commits
-------

754fd35 [Map] Add support for Polyline

Author: smnandre

src/Map/CHANGELOG.md

@@ -5,6 +5,7 @@
 -   Add method `Symfony\UX\Map\Renderer\AbstractRenderer::tapOptions()`, to allow Renderer to modify options before rendering a Map.
 -   Add `ux_map.google_maps.default_map_id` configuration to set the Google ``Map ID``
 -   Add `ComponentWithMapTrait` to ease maps integration in [Live Components](https://symfony.com/bundles/ux-live-component/current/index.html)
+-   Add `Polyline` support
 
 ## 2.20
 

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

@@ -19,6 +19,14 @@ export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
     rawOptions?: PolygonOptions;
     extra: Record<string, unknown>;
 };
+export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
+    '@id': string;
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolylineOptions;
+    extra: Record<string, unknown>;
+};
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -28,26 +36,29 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     rawOptions?: InfoWindowOptions;
     extra: Record<string, unknown>;
 };
-export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon> extends Controller<HTMLElement> {
+export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon, PolylineOptions, Polyline> extends Controller<HTMLElement> {
     static values: {
         providerOptions: ObjectConstructor;
         center: ObjectConstructor;
         zoom: NumberConstructor;
         fitBoundsToMarkers: BooleanConstructor;
         markers: ArrayConstructor;
         polygons: ArrayConstructor;
+        polylines: ArrayConstructor;
         options: ObjectConstructor;
     };
     centerValue: Point | null;
     zoomValue: number | null;
     fitBoundsToMarkersValue: boolean;
     markersValue: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     optionsValue: MapOptions;
     protected map: Map;
     protected markers: globalThis.Map<any, any>;
     protected infoWindows: Array<InfoWindow>;
     protected polygons: globalThis.Map<any, any>;
+    protected polylines: globalThis.Map<any, any>;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point | null;
@@ -58,22 +69,36 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     protected abstract removeMarker(marker: Marker): void;
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
     createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    protected abstract removePolygon(polygon: Polygon): void;
     protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
+    protected abstract removePolyline(polyline: Polyline): void;
+    protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
     protected createInfoWindow({ definition, element, }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'] | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker | Polygon;
+        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker;
+    } | {
+        definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+        element: Polygon;
+    } | {
+        definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+        element: Polyline;
     }): InfoWindow;
     protected abstract doCreateInfoWindow({ definition, element, }: {
         definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
         element: Marker;
     } | {
         definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
         element: Polygon;
+    } | {
+        definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+        element: Polyline;
     }): InfoWindow;
     protected abstract doFitBoundsToMarkers(): void;
     protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
     abstract centerValueChanged(): void;
     abstract zoomValueChanged(): void;
     markersValueChanged(): void;
     polygonsValueChanged(): void;
+    polylinesValueChanged(): void;
 }

src/Map/assets/dist/abstract_map_controller.js

@@ -6,20 +6,23 @@ class default_1 extends Controller {
         this.markers = new Map();
         this.infoWindows = [];
         this.polygons = new Map();
+        this.polylines = new Map();
     }
     connect() {
         const options = this.optionsValue;
         this.dispatchEvent('pre-connect', { options });
         this.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
         this.markersValue.forEach((marker) => this.createMarker(marker));
         this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
+        this.polylinesValue.forEach((polyline) => this.createPolyline(polyline));
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
         this.dispatchEvent('connect', {
             map: this.map,
             markers: [...this.markers.values()],
             polygons: [...this.polygons.values()],
+            polylines: [...this.polylines.values()],
             infoWindows: this.infoWindows,
         });
     }
@@ -39,6 +42,14 @@ class default_1 extends Controller {
         this.polygons.set(definition['@id'], polygon);
         return polygon;
     }
+    createPolyline(definition) {
+        this.dispatchEvent('polyline:before-create', { definition });
+        const polyline = this.doCreatePolyline(definition);
+        this.dispatchEvent('polyline:after-create', { polyline });
+        polyline['@id'] = definition['@id'];
+        this.polylines.set(definition['@id'], polyline);
+        return polyline;
+    }
     createInfoWindow({ definition, element, }) {
         this.dispatchEvent('info-window:before-create', { definition, element });
         const infoWindow = this.doCreateInfoWindow({ definition, element });
@@ -71,7 +82,7 @@ class default_1 extends Controller {
         }
         this.polygons.forEach((polygon) => {
             if (!this.polygonsValue.find((p) => p['@id'] === polygon['@id'])) {
-                polygon.remove();
+                this.removePolygon(polygon);
                 this.polygons.delete(polygon['@id']);
             }
         });
@@ -81,6 +92,22 @@ class default_1 extends Controller {
             }
         });
     }
+    polylinesValueChanged() {
+        if (!this.map) {
+            return;
+        }
+        this.polylines.forEach((polyline) => {
+            if (!this.polylinesValue.find((p) => p['@id'] === polyline['@id'])) {
+                this.removePolyline(polyline);
+                this.polylines.delete(polyline['@id']);
+            }
+        });
+        this.polylinesValue.forEach((polyline) => {
+            if (!this.polylines.has(polyline['@id'])) {
+                this.createPolyline(polyline);
+            }
+        });
+    }
 }
 default_1.values = {
     providerOptions: Object,
@@ -89,6 +116,7 @@ default_1.values = {
     fitBoundsToMarkers: Boolean,
     markers: Array,
     polygons: Array,
+    polylines: Array,
     options: Object,
 };
 

src/Map/assets/src/abstract_map_controller.ts

@@ -29,6 +29,15 @@ export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 
+export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
+    '@id': string;
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolylineOptions;
+    extra: Record<string, unknown>;
+};
+
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -58,6 +67,8 @@ export default abstract class<
     InfoWindow,
     PolygonOptions,
     Polygon,
+    PolylineOptions,
+    Polyline,
 > extends Controller<HTMLElement> {
     static values = {
         providerOptions: Object,
@@ -66,6 +77,7 @@ export default abstract class<
         fitBoundsToMarkers: Boolean,
         markers: Array,
         polygons: Array,
+        polylines: Array,
         options: Object,
     };
 
@@ -74,12 +86,14 @@ export default abstract class<
     declare fitBoundsToMarkersValue: boolean;
     declare markersValue: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     declare polygonsValue: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
+    declare polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
     declare optionsValue: MapOptions;
 
     protected map: Map;
     protected markers = new Map<Marker>();
     protected infoWindows: Array<InfoWindow> = [];
     protected polygons = new Map<Polygon>();
+    protected polylines = new Map<Polyline>();
 
     connect() {
         const options = this.optionsValue;
@@ -92,6 +106,8 @@ export default abstract class<
 
         this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
 
+        this.polylinesValue.forEach((polyline) => this.createPolyline(polyline));
+
         if (this.fitBoundsToMarkersValue) {
             this.doFitBoundsToMarkers();
         }
@@ -100,6 +116,7 @@ export default abstract class<
             map: this.map,
             markers: [...this.markers.values()],
             polygons: [...this.polygons.values()],
+            polylines: [...this.polylines.values()],
             infoWindows: this.infoWindows,
         });
     }
@@ -142,17 +159,36 @@ export default abstract class<
         return polygon;
     }
 
+    protected abstract removePolygon(polygon: Polygon): void;
+
     protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
 
+    public createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline {
+        this.dispatchEvent('polyline:before-create', { definition });
+        const polyline = this.doCreatePolyline(definition);
+        this.dispatchEvent('polyline:after-create', { polyline });
+
+        polyline['@id'] = definition['@id'];
+
+        this.polylines.set(definition['@id'], polyline);
+
+        return polyline;
+    }
+
+    protected abstract removePolyline(polyline: Polyline): void;
+
+    protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
+
     protected createInfoWindow({
         definition,
         element,
-    }: {
-        definition:
-            | MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']
-            | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-        element: Marker | Polygon;
-    }): InfoWindow {
+    }:
+        | { definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']; element: Marker }
+        | { definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow']; element: Polygon }
+        | {
+              definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+              element: Polyline;
+          }): InfoWindow {
         this.dispatchEvent('info-window:before-create', { definition, element });
         const infoWindow = this.doCreateInfoWindow({ definition, element });
         this.dispatchEvent('info-window:after-create', { infoWindow, element });
@@ -166,13 +202,11 @@ export default abstract class<
         definition,
         element,
     }:
+        | { definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']; element: Marker }
+        | { definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow']; element: Polygon }
         | {
-              definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-              element: Marker;
-          }
-        | {
-              definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
-              element: Polygon;
+              definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
+              element: Polyline;
           }): InfoWindow;
 
     protected abstract doFitBoundsToMarkers(): void;
@@ -213,7 +247,7 @@ export default abstract class<
 
         this.polygons.forEach((polygon) => {
             if (!this.polygonsValue.find((p) => p['@id'] === polygon['@id'])) {
-                polygon.remove();
+                this.removePolygon(polygon);
                 this.polygons.delete(polygon['@id']);
             }
         });
@@ -224,4 +258,23 @@ export default abstract class<
             }
         });
     }
+
+    public polylinesValueChanged(): void {
+        if (!this.map) {
+            return;
+        }
+
+        this.polylines.forEach((polyline) => {
+            if (!this.polylinesValue.find((p) => p['@id'] === polyline['@id'])) {
+                this.removePolyline(polyline);
+                this.polylines.delete(polyline['@id']);
+            }
+        });
+
+        this.polylinesValue.forEach((polyline) => {
+            if (!this.polylines.has(polyline['@id'])) {
+                this.createPolyline(polyline);
+            }
+        });
+    }
 }

src/Map/assets/test/abstract_map_controller.test.ts

@@ -35,13 +35,25 @@ class MyMapController extends AbstractMapController {
         return polygon;
     }
 
+    doCreatePolyline(definition) {
+        const polyline = { polyline: 'polyline', title: definition.title };
+
+        if (definition.infoWindow) {
+            this.createInfoWindow({ definition: definition.infoWindow, element: polyline });
+        }
+        return polyline;
+    }
+
     doCreateInfoWindow({ definition, element }) {
         if (element.marker) {
             return { infoWindow: 'infoWindow', headerContent: definition.headerContent, marker: element.title };
         }
         if (element.polygon) {
             return { infoWindow: 'infoWindow', headerContent: definition.headerContent, polygon: element.title };
         }
+        if (element.polyline) {
+            return { infoWindow: 'infoWindow', headerContent: definition.headerContent, polyline: element.title };
+        }
     }
 
     doFitBoundsToMarkers() {
@@ -70,6 +82,7 @@ describe('AbstractMapController', () => {
                 data-map-options-value="{}" 
                 data-map-markers-value="[{"position":{"lat":48.8566,"lng":2.3522},"title":"Paris","infoWindow":{"headerContent":"Paris","content":null,"position":null,"opened":false,"autoClose":true,"extra":[]},"extra":[],"@id":"a69f13edd2e571f3"},{"position":{"lat":45.75,"lng":4.85},"title":"Lyon","infoWindow":{"headerContent":"Lyon","content":null,"position":null,"opened":false,"autoClose":true,"extra":[]},"extra":[],"@id":"cb9c1a30d562694b"},{"position":{"lat":43.6047,"lng":1.4442},"title":"Toulouse","infoWindow":{"headerContent":"Toulouse","content":null,"position":null,"opened":false,"autoClose":true,"extra":[]},"extra":[],"@id":"e6b3acef1325fb52"}]" 
                 data-map-polygons-value="[{"points":[{"lat":48.8566,"lng":2.3522},{"lat":45.75,"lng":4.85},{"lat":43.6047,"lng":1.4442}],"title":null,"infoWindow":null,"extra":[],"@id":"228ae6f5c1b17cfd"},{"points":[{"lat":1.4442,"lng":43.6047},{"lat":4.85,"lng":45.75},{"lat":2.3522,"lng":48.8566}],"title":null,"infoWindow":{"headerContent":"Polygon","content":null,"position":null,"opened":false,"autoClose":true,"extra":{"foo":"bar"}},"extra":{"fillColor":"#ff0000"},"@id":"9874334e4e8caa16"}]" 
+                data-map-polylines-value="[{"points":[{"lat":48.1173,"lng":-1.6778},{"lat":48.8566,"lng":2.3522},{"lat":48.2082,"lng":16.3738}],"title":null,"infoWindow":{"headerContent":"Polyline","content":null,"position":null,"opened":false,"autoClose":true,"extra":{"foo":"bar"}},"extra":{"strokeColor":"#ff0000"},"@id":"0fa955da866c7720"}]"
                 style="height: 600px"
             ></div>
         `);
@@ -79,7 +92,7 @@ describe('AbstractMapController', () => {
         clearDOM();
     });
 
-    it('connect and create map, marker, polygon and info window', async () => {
+    it('connect and create map, marker, polygon, polyline and info window', async () => {
         const div = getByTestId(container, 'map');
         expect(div).not.toHaveClass('connected');
 
@@ -101,6 +114,9 @@ describe('AbstractMapController', () => {
                 ['9874334e4e8caa16', { '@id': '9874334e4e8caa16', polygon: 'polygon', title: null }],
             ])
         );
+        expect(controller.polylines).toEqual(
+            new Map([['0fa955da866c7720', { '@id': '0fa955da866c7720', polyline: 'polyline', title: null }]])
+        );
         expect(controller.infoWindows).toEqual([
             {
                 headerContent: 'Paris',
@@ -122,6 +138,11 @@ describe('AbstractMapController', () => {
                 infoWindow: 'infoWindow',
                 polygon: null,
             },
+            {
+                headerContent: 'Polyline',
+                infoWindow: 'infoWindow',
+                polyline: null,
+            },
         ]);
     });
 });