Skip to content

Commit 9e5f700

Browse files
KocalKocal
committed
feature #2896 [Map] Add options minZoom and maxZoom (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- [Map] Add options `minZoom` and `maxZoom` | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes <!-- please update src/**/CHANGELOG.md files --> | Docs? | yes <!-- required for new features --> | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Update/add documentation as required (we can help!) - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Replace #2520, and added `@nina`-alin as co-author since she started the feature. Commits ------- d734f5f [Map] Add options `minZoom` and `maxZoom`
2 parents 550a683 + d734f5f commit 9e5f700

File tree

15 files changed

+213
-6
lines changed

15 files changed

+213
-6
lines changed

‎src/Map/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# CHANGELOG
22

3+
## 2.28
4+
5+
- Add `minZoom` and `maxZoom` options to `Map` to set the minimum and maximum zoom levels
6+
37
## 2.27
48

59
- 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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export type Icon = {
3030
export type MapDefinition<MapOptions, BridgeMapOptions> = {
3131
center: Point | null;
3232
zoom: number | null;
33+
minZoom: number | null;
34+
maxZoom: number | null;
3335
options: MapOptions;
3436
bridgeOptions?: BridgeMapOptions;
3537
extra: ExtraData;
@@ -92,6 +94,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
9294
providerOptions: ObjectConstructor;
9395
center: ObjectConstructor;
9496
zoom: NumberConstructor;
97+
minZoom: NumberConstructor;
98+
maxZoom: NumberConstructor;
9599
fitBoundsToMarkers: BooleanConstructor;
96100
markers: ArrayConstructor;
97101
polygons: ArrayConstructor;
@@ -103,6 +107,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
103107
};
104108
centerValue: Point | null;
105109
zoomValue: number | null;
110+
minZoomValue: number | null;
111+
maxZoomValue: number | null;
106112
fitBoundsToMarkersValue: boolean;
107113
markersValue: Array<MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>>;
108114
polygonsValue: Array<PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>>;
@@ -113,6 +119,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
113119
extraValue: Record<string, unknown>;
114120
hasCenterValue: boolean;
115121
hasZoomValue: boolean;
122+
hasMinZoomValue: boolean;
123+
hasMaxZoomValue: boolean;
116124
hasFitBoundsToMarkersValue: boolean;
117125
hasMarkersValue: boolean;
118126
hasPolygonsValue: boolean;
@@ -142,6 +150,8 @@ export default abstract class<MapOptions, BridgeMapOptions, BridgeMap, BridgeMar
142150
}): BridgeInfoWindow;
143151
abstract centerValueChanged(): void;
144152
abstract zoomValueChanged(): void;
153+
abstract minZoomValueChanged(): void;
154+
abstract maxZoomValueChanged(): void;
145155
markersValueChanged(): void;
146156
polygonsValueChanged(): void;
147157
polylinesValueChanged(): void;

