add polyline support

Author: sblondeau

src/Map/assets/src/abstract_map_controller.ts

@@ -65,7 +65,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
     extra: Record<string, unknown>;
 };
 
-export default abstract class<
+export default abstract class <
     MapOptions,
     Map,
     MarkerOptions,
@@ -180,9 +180,9 @@ export default abstract class<
         element,
     }:
         | {
-              definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
-              element: Marker;
-          }
+            definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
+            element: Marker;
+        }
         | {
               definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
               element: Polygon;

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

@@ -120,7 +120,7 @@ class default_1 extends default_1$1 {
         const { points, title, infoWindow, rawOptions = {} } = definition;
         const polygon = new _google.maps.Polygon({
             ...rawOptions,
-            paths: points,
+            path: points,
             map: this.map,
         });
         if (title) {
@@ -182,6 +182,23 @@ class default_1 extends default_1$1 {
                 infoWindow.open({ map: this.map, anchor: element });
             }
         }
+        else if (element instanceof google.maps.Polyline) {
+            element.addListener('click', (event) => {
+                if (definition.autoClose) {
+                    this.closeInfoWindowsExcept(infoWindow);
+                }
+                infoWindow.setPosition(event.latLng);
+                infoWindow.open(this.map);
+            });
+            if (definition.opened) {
+                const bounds = new google.maps.LatLngBounds();
+                element.getPath().forEach((point) => {
+                    bounds.extend(point);
+                });
+                infoWindow.setPosition(bounds.getCenter());
+                infoWindow.open({ map: this.map, anchor: element });
+            }
+        }
         return infoWindow;
     }
     createTextOrElement(content) {

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

@@ -219,6 +219,23 @@ export default class extends AbstractMapController<
                 infoWindow.open(this.map);
             });
 
+            if (definition.opened) {
+                const bounds = new google.maps.LatLngBounds();
+                element.getPath().forEach((point: google.maps.LatLng) => {
+                    bounds.extend(point);
+                });
+                infoWindow.setPosition(bounds.getCenter());
+                infoWindow.open({ map: this.map, anchor: element });
+            }
+        } else if (element instanceof google.maps.Polyline) {
+            element.addListener('click', (event: any) => {
+                if (definition.autoClose) {
+                    this.closeInfoWindowsExcept(infoWindow);
+                }
+                infoWindow.setPosition(event.latLng);
+                infoWindow.open(this.map);
+            });
+
             if (definition.opened) {
                 const bounds = new google.maps.LatLngBounds();
                 element.getPath().forEach((point: google.maps.LatLng) => {

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

@@ -27,4 +27,4 @@ export default class extends AbstractMapController<MapOptions, typeof L.Map, Mar
     }): L.Popup;
     protected doFitBoundsToMarkers(): void;
 }
-export {};
+export { };

src/Map/src/Map.php

@@ -99,6 +99,12 @@ public function addPolygon(Polygon $polygon): self
 
         return $this;
     }
+    public function addPolyline(Polyline $polyline): self
+    {
+        $this->polylines[] = $polyline;
+
+        return $this;
+    }
 
     public function addPolyline(Polyline $polyline): self
     {

src/Map/src/Twig/MapRuntime.php

@@ -64,6 +64,9 @@ public function renderMap(
         foreach ($polylines ?? [] as $polyline) {
             $map->addPolyline(Polyline::fromArray($polyline));
         }
+        foreach ($polylines ?? [] as $polylines) {
+            $map->addPolyline(Polyline::fromArray($polylines));
+        }
         if (null !== $center) {
             $map->center(Point::fromArray($center));
         }

src/Map/src/Twig/UXMapComponent.php

@@ -11,8 +11,8 @@
 
 namespace Symfony\UX\Map\Twig;
 
-use Symfony\UX\Map\Marker;
 use Symfony\UX\Map\Point;
+use Symfony\UX\Map\Marker;
 use Symfony\UX\Map\Polygon;
 use Symfony\UX\Map\Polyline;
 
@@ -36,7 +36,6 @@ final class UXMapComponent
      * @var Polygon[]
      */
     public array $polygons;
-
     /**
      * @var Polyline[]
      */