[Map] Add options minZoom and maxZoom

src/Map/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.28
+
+-  Add `minZoom` and `maxZoom` options to `Map` to set the minimum and maximum zoom levels
+
 ## 2.27
 
 -   The `fitBoundsToMarkers` option is not overridden anymore when using the `Map` LiveComponent, but now respects the value you defined.

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

@@ -30,6 +30,8 @@ export type Icon = {
 export type MapDefinition<MapOptions, BridgeMapOptions> = {
     center: Point | null;
     zoom: number | null;
+    minZoom: number | null;
+    maxZoom: number | null;
     options: MapOptions;
     bridgeOptions?: BridgeMapOptions;
     extra: ExtraData;
@@ -92,6 +94,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
         providerOptions: ObjectConstructor;
         center: ObjectConstructor;
         zoom: NumberConstructor;
+        minZoom: NumberConstructor;
+        maxZoom: NumberConstructor;
         fitBoundsToMarkers: BooleanConstructor;
         markers: ArrayConstructor;
         polygons: ArrayConstructor;
@@ -103,6 +107,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
     };
     centerValue: Point | null;
     zoomValue: number | null;
+    minZoomValue: number | null;
+    maxZoomValue: number | null;
     fitBoundsToMarkersValue: boolean;
     markersValue: Array<MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>>;
     polygonsValue: Array<PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>>;
@@ -113,6 +119,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
     extraValue: Record<string, unknown>;
     hasCenterValue: boolean;
     hasZoomValue: boolean;
+    hasMinZoomValue: boolean;
+    hasMaxZoomValue: boolean;
     hasFitBoundsToMarkersValue: boolean;
     hasMarkersValue: boolean;
     hasPolygonsValue: boolean;
@@ -142,6 +150,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
     }): BridgeInfoWindow;
     abstract centerValueChanged(): void;
     abstract zoomValueChanged(): void;
+    abstract minZoomValueChanged(): void;
+    abstract maxZoomValueChanged(): void;
     markersValueChanged(): void;
     polygonsValueChanged(): void;
     polylinesValueChanged(): void;

src/Map/assets/dist/abstract_map_controller.js