‎src/Map/assets/dist/abstract_map_controller.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ class default_1 extends Controller {
2121
const mapDefinition = {
2222
center: this.hasCenterValue ? this.centerValue : null,
2323
zoom: this.hasZoomValue ? this.zoomValue : null,
24+
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
25+
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
2426
options: this.optionsValue,
2527
extra,
2628
};
@@ -126,6 +128,8 @@ default_1.values = {
126128
providerOptions: Object,
127129
center: Object,
128130
zoom: Number,
131+
minZoom: Number,
132+
maxZoom: Number,
129133
fitBoundsToMarkers: Boolean,
130134
markers: Array,
131135
polygons: Array,

‎src/Map/assets/src/abstract_map_controller.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export type Icon = {
4242
export type MapDefinition<MapOptions, BridgeMapOptions> = {
4343
center: Point | null;
4444
zoom: number | null;
45+
minZoom: number | null;
46+
maxZoom: number | null;
4547
options: MapOptions;
4648
/**
4749
* Additional options passed to the Map constructor.
@@ -221,6 +223,8 @@ export default abstract class<
221223
providerOptions: Object,
222224
center: Object,
223225
zoom: Number,
226+
minZoom: Number,
227+
maxZoom: Number,
224228
fitBoundsToMarkers: Boolean,
225229
markers: Array,
226230
polygons: Array,
@@ -233,6 +237,8 @@ export default abstract class<
233237

234238
declare centerValue: Point | null;
235239
declare zoomValue: number | null;
240+
declare minZoomValue: number | null;
241+
declare maxZoomValue: number | null;
236242
declare fitBoundsToMarkersValue: boolean;
237243
declare markersValue: Array<MarkerDefinition<BridgeMarkerOptions, BridgeInfoWindowOptions>>;
238244
declare polygonsValue: Array<PolygonDefinition<BridgePolygonOptions, BridgeInfoWindowOptions>>;
@@ -244,6 +250,8 @@ export default abstract class<
244250

245251
declare hasCenterValue: boolean;
246252
declare hasZoomValue: boolean;
253+
declare hasMinZoomValue: boolean;
254+
declare hasMaxZoomValue: boolean;
247255
declare hasFitBoundsToMarkersValue: boolean;
248256
declare hasMarkersValue: boolean;
249257
declare hasPolygonsValue: boolean;
@@ -275,6 +283,8 @@ export default abstract class<
275283
const mapDefinition: MapDefinition<MapOptions, BridgeMapOptions> = {
276284
center: this.hasCenterValue ? this.centerValue : null,
277285
zoom: this.hasZoomValue ? this.zoomValue : null,
286+
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
287+
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
278288
options: this.optionsValue,
279289
extra,
280290
};
@@ -335,6 +345,10 @@ export default abstract class<
335345

336346
public abstract zoomValueChanged(): void;
337347

348+
public abstract minZoomValueChanged(): void;
349+
350+
public abstract maxZoomValueChanged(): void;
351+
338352
public markersValueChanged(): void {
339353
if (!this.isConnected) {
340354
return;

‎src/Map/doc/index.rst

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,30 @@ You can set the center and zoom of the map using the ``center()`` and ``zoom()``
9090
->fitBoundsToMarkers()
9191
;
9292

93+
Min and max zooms
94+
~~~~~~~~~~~~~~~~~
95+
96+
.. versionadded:: 2.28
97+
98+
The ability to set min and max zooms was added in UX Map 2.28.
99+
100+
You can set the minimum and maximum zoom levels of the map using the ``minZoom()`` and ``maxZoom()`` methods::
101+
102+
use Symfony\UX\Map\Map;
103+
use Symfony\UX\Map\Point;
104+
105+
$map
106+
->center(new Point(46.903354, 1.888334))
107+
->zoom(6)
108+
->minZoom(3) // Set the minimum zoom level
109+
->maxZoom(10) // Set the maximum zoom level
110+
;
111+
112+
.. warning::
113+
114+
Ensure ``zoom``, ``minZoom`` and ``maxZoom`` are compatible with each other (``minZoom <= zoom <= maxZoom``),
115+
otherwise an exception will be thrown.
116+
93117
Add markers
94118
~~~~~~~~~~~
95119

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export default class extends AbstractMapController<MapOptions, google.maps.MapOp
88
connect(): Promise<void>;
99
centerValueChanged(): void;
1010
zoomValueChanged(): void;
11+
minZoomValueChanged(): void;
12+
maxZoomValueChanged(): void;
1113
protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
1214
protected doCreateMap({ definition }: {
1315
definition: MapDefinition<MapOptions, google.maps.MapOptions>;

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ class default_1 extends Controller {
2222
const mapDefinition = {
2323
center: this.hasCenterValue ? this.centerValue : null,
2424
zoom: this.hasZoomValue ? this.zoomValue : null,
25+
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
26+
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
2527
options: this.optionsValue,
2628
extra,
2729
};
@@ -127,6 +129,8 @@ default_1.values = {
127129
providerOptions: Object,
128130
center: Object,
129131
zoom: Number,
132+
minZoom: Number,
133+
maxZoom: Number,
130134
fitBoundsToMarkers: Boolean,
131135
markers: Array,
132136
polygons: Array,
@@ -187,6 +191,16 @@ class map_controller extends default_1 {
187191
this.map.setZoom(this.zoomValue);
188192
}
189193
}
194+
minZoomValueChanged() {
195+
if (this.map && this.hasMinZoomValue && this.minZoomValue) {
196+
this.map.setOptions({ minZoom: this.minZoomValue });
197+
}
198+
}
199+
maxZoomValueChanged() {
200+
if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
201+
this.map.setOptions({ maxZoom: this.maxZoomValue });
202+
}
203+
}
190204
dispatchEvent(name, payload = {}) {
191205
payload.google = _google;
192206
this.dispatch(name, {
@@ -195,14 +209,16 @@ class map_controller extends default_1 {
195209
});
196210
}
197211
doCreateMap({ definition }) {
198-
const { center, zoom, options, bridgeOptions = {} } = definition;
212+
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
199213
options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
200214
options.mapTypeControl = typeof options.mapTypeControlOptions !== 'undefined';
201215
options.streetViewControl = typeof options.streetViewControlOptions !== 'undefined';
202216
options.fullscreenControl = typeof options.fullscreenControlOptions !== 'undefined';
203217
return new _google.maps.Map(this.element, {
204218
center,
205219
zoom,
220+
minZoom,
221+
maxZoom,
206222
...options,
207223
...bridgeOptions,
208224
});

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,18 @@ export default class extends AbstractMapController<
127127
}
128128
}
129129

130+
public minZoomValueChanged(): void {
131+
if (this.map && this.hasMinZoomValue && this.minZoomValue) {
132+
this.map.setOptions({ minZoom: this.minZoomValue });
133+
}
134+
}
135+
136+
public maxZoomValueChanged(): void {
137+
if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
138+
this.map.setOptions({ maxZoom: this.maxZoomValue });
139+
}
140+
}
141+
130142
protected dispatchEvent(name: string, payload: Record<string, unknown> = {}): void {
131143
payload.google = _google;
132144
this.dispatch(name, {
@@ -136,7 +148,7 @@ export default class extends AbstractMapController<
136148
}
137149

138150
protected doCreateMap({ definition }: { definition: MapDefinition<MapOptions, google.maps.MapOptions> }): google.maps.Map {
139-
const { center, zoom, options, bridgeOptions = {} } = definition;
151+
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
140152

141153
// We assume the following control options are enabled if their options are set
142154
options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
@@ -147,6 +159,8 @@ export default class extends AbstractMapController<
147159
return new _google.maps.Map(this.element, {
148160
center,
149161
zoom,
162+
minZoom,
163+
maxZoom,
150164
...options,
151165
...bridgeOptions,
152166
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export default class extends AbstractMapController<MapOptions, LeafletMapOptions
2626
connect(): void;
2727
centerValueChanged(): void;
2828
zoomValueChanged(): void;
29+
minZoomValueChanged(): void;
30+
maxZoomValueChanged(): void;
2931
protected dispatchEvent(name: string, payload?: Record<string, unknown>): void;
3032
protected doCreateMap({ definition }: {
3133
definition: MapDefinition<MapOptions, LeafletMapOptions>;

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ class default_1 extends Controller {
2323
const mapDefinition = {
2424
center: this.hasCenterValue ? this.centerValue : null,
2525
zoom: this.hasZoomValue ? this.zoomValue : null,
26+
minZoom: this.hasMinZoomValue ? this.minZoomValue : null,
27+
maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null,
2628
options: this.optionsValue,
2729
extra,
2830
};
@@ -128,6 +130,8 @@ default_1.values = {
128130
providerOptions: Object,
129131
center: Object,
130132
zoom: Number,
133+
minZoom: Number,
134+
maxZoom: Number,
131135
fitBoundsToMarkers: Boolean,
132136
markers: Array,
133137
polygons: Array,
@@ -159,6 +163,16 @@ class map_controller extends default_1 {
159163
this.map.setZoom(this.zoomValue);
160164
}
161165
}
166+
minZoomValueChanged() {
167+
if (this.map && this.hasMinZoomValue && this.minZoomValue) {
168+
this.map.setMinZoom(this.minZoomValue);
169+
}
170+
}
171+
maxZoomValueChanged() {
172+
if (this.map && this.hasMaxZoomValue && this.maxZoomValue) {
173+
this.map.setMaxZoom(this.maxZoomValue);
174+
}
175+
}
162176
dispatchEvent(name, payload = {}) {
163177
payload.L = L;
164178
this.dispatch(name, {
@@ -167,10 +181,12 @@ class map_controller extends default_1 {
167181
});
168182
}
169183
doCreateMap({ definition }) {
170-
const { center, zoom, options, bridgeOptions = {} } = definition;
184+
const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition;
171185
const map = L.map(this.element, {
172186
center: center === null ? undefined : center,
173187
zoom: zoom === null ? undefined : zoom,
188+
minZoom: minZoom === null ? undefined : minZoom,
189+
maxZoom: maxZoom === null ? undefined : maxZoom,
174190
attributionControl: false,
175191
zoomControl: false,
176192
...options,

0 commit comments

Comments
 (0)