Zoom
Scope
The Zoom plugin offers functionality regarding map zooming.
Configuration
The Zoom plugin offers a plus/minus button, and will adjust itself to the map's zoom settings on initialization.
It can be configured as followed.
| fieldName | type | description |
|---|---|---|
| renderType | 'iconMenu' | 'independent'? | Whether the zoom related buttons are being rendered independently or as part of the IconMenu. Defaults to 'independent'. |
| showMobile | boolean? | Whether the zoom related buttons should be displayed on smaller devices; defaults to false. |
| showZoomSlider | boolean? | Whether a zoom slider should be displayed under the zoom buttons. Won't be rendered on smaller devices; defaults to false. |
For details on the displayComponent attribute, refer to the Global Plugin Parameters section of @polar/core.
Example configuration:
zoom: {
renderType: 'independent',
showMobile: false,
showZoomSlider: true,
}
Store
State
The map's zoom level can be listened to.
| fieldName | type | description |
|---|---|---|
| maximumZoomLevel | number | Maximum OpenLayers zoom level. |
| minimumZoomLevel | number | Minimum OpenLayers zoom level. |
| zoomLevel | number | Current OpenLayers zoom level. |
map.subscribe('plugin/zoom/zoomLevel', (zoomLevel) => {
/* This code is called on any zoomLevel update. */
})
Getters
| fieldName | type | description |
|---|---|---|
| maximumZoomLevelActive | boolean | Whether the current zoomLevel is the maximum. |
| minimumZoomLevelActive | boolean | Whether the current zoomLevel is the minimum. |
mapInstance.$store.watch(
(_, getters) => getters['plugin/zoom/maximumZoomLevelActive'],
(maximumZoomLevelActive) => {
/* This code is called on value updates. */
}
)
Actions
The zoomLevel can be set programmatically.
map.$store.dispatch('plugin/zoom/setZoomLevel', zoomLevelNumber)
map.$store.dispatch('plugin/zoom/increaseZoomLevel')
map.$store.dispatch('plugin/zoom/decreaseZoomLevel')
Zooming to invalid zoom level numbers (that is, above maximum or below minimum) will be ignored. A user should not be offered interactionable buttons that result in no operation.