[Map] Allows Map options customization in ux:map:pre-connect event (e.g.: zoom, options, bridgeOptions...)

Author: Kocal

src/Map/CHANGELOG.md

@@ -23,6 +23,22 @@ $map->addRectangle(new Rectangle(
 ```
 
 -   Deprecate property `rawOptions` from `ux:map:*:before-create` events, in favor of `bridgeOptions` instead.
+-   Map options can now be configured and overridden through the `ux:map:pre-connect` event:
+```js
+this.element.addEventListener('ux:map:pre-connect', (event) => {
+    // Override the map center and zoom
+    event.detail.zoom = 10;
+    event.detail.center = { lat: 48.856613, lng: 2.352222 };
+
+    // Override the normalized `*Options` PHP classes (e.g. `GoogleMapOptions` or `LeafletMapOptions`)
+    console.log(event.detail.options);
+
+    // Override the options specific to the renderer bridge (e.g. `google.maps.MapOptions` or `L.MapOptions`)
+    event.detail.bridgeOptions = {
+        // ...
+    };
+});
+```
 
 ## 2.26
 

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

@@ -26,6 +26,12 @@ export type Icon = {
     type: typeof IconTypes.Svg;
     html: string;
 });
+export type MapDefinition<MapOptions, BridgeMapOptions> = {
+    center: Point | null;
+    zoom: number | null;
+    options: MapOptions;
+    bridgeOptions?: BridgeMapOptions;
+};
 export type MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions> = WithIdentifier<{
     position: Point;
     title: string | null;
@@ -79,7 +85,7 @@ export type InfoWindowDefinition<BridgeInfoWindowOptions> = {
     bridgeOptions?: BridgeInfoWindowOptions;
     extra: Record<string, unknown>;
 };
-export default abstract class<MapOptions, BridgeMap, BridgeMarkerOptions, BridgeMarker, BridgeInfoWindowOptions, BridgeInfoWindow, BridgePolygonOptions, BridgePolygon, BridgePolylineOptions, BridgePolyline, BridgeCircleOptions, BridgeCircle, BridgeRectangleOptions, BridgeRectangle> extends Controller<HTMLElement> {
+export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMarkerOptions, BridgeMarker, BridgeInfoWindowOptions, BridgeInfoWindow, BridgePolygonOptions, BridgePolygon, BridgePolylineOptions, BridgePolyline, BridgeCircleOptions, BridgeCircle, BridgeRectangleOptions, BridgeRectangle> extends Controller<HTMLElement> {
     static values: {
         providerOptions: ObjectConstructor;
         center: ObjectConstructor;
@@ -136,10 +142,8 @@ export default abstract class<MapOptions, BridgeMap, BridgeMarkerOptions, Bridge
     polylinesValueChanged(): void;
     circlesValueChanged(): void;
     rectanglesValueChanged(): void;
-    protected abstract doCreateMap({ center, zoom, options }: {
-        center: Point | null;
-        zoom: number | null;
-        options: MapOptions;
+    protected abstract doCreateMap({ definition }: {
+        definition: MapDefinition<MapOptions, BridgeMapOptions>;
     }): BridgeMap;
     protected abstract doFitBoundsToMarkers(): void;
     protected abstract doCreateMarker({ definition }: {

src/Map/assets/dist/abstract_map_controller.js

@@ -17,18 +17,18 @@ class default_1 extends Controller {
         this.isConnected = false;
     }
     connect() {
-        const options = this.optionsValue;
-        this.dispatchEvent('pre-connect', { options });
+        const mapDefinition = {
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options: this.optionsValue,
+        };
+        this.dispatchEvent('pre-connect', mapDefinition);
         this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
         this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
         this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
         this.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
         this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this));
-        this.map = this.doCreateMap({
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options,
-        });
+        this.map = this.doCreateMap({ definition: mapDefinition });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));

src/Map/assets/src/abstract_map_controller.ts

@@ -37,6 +37,17 @@ export type Icon = {
       }
 );
 
+export type MapDefinition<MapOptions, BridgeMapOptions> = {
+    center: Point | null;
+    zoom: number | null;
+    options: MapOptions;
+    /**
+     * Additional options passed to the Map constructor.
+     * These options are specific to the Map Bridge, and can be defined through `ux:map:pre-connect` event.
+     */
+    bridgeOptions?: BridgeMapOptions;
+};
+
 export type MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions> = WithIdentifier<{
     position: Point;
     title: string | null;
@@ -182,6 +193,7 @@ export type InfoWindowDefinition<BridgeInfoWindowOptions> = {
 
 export default abstract class<
     MapOptions, // Normalized `*Options` PHP class from Bridge (to not be confused with the JS Map class options)
+    BridgeMapOptions, // The options for the JavaScript Map class from Bridge
     BridgeMap, // The JavaScript Map class from Bridge (e.g.: `L.Map` for Leaflet, `google.maps.Map` for Google Maps)
     BridgeMarkerOptions, // The options for the JavaScript Marker class from Bridge
     BridgeMarker, // The JavaScript Marker class from Bridge
@@ -247,21 +259,20 @@ export default abstract class<
     protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
 
     connect() {
-        const options = this.optionsValue;
-
-        this.dispatchEvent('pre-connect', { options });
+        const mapDefinition: MapDefinition<MapOptions, BridgeMapOptions> = {
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options: this.optionsValue,
+        };
+        this.dispatchEvent('pre-connect', mapDefinition);
 
         this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
         this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
         this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
         this.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
         this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this));
 
-        this.map = this.doCreateMap({
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options,
-        });
+        this.map = this.doCreateMap({ definition: mapDefinition });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
@@ -356,7 +367,7 @@ export default abstract class<
     //endregion
 
     //region Abstract factory methods to be implemented by the concrete classes, they are specific to the map provider
-    protected abstract doCreateMap({ center, zoom, options }: { center: Point | null; zoom: number | null; options: MapOptions }): BridgeMap;
+    protected abstract doCreateMap({ definition }: { definition: MapDefinition<MapOptions, BridgeMapOptions> }): BridgeMap;
 
     protected abstract doFitBoundsToMarkers(): void;
 

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

@@ -12,8 +12,8 @@ class MyMapController extends AbstractMapController {
         });
     }
 
-    doCreateMap({ center, zoom, options }) {
-        return { map: 'map', center, zoom, options };
+    doCreateMap({ definition }) {
+        return { map: 'map', center: definition.center, zoom: definition.zoom, options: definition.options };
     }
 
     doCreateMarker({ definition }) {

src/Map/doc/index.rst

@@ -33,7 +33,7 @@ Configuration is done in your ``config/packages/ux_map.yaml`` file:
             # without to manually configure it in each map instance (through "new GoogleOptions(mapId: 'your_map_id')").
             default_map_id: null
 
-The ``UX_MAP_DSN`` environment variable configure which renderer to use.
+The ``UX_MAP_DSN`` environment variable configure which renderer (Bridge) to use.
 
 Map renderers
 ~~~~~~~~~~~~~
@@ -383,7 +383,19 @@ Symfony UX Map allows you to extend its default behavior using a custom Stimulus
          * You can use this event to configure the map before it is created
          */
         _onPreConnect(event) {
+            // You can read or write the zoom level
+            console.log(event.detail.zoom);
+
+            console.log(event.detail.center);
+
+            // You can read or write map options, specific to the Bridge, it represents the normalized `*Options` PHP class (e.g. `GoogleOptions`, `LeafletOptions`)
             console.log(event.detail.options);
+
+            // Finally, you can also set Bridge-specific options that will be used when creating the map.
+            event.detail.bridgeOptions = {
+                preferCanvas: true, // e.g. for Leaflet (https://leafletjs.com/reference.html#map-prefercanvas)
+                backgroundColor: '#f0f0f0', // e.g. for Google Maps (https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.backgroundColor)
+            }
         }
 
         /**

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

@@ -1,19 +1,16 @@
 import type { LoaderOptions } from '@googlemaps/js-api-loader';
-import type { CircleDefinition, Icon, InfoWindowDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
+import type { CircleDefinition, Icon, InfoWindowDefinition, MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
 import AbstractMapController 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, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
+export default class extends AbstractMapController<MapOptions, google.maps.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, google.maps.CircleOptions, google.maps.Circle, google.maps.RectangleOptions, google.maps.Rectangle> {
     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;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
-    protected doCreateMap({ center, zoom, options }: {
-        center: Point | null;
-        zoom: number | null;
-        options: MapOptions;
+    protected doCreateMap({ definition }: {
+        definition: MapDefinition<MapOptions, google.maps.MapOptions>;
     }): google.maps.Map;
     protected doCreateMarker({ definition, }: {
         definition: MarkerDefinition<google.maps.marker.AdvancedMarkerElementOptions, google.maps.InfoWindowOptions>;

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

@@ -18,18 +18,18 @@ class default_1 extends Controller {
         this.isConnected = false;
     }
     connect() {
-        const options = this.optionsValue;
-        this.dispatchEvent('pre-connect', { options });
+        const mapDefinition = {
+            center: this.hasCenterValue ? this.centerValue : null,
+            zoom: this.hasZoomValue ? this.zoomValue : null,
+            options: this.optionsValue,
+        };
+        this.dispatchEvent('pre-connect', mapDefinition);
         this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
         this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
         this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
         this.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this));
         this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this));
-        this.map = this.doCreateMap({
-            center: this.hasCenterValue ? this.centerValue : null,
-            zoom: this.hasZoomValue ? this.zoomValue : null,
-            options,
-        });
+        this.map = this.doCreateMap({ definition: mapDefinition });
         this.markersValue.forEach((definition) => this.createMarker({ definition }));
         this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
         this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
@@ -184,23 +184,23 @@ class map_controller extends default_1 {
         }
     }
     dispatchEvent(name, payload = {}) {
+        payload.google = _google;
         this.dispatch(name, {
             prefix: 'ux:map',
-            detail: {
-                ...payload,
-                google: _google,
-            },
+            detail: payload,
         });
     }
-    doCreateMap({ center, zoom, options }) {
+    doCreateMap({ definition }) {
+        const { center, zoom, options, bridgeOptions = {} } = definition;
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
         options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
         options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
         return new _google.maps.Map(this.element, {
-            ...options,
             center,
             zoom,
+            ...options,
+            ...bridgeOptions,
         });
     }
     doCreateMarker({ definition, }) {

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

@@ -13,8 +13,8 @@ import type {
     CircleDefinition,
     Icon,
     InfoWindowDefinition,
+    MapDefinition,
     MarkerDefinition,
-    Point,
     PolygonDefinition,
     PolylineDefinition,
     RectangleDefinition,
@@ -48,6 +48,7 @@ const parser = new DOMParser();
 
 export default class extends AbstractMapController<
     MapOptions,
+    google.maps.MapOptions,
     google.maps.Map,
     google.maps.marker.AdvancedMarkerElementOptions,
     google.maps.marker.AdvancedMarkerElement,
@@ -66,8 +67,6 @@ export default class extends AbstractMapController<
 
     declare map: google.maps.Map;
 
-    public parser: DOMParser;
-
     async connect() {
         const onLoaded = () => super.connect();
 
@@ -129,26 +128,27 @@ export default class extends AbstractMapController<
     }
 
     protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
+        payload.google = _google;
         this.dispatch(name, {
             prefix: 'ux:map',
-            detail: {
-                ...payload,
-                google: _google,
-            },
+            detail: payload,
         });
     }
 
-    protected doCreateMap({ center, zoom, options }: { center: Point | null; zoom: number | null; options: MapOptions }): google.maps.Map {
+    protected doCreateMap({ definition }: { definition: MapDefinition<MapOptions, google.maps.MapOptions> }): google.maps.Map {
+        const { center, zoom, options, bridgeOptions = {} } = definition;
+
         // We assume the following control options are enabled if their options are set
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
         options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
         options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
 
         return new _google.maps.Map(this.element, {
-            ...options,
             center,
             zoom,
+            ...options,
+            ...bridgeOptions,
         });
     }
 

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

@@ -1,9 +1,9 @@
-import type { CircleDefinition, Icon, InfoWindowDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
+import type { CircleDefinition, Icon, InfoWindowDefinition, MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map';
 import AbstractMapController from '@symfony/ux-map';
 import 'leaflet/dist/leaflet.min.css';
 import type { CircleOptions, ControlPosition, MapOptions as LeafletMapOptions, MarkerOptions, PolylineOptions as PolygonOptions, PolylineOptions, PopupOptions, PolylineOptions as RectangleOptions } from 'leaflet';
 import * as L from 'leaflet';
-type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom' | 'attributionControl' | 'zoomControl'> & {
+type MapOptions = Pick<LeafletMapOptions, 'attributionControl' | 'zoomControl'> & {
     attributionControlOptions?: {
         position: ControlPosition;
         prefix: string | false;
@@ -21,16 +21,14 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom' | 'attributionContro
         options: Record<string, unknown>;
     } | false;
 };
-export default class extends AbstractMapController<MapOptions, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolygonOptions, L.Polygon, PolylineOptions, L.Polyline, CircleOptions, L.Circle, RectangleOptions, L.Rectangle> {
+export default class extends AbstractMapController<MapOptions, LeafletMapOptions, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolygonOptions, L.Polygon, PolylineOptions, L.Polyline, CircleOptions, L.Circle, RectangleOptions, L.Rectangle> {
     map: L.Map;
     connect(): void;
     centerValueChanged(): void;
     zoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
-    protected doCreateMap({ center, zoom, options }: {
-        center: Point | null;
-        zoom: number | null;
-        options: MapOptions;
+    protected doCreateMap({ definition }: {
+        definition: MapDefinition<MapOptions, LeafletMapOptions>;
     }): L.Map;
     protected doCreateMarker({ definition }: {
         definition: MarkerDefinition<MarkerOptions, PopupOptions>;