@@ -21,6 +21,8 @@ class default_1 extends Controller {
         const mapDefinition = {
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
+            minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+            maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
             options: this.optionsValue,
             extra,
         };
@@ -126,6 +128,8 @@ default_1.values = {
     providerOptions: Object,
     center: Object,
     zoom: Number,
+    minZoom: Number,
+    maxZoom: Number,
     fitBoundsToMarkers: Boolean,
     markers: Array,
     polygons: Array,

src/Map/assets/src/abstract_map_controller.ts

@@ -42,6 +42,8 @@ export type Icon = {
 export type MapDefinition<MapOptions, BridgeMapOptions> = {
     center: Point | null;
     zoom: number | null;
+    minZoom: number | null;
+    maxZoom: number | null;
     options: MapOptions;
     /**
      * Additional options passed to the Map constructor.
@@ -221,6 +223,8 @@ export default abstract class<
         providerOptions: Object,
         center: Object,
         zoom: Number,
+        minZoom: Number,
+        maxZoom: Number,
         fitBoundsToMarkers: Boolean,
         markers: Array,
         polygons: Array,
@@ -233,6 +237,8 @@ export default abstract class<
 
     declare centerValue: Point | null;
     declare zoomValue: number | null;
+    declare minZoomValue: number | null;
+    declare maxZoomValue: number | null;
     declare fitBoundsToMarkersValue: boolean;
     declare markersValue: Array<MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>>;
     declare polygonsValue: Array<PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>>;
@@ -244,6 +250,8 @@ export default abstract class<
 
     declare hasCenterValue: boolean;
     declare hasZoomValue: boolean;
+    declare hasMinZoomValue: boolean;
+    declare hasMaxZoomValue: boolean;
     declare hasFitBoundsToMarkersValue: boolean;
     declare hasMarkersValue: boolean;
     declare hasPolygonsValue: boolean;
@@ -275,6 +283,8 @@ export default abstract class<
         const mapDefinition: MapDefinition<MapOptions, BridgeMapOptions> = {
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
+            minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+            maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
             options: this.optionsValue,
             extra,
         };
@@ -335,6 +345,10 @@ export default abstract class<
 
     public abstract zoomValueChanged(): void;
 
+    public abstract minZoomValueChanged(): void;
+
+    public abstract maxZoomValueChanged(): void;
+
     public markersValueChanged(): void {
         if (!this.isConnected) {
             return;

src/Map/doc/index.rst

@@ -90,6 +90,30 @@ You can set the center and zoom of the map using the ``center()`` and ``zoom()``
         ->fitBoundsToMarkers()
     ;
 
+Min and max zooms
+~~~~~~~~~~~~~~~~~
+
+.. versionadded:: 2.28
+
+    The ability to set min and max zooms was added in UX Map 2.28.
+
+You can set the minimum and maximum zoom levels of the map using the ``minZoom()`` and ``maxZoom()`` methods::
+
+    use Symfony\UX\Map\Map;
+    use Symfony\UX\Map\Point;
+
+    $map
+        ->center(new Point(46.903354, 1.888334))
+        ->zoom(6)
+        ->minZoom(3) // Set the minimum zoom level
+        ->maxZoom(10) // Set the maximum zoom level
+    ;
+
+.. warning::
+
+    Ensure ``zoom``, ``minZoom`` and ``maxZoom`` are compatible with each other (``minZoom <= zoom <= maxZoom``),
+    otherwise an exception will be thrown.
+
 Add markers
 ~~~~~~~~~~~
 

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

@@ -8,6 +8,8 @@ export default class extends AbstractMapController<MapOptions, google.maps.MapOp
     connect(): Promise<void>;
     centerValueChanged(): void;
     zoomValueChanged(): void;
+    minZoomValueChanged(): void;
+    maxZoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ definition }: {
         definition: MapDefinition<MapOptions, google.maps.MapOptions>;

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

@@ -22,6 +22,8 @@ class default_1 extends Controller {
         const mapDefinition = {
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
+            minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+            maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
             options: this.optionsValue,
             extra,
         };
@@ -127,6 +129,8 @@ default_1.values = {
     providerOptions: Object,
     center: Object,
     zoom: Number,
+    minZoom: Number,
+    maxZoom: Number,
     fitBoundsToMarkers: Boolean,
     markers: Array,
     polygons: Array,
@@ -187,6 +191,16 @@ class map_controller extends default_1 {
             this.map.setZoom(this.zoomValue);
         }
     }
+    minZoomValueChanged() {
+        if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+            this.map.setOptions({ minZoom: this.minZoomValue });
+        }
+    }
+    maxZoomValueChanged() {
+        if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+            this.map.setOptions({ maxZoom: this.maxZoomValue });
+        }
+    }
     dispatchEvent(name, payload = {}) {
         payload.google = _google;
         this.dispatch(name, {
@@ -195,14 +209,16 @@ class map_controller extends default_1 {
         });
     }
     doCreateMap({ definition }) {
-        const { center, zoom, options, bridgeOptions = {} } = definition;
+        const { center, zoom, minZoom, maxZoom, 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, {
             center,
             zoom,
+            minZoom,
+            maxZoom,
             ...options,
             ...bridgeOptions,
         });

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

@@ -127,6 +127,18 @@ export default class extends AbstractMapController<
         }
     }
 
+    public minZoomValueChanged(): void {
+        if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+            this.map.setOptions({ minZoom: this.minZoomValue });
+        }
+    }
+
+    public maxZoomValueChanged(): void {
+        if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+            this.map.setOptions({ maxZoom: this.maxZoomValue });
+        }
+    }
+
     protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
         payload.google = _google;
         this.dispatch(name, {
@@ -136,7 +148,7 @@ export default class extends AbstractMapController<
     }
 
     protected doCreateMap({ definition }: { definition: MapDefinition<MapOptions, google.maps.MapOptions> }): google.maps.Map {
-        const { center, zoom, options, bridgeOptions = {} } = definition;
+        const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
 
         // We assume the following control options are enabled if their options are set
         options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
@@ -147,6 +159,8 @@ export default class extends AbstractMapController<
         return new _google.maps.Map(this.element, {
             center,
             zoom,
+            minZoom,
+            maxZoom,
             ...options,
             ...bridgeOptions,
         });

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

@@ -26,6 +26,8 @@ export default class extends AbstractMapController<MapOptions, LeafletMapOptions
     connect(): void;
     centerValueChanged(): void;
     zoomValueChanged(): void;
+    minZoomValueChanged(): void;
+    maxZoomValueChanged(): void;
     protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
     protected doCreateMap({ definition }: {
         definition: MapDefinition<MapOptions, LeafletMapOptions>;

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

@@ -23,6 +23,8 @@ class default_1 extends Controller {
         const mapDefinition = {
             center: this.hasCenterValue ? this.centerValue : null,
             zoom: this.hasZoomValue ? this.zoomValue : null,
+            minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
+            maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
             options: this.optionsValue,
             extra,
         };
@@ -128,6 +130,8 @@ default_1.values = {
     providerOptions: Object,
     center: Object,
     zoom: Number,
+    minZoom: Number,
+    maxZoom: Number,
     fitBoundsToMarkers: Boolean,
     markers: Array,
     polygons: Array,
@@ -159,6 +163,16 @@ class map_controller extends default_1 {
             this.map.setZoom(this.zoomValue);
         }
     }
+    minZoomValueChanged() {
+        if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+            this.map.setMinZoom(this.minZoomValue);
+        }
+    }
+    maxZoomValueChanged() {
+        if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+            this.map.setMaxZoom(this.maxZoomValue);
+        }
+    }
     dispatchEvent(name, payload = {}) {
         payload.L = L;
         this.dispatch(name, {
@@ -167,10 +181,12 @@ class map_controller extends default_1 {
         });
     }
     doCreateMap({ definition }) {
-        const { center, zoom, options, bridgeOptions = {} } = definition;
+        const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
         const map = L.map(this.element, {
             center: center === null ? undefined : center,
             zoom: zoom === null ? undefined : zoom,
+            minZoom: minZoom === null ? undefined : minZoom,
+            maxZoom: maxZoom === null ? undefined : maxZoom,
             attributionControl: false,
             zoomControl: false,
             ...options,

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

@@ -87,6 +87,18 @@ export default class extends AbstractMapController<
         }
     }
 
+    public minZoomValueChanged(): void {
+        if (this.map && this.hasMinZoomValue && this.minZoomValue) {
+            this.map.setMinZoom(this.minZoomValue);
+        }
+    }
+
+    public maxZoomValueChanged(): void {
+        if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
+            this.map.setMaxZoom(this.maxZoomValue);
+        }
+    }
+
     protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
         payload.L = L;
         this.dispatch(name, {
@@ -96,11 +108,13 @@ export default class extends AbstractMapController<
     }
 
     protected doCreateMap({ definition }: { definition: MapDefinition<MapOptions, LeafletMapOptions> }): L.Map {
-        const { center, zoom, options, bridgeOptions = {} } = definition;
+        const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
 
         const map = L.map(this.element, {
             center: center === null ? undefined : center,
             zoom: zoom === null ? undefined : zoom,
+            minZoom: minZoom === null ? undefined : minZoom,
+            maxZoom: maxZoom === null ? undefined : maxZoom,
             attributionControl: false,
             zoomControl: false,
             ...options,