Example of Zooming & Panning in React Maps Component

/
/
ZoomingMaps

This sample depicts the zooming and panning options in the maps. You can customize these options by changing the Zooming, Panning, Mouse wheel zoom, Pinch zoom, Single-click zoom, and Double-click zoom in the Properties panel.

More Details...

Properties
Zooming
Panning
Mouse wheel zoom
Pinch zoom
Single click zoom
Double click zoom
Animation Duration
500ms

This sample depicts the zooming and panning options in the maps. You can customize these options by changing the Zooming, Panning, Mouse wheel zoom, Pinch zoom, Single-click zoom, and Double-click zoom in the Properties panel.

In this example, you can see how to zoom and pan the map. The support has been provided for zooming with the toolbar, rectangle zoom, pinch zoom, mouse wheel zoom, single-click, and double-click zoom.Panning can be enabled or disabled using the Panning option. When it is disabled, the map will switch to zooming mode.


Injecting Module

Maps component features are segregated into individual feature-wise modules. To use the zooming feature, inject the zoom module using the Maps.Inject(zoom) method.

Description

In this example, you can see how to zoom and pan the map. The support has been provided for zooming with the toolbar, rectangle zoom, pinch zoom, mouse wheel zoom, single-click, and double-click zoom.Panning can be enabled or disabled using the Panning option. When it is disabled, the map will switch to zooming mode.


Injecting Module

Maps component features are segregated into individual feature-wise modules. To use the zooming feature, inject the zoom module using the Maps.Inject(zoom) method.