feature #2162 [Map] Adding polygons to google and leaflet + info window (rrr63)

This PR was merged into the 2.x branch.

Discussion
----------

[Map] Adding polygons to google and leaflet + info window

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Issues        |
| License       | MIT

Hello,

In my job i use to work a lot with maps, so i would love to work with symfony ux in next projects.
But i have to work with polygons, so i tried to implement it to the ux-map.

I added polygons on the Map component, and made it work on both bridge : google and leaflet.
I added a window popup on click also, the current version of window popup worked only with markers.
I had to rename `createInfoWindow` to `createInfoWindowMarker`. With that i could add a `createInfoWindowPolygon`.
The only difference with the infoWindow from marker is that his anchor will be the event cursor position, because the area of the polygon could be very large and we want a window on the click position.

You can try by adding a simple polygon on your map :
```php
      ->addPolygon(new Polygon(
                points: [
                    new Point(45.7402741, 3.191185),
                    new Point(45.7314078, 3.1903267),
                    new Point(45.7307488, 3.208952),
                    new Point(45.7402741, 3.2112694)
                ],
                rawOptions:[
                    'fillColor' => 'green',
                    'color' => 'green',
                ],
                infoWindow: new InfoWindow(
                    headerContent: '<b>Polygon</b>',

                    content: 'I am a polygon'
                )
            ))
```
![smallgreenrectangle](https://github.com/user-attachments/assets/09282c03-dc7a-499c-b489-44bf56816cb4)

Here a full example that works with leaflet and google that show some of french regions via an api call

```php
$polygons = json_decode(file_get_contents('api_url'), true);
        $polygons = $polygons['features'];

        $googleOptions = (new GoogleOptions())
            ->mapId('mapId')
        ;

        $map = (new Map('default', $googleOptions))
            ->center(new Point(45.8079318, 3))
            ->zoom(10)
            ;

        foreach ($polygons as $polygon) {
            $points = [];
            $title = $polygon['properties']['nom'];
            foreach ($polygon['geometry']['coordinates'][0] as $point) {
                if (count($point) == 2) {
                    $points[] = new Point($point[1], $point[0]);
                }
            }

            $map->addPolygon(new Polygon(
                points: $points,
                rawOptions:[
                    'fillColor' => 'red',
                    'color' => 'red',
                ],
                infoWindow: new InfoWindow(
                    headerContent: '<b>'.$title.'</b>',
                    content: 'The French region of '.$title.'.'
                )
            ));
        }
```
![googleregions](https://github.com/user-attachments/assets/511ec6d5-5ab1-4feb-b58f-6b5542e28091)
![leafletregions](https://github.com/user-attachments/assets/f68d18b3-8399-40a9-979f-db039a5298ec)

I added tests for polygons and polygon info window
I hope I did it right, i listen for any suggestions or edits in the PR

Commits
-------

2f63db7 [Map] Add support for Polygons

Author: Kocal

src/Map/CHANGELOG.md

@@ -9,6 +9,7 @@
 -   Add `<twig:ux:map />` Twig component
 -   The importmap entry `@symfony/ux-map/abstract-map-controller` can be removed
     from your importmap, it is no longer needed. 
+-   Add `Polygon` support
 
 ## 2.19
 

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

@@ -3,11 +3,12 @@ export type Point = {
     lat: number;
     lng: number;
 };
-export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
+export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
     center: Point | null;
     zoom: number | null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
     options: Options;
 };
 export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
@@ -17,6 +18,13 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
     rawOptions?: MarkerOptions;
     extra: Record<string, unknown>;
 };
+export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolygonOptions;
+    extra: Record<string, unknown>;
+};
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -26,30 +34,36 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     rawOptions?: InfoWindowOptions;
     extra: Record<string, unknown>;
 };
-export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow> extends Controller<HTMLElement> {
+export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon> extends Controller<HTMLElement> {
     static values: {
         providerOptions: ObjectConstructor;
         view: ObjectConstructor;
     };
-    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions>;
+    viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
     protected map: Map;
     protected markers: Array<Marker>;
     protected infoWindows: Array<InfoWindow>;
+    protected polygons: Array<Polygon>;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
         center: Point | null;
         zoom: number | null;
         options: MapOptions;
     }): Map;
     createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
+    createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
-    protected createInfoWindow({ definition, marker, }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        marker: Marker;
+    protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
+    protected createInfoWindow({ definition, element, }: {
+        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'] | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker | Polygon;
     }): InfoWindow;
-    protected abstract doCreateInfoWindow({ definition, marker, }: {
+    protected abstract doCreateInfoWindow({ definition, element, }: {
         definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        marker: Marker;
+        element: Marker;
+    } | {
+        definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+        element: Polygon;
     }): InfoWindow;
     protected abstract doFitBoundsToMarkers(): void;
     protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;

src/Map/assets/dist/abstract_map_controller.js

@@ -5,18 +5,21 @@ class default_1 extends Controller {
         super(...arguments);
         this.markers = [];
         this.infoWindows = [];
+        this.polygons = [];
     }
     connect() {
-        const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
+        const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
         this.dispatchEvent('pre-connect', { options });
         this.map = this.doCreateMap({ center, zoom, options });
         markers.forEach((marker) => this.createMarker(marker));
+        polygons.forEach((polygon) => this.createPolygon(polygon));
         if (fitBoundsToMarkers) {
             this.doFitBoundsToMarkers();
         }
         this.dispatchEvent('connect', {
             map: this.map,
             markers: this.markers,
+            polygons: this.polygons,
             infoWindows: this.infoWindows,
         });
     }
@@ -27,10 +30,17 @@ class default_1 extends Controller {
         this.markers.push(marker);
         return marker;
     }
-    createInfoWindow({ definition, marker, }) {
-        this.dispatchEvent('info-window:before-create', { definition, marker });
-        const infoWindow = this.doCreateInfoWindow({ definition, marker });
-        this.dispatchEvent('info-window:after-create', { infoWindow, marker });
+    createPolygon(definition) {
+        this.dispatchEvent('polygon:before-create', { definition });
+        const polygon = this.doCreatePolygon(definition);
+        this.dispatchEvent('polygon:after-create', { polygon });
+        this.polygons.push(polygon);
+        return polygon;
+    }
+    createInfoWindow({ definition, element, }) {
+        this.dispatchEvent('info-window:before-create', { definition, element });
+        const infoWindow = this.doCreateInfoWindow({ definition, element });
+        this.dispatchEvent('info-window:after-create', { infoWindow, element });
         this.infoWindows.push(infoWindow);
         return infoWindow;
     }

src/Map/assets/src/abstract_map_controller.ts

@@ -2,11 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 export type Point = { lat: number; lng: number };
 
-export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
+export type MapView<Options, MarkerOptions, InfoWindowOptions, PolygonOptions> = {
     center: Point | null;
     zoom: number | null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
+    polygons: Array<PolygonDefinition<PolygonOptions, InfoWindowOptions>>;
     options: Options;
 };
 
@@ -27,6 +28,14 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 
+export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
+    infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
+    points: Array<Point>;
+    title: string | null;
+    rawOptions?: PolygonOptions;
+    extra: Record<string, unknown>;
+};
+
 export type InfoWindowDefinition<InfoWindowOptions> = {
     headerContent: string | null;
     content: string | null;
@@ -54,34 +63,40 @@ export default abstract class<
     Marker,
     InfoWindowOptions,
     InfoWindow,
+    PolygonOptions,
+    Polygon,
 > extends Controller<HTMLElement> {
     static values = {
         providerOptions: Object,
         view: Object,
     };
 
-    declare viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions>;
+    declare viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions, PolygonOptions>;
 
     protected map: Map;
     protected markers: Array<Marker> = [];
     protected infoWindows: Array<InfoWindow> = [];
+    protected polygons: Array<Polygon> = [];
 
     connect() {
-        const { center, zoom, options, markers, fitBoundsToMarkers } = this.viewValue;
+        const { center, zoom, options, markers, polygons, fitBoundsToMarkers } = this.viewValue;
 
         this.dispatchEvent('pre-connect', { options });
 
         this.map = this.doCreateMap({ center, zoom, options });
 
         markers.forEach((marker) => this.createMarker(marker));
 
+        polygons.forEach((polygon) => this.createPolygon(polygon));
+
         if (fitBoundsToMarkers) {
             this.doFitBoundsToMarkers();
         }
 
         this.dispatchEvent('connect', {
             map: this.map,
             markers: this.markers,
+            polygons: this.polygons,
             infoWindows: this.infoWindows,
         });
     }
@@ -106,18 +121,29 @@ export default abstract class<
         return marker;
     }
 
+    createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon {
+        this.dispatchEvent('polygon:before-create', { definition });
+        const polygon = this.doCreatePolygon(definition);
+        this.dispatchEvent('polygon:after-create', { polygon });
+        this.polygons.push(polygon);
+        return polygon;
+    }
+
     protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
+    protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
 
     protected createInfoWindow({
         definition,
-        marker,
+        element,
     }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        marker: Marker;
+        definition:
+            | MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow']
+            | PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+        element: Marker | Polygon;
     }): InfoWindow {
-        this.dispatchEvent('info-window:before-create', { definition, marker });
-        const infoWindow = this.doCreateInfoWindow({ definition, marker });
-        this.dispatchEvent('info-window:after-create', { infoWindow, marker });
+        this.dispatchEvent('info-window:before-create', { definition, element });
+        const infoWindow = this.doCreateInfoWindow({ definition, element });
+        this.dispatchEvent('info-window:after-create', { infoWindow, element });
 
         this.infoWindows.push(infoWindow);
 
@@ -126,11 +152,16 @@ export default abstract class<
 
     protected abstract doCreateInfoWindow({
         definition,
-        marker,
-    }: {
-        definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-        marker: Marker;
-    }): InfoWindow;
+        element,
+    }:
+        | {
+              definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+              element: Marker;
+          }
+        | {
+              definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
+              element: Polygon;
+          }): InfoWindow;
 
     protected abstract doFitBoundsToMarkers(): void;
 

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

@@ -20,14 +20,28 @@ class MyMapController extends AbstractMapController {
         const marker = { marker: 'marker', title: definition.title };
 
         if (definition.infoWindow) {
-            this.createInfoWindow({ definition: definition.infoWindow, marker });
+            this.createInfoWindow({ definition: definition.infoWindow, element: marker });
         }
 
         return marker;
     }
 
-    doCreateInfoWindow({ definition, marker }) {
-        return { infoWindow: 'infoWindow', headerContent: definition.headerContent, marker: marker.title };
+    doCreatePolygon(definition) {
+        const polygon = { polygon: 'polygon', title: definition.title };
+
+        if (definition.infoWindow) {
+            this.createInfoWindow({ definition: definition.infoWindow, element: polygon });
+        }
+        return polygon;
+    }
+
+    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 };
+        }
     }
 
     doFitBoundsToMarkers() {
@@ -47,20 +61,69 @@ describe('AbstractMapController', () => {
     beforeEach(() => {
         container = mountDOM(`
           <div 
-              data-testid="map" 
-              data-controller="map" 
-              style="height&#x3A;&#x20;700px&#x3B;&#x20;margin&#x3A;&#x20;10px" 
-              data-map-provider-options-value="&#x7B;&#x7D;" 
-              data-map-view-value="&#x7B;&quot;center&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;zoom&quot;&#x3A;4,&quot;fitBoundsToMarkers&quot;&#x3A;true,&quot;options&quot;&#x3A;&#x7B;&#x7D;,&quot;markers&quot;&#x3A;&#x5B;&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;48.8566,&quot;lng&quot;&#x3A;2.3522&#x7D;,&quot;title&quot;&#x3A;&quot;Paris&quot;,&quot;infoWindow&quot;&#x3A;null&#x7D;,&#x7B;&quot;position&quot;&#x3A;&#x7B;&quot;lat&quot;&#x3A;45.764,&quot;lng&quot;&#x3A;4.8357&#x7D;,&quot;title&quot;&#x3A;&quot;Lyon&quot;,&quot;infoWindow&quot;&#x3A;&#x7B;&quot;headerContent&quot;&#x3A;&quot;&lt;b&gt;Lyon&lt;&#x5C;&#x2F;b&gt;&quot;,&quot;content&quot;&#x3A;&quot;The&#x20;French&#x20;town&#x20;in&#x20;the&#x20;historic&#x20;Rh&#x5C;u00f4ne-Alpes&#x20;region,&#x20;located&#x20;at&#x20;the&#x20;junction&#x20;of&#x20;the&#x20;Rh&#x5C;u00f4ne&#x20;and&#x20;Sa&#x5C;u00f4ne&#x20;rivers.&quot;,&quot;position&quot;&#x3A;null,&quot;opened&quot;&#x3A;false,&quot;autoClose&quot;&#x3A;true&#x7D;&#x7D;&#x5D;&#x7D;"
-          ></div>
+            data-testid="map" 
+            data-controller="map" 
+            style="height: 700px; margin: 10px;" 
+            data-map-provider-options-value="{}" 
+            data-map-view-value='{
+                "center": { "lat": 48.8566, "lng": 2.3522 },
+                "zoom": 4,
+                "fitBoundsToMarkers": true,
+                "options": {},
+                "markers": [
+                    {
+                        "position": { "lat": 48.8566, "lng": 2.3522 },
+                        "title": "Paris",
+                        "infoWindow": null
+                    },
+                    {
+                        "position": { "lat": 45.764, "lng": 4.8357 },
+                        "title": "Lyon",
+                        "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.",
+                            "position": null,
+                            "opened": false,
+                            "autoClose": true
+                        }
+                    }
+                ],
+                "polygons": [
+                    {
+                        "coordinates": [
+                            { "lat": 48.858844, "lng": 2.294351 },
+                            { "lat": 48.853, "lng": 2.3499 },
+                            { "lat": 48.8566, "lng": 2.3522 }
+                        ],
+                        "title": "Polygon 1",
+                        "infoWindow": null
+                    },
+                    {
+                        "coordinates": [
+                            { "lat": 45.764043, "lng": 4.835659 },
+                            { "lat": 45.750000, "lng": 4.850000 },
+                            { "lat": 45.770000, "lng": 4.820000 }
+                        ],
+                        "title": "Polygon 2",
+                        "infoWindow": {
+                            "headerContent": "<b>Polygon 2</b>",
+                            "content": "A polygon around Lyon with some additional info.",
+                            "position": null,
+                            "opened": false,
+                            "autoClose": true
+                        }
+                    }
+                ]
+            }'>
+        </div>
         `);
     });
 
     afterEach(() => {
         clearDOM();
     });
 
-    it('connect and create map, marker and info window', async () => {
+    it('connect and create map, marker, polygon and info window', async () => {
         const div = getByTestId(container, 'map');
         expect(div).not.toHaveClass('connected');
 
@@ -73,12 +136,21 @@ describe('AbstractMapController', () => {
             { marker: 'marker', title: 'Paris' },
             { marker: 'marker', title: 'Lyon' },
         ]);
+        expect(controller.polygons).toEqual([
+            { polygon: 'polygon', title: 'Polygon 1' },
+            { polygon: 'polygon', title: 'Polygon 2' },
+        ]);
         expect(controller.infoWindows).toEqual([
             {
                 headerContent: '<b>Lyon</b>',
                 infoWindow: 'infoWindow',
                 marker: 'Lyon',
             },
+            {
+                headerContent: '<b>Polygon 2</b>',
+                infoWindow: 'infoWindow',
+                polygon: 'Polygon 2',
+            },
         ]);
     });
 });