[Map] Add the possibility to not configure map zoom/center if fit bounds to markers

Author: Kocal

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

@@ -4,8 +4,8 @@ export type Point = {
     lng: number;
 };
 export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
-    center: Point;
-    zoom: number;
+    center: Point | null;
+    zoom: number | null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     options: Options;
@@ -38,8 +38,8 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
     initialize(): void;
     connect(): void;
     protected abstract doCreateMap({ center, zoom, options, }: {
-        center: Point;
-        zoom: number;
+        center: Point | null;
+        zoom: number | null;
         options: MapOptions;
     }): Map;
     createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;

src/Map/assets/src/abstract_map_controller.ts

@@ -3,8 +3,8 @@ import { Controller } from '@hotwired/stimulus';
 export type Point = { lat: number; lng: number };
 
 export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
-    center: Point;
-    zoom: number;
+    center: Point|null;
+    zoom: number|null;
     fitBoundsToMarkers: boolean;
     markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
     options: Options;
@@ -93,8 +93,8 @@ export default abstract class<
         zoom,
         options,
     }: {
-        center: Point;
-        zoom: number;
+        center: Point|null;
+        zoom: number|null;
         options: MapOptions;
     }): Map;
 

src/Map/doc/index.rst

@@ -78,8 +78,11 @@ A map is created by calling ``new Map()``. You can configure the center, zoom, a
         {
             // 1. Create a new map instance
             $myMap = (new Map());
+                // Explicitly set the center and zoom
                 ->center(new Point(46.903354, 1.888334))
                 ->zoom(6)
+                // Or automatically fit the bounds to the markers
+                ->fitBoundsToMarkers()
             ;
     
             // 2. You can add markers

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

@@ -13,8 +13,8 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
 export default class extends AbstractMapController<MapOptions, typeof LeafletMap, MarkerOptions, Marker, Popup, PopupOptions> {
     connect(): void;
     protected doCreateMap({ center, zoom, options }: {
-        center: Point;
-        zoom: number;
+        center: Point | null;
+        zoom: number | null;
         options: MapOptions;
     }): LeafletMap;
     protected doCreateMarker(definition: MarkerDefinition): Marker;

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

@@ -16,8 +16,8 @@ class map_controller extends AbstractMapController {
     doCreateMap({ center, zoom, options }) {
         const map$1 = map(this.element, {
             ...options,
-            center,
-            zoom,
+            center: center === null ? undefined : center,
+            zoom: zoom === null ? undefined : zoom,
         });
         tileLayer(options.tileLayer.url, {
             attribution: options.tileLayer.attribution,

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

@@ -35,11 +35,11 @@ export default class extends AbstractMapController<
         super.connect();
     }
 
-    protected doCreateMap({ center, zoom, options }: { center: Point; zoom: number; options: MapOptions }): LeafletMap {
+    protected doCreateMap({ center, zoom, options }: { center: Point|null; zoom: number|null; options: MapOptions }): LeafletMap {
         const map = createMap(this.element, {
             ...options,
-            center,
-            zoom,
+            center: center === null ? undefined : center,
+            zoom: zoom === null ? undefined : zoom,
         });
 
         createTileLayer(options.tileLayer.url, {

src/Map/src/Map.php

@@ -85,16 +85,18 @@ public function addMarker(Marker $marker): self
 
     public function toArray(): array
     {
-        if (null === $this->center) {
-            throw new InvalidArgumentException('The center of the map must be set.');
-        }
-
-        if (null === $this->zoom) {
-            throw new InvalidArgumentException('The zoom of the map must be set.');
+        if (!$this->fitBoundsToMarkers) {
+            if (null === $this->center) {
+                throw new InvalidArgumentException('The map "center" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
+            }
+
+            if (null === $this->zoom) {
+                throw new InvalidArgumentException('The map "zoom" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
+            }
         }
 
         return [
-            'center' => $this->center->toArray(),
+            'center' => $this->center?->toArray(),
             'zoom' => $this->zoom,
             'fitBoundsToMarkers' => $this->fitBoundsToMarkers,
             'options' => (object) ($this->options?->toArray() ?? []),

src/Map/tests/MapTest.php

@@ -24,7 +24,7 @@ class MapTest extends TestCase
     public function testCenterValidation(): void
     {
         self::expectException(InvalidArgumentException::class);
-        self::expectExceptionMessage('The center of the map must be set.');
+        self::expectExceptionMessage('The map "center" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
 
         $map = new Map();
         $map->toArray();
@@ -33,14 +33,31 @@ public function testCenterValidation(): void
     public function testZoomValidation(): void
     {
         self::expectException(InvalidArgumentException::class);
-        self::expectExceptionMessage('The zoom of the map must be set.');
+        self::expectExceptionMessage('The map "zoom" must be explicitly set when not enabling "fitBoundsToMarkers" feature.');
 
         $map = new Map(
             center: new Point(48.8566, 2.3522)
         );
         $map->toArray();
     }
 
+    public function testZoomAndCenterCanBeOmittedIfFitBoundsToMarkers(): void
+    {
+        $map = new Map(
+            fitBoundsToMarkers: true
+        );
+
+        $array = $map->toArray();
+
+        self::assertSame([
+            'center' => null,
+            'zoom' => null,
+            'fitBoundsToMarkers' => true,
+            'options' => $array['options'],
+            'markers' => [],
+        ], $array);
+    }
+
     public function testWithMinimumConfiguration(): void
     {
         $map = new Map();