Zooming and Panning in UWP Map (SfMaps)
10 May 20214 minutes to read
The Zooming and Panning feature of the Map control allows users to zoom in and out and navigate the map.
The zooming feature enables users to zoom in and out of the map to show in-depth information. It is controlled by the
ZoomLevel property of the map. When the zoom level of the Map control is increased, the map is zoomed in. If the zoom level is decreased then the map is zoomed out.
Properties Related to Zooming
The following properties are related to the zooming feature of the Maps control:
ZoomLevel is the primary property of the zooming feature. It controls the map’s scale size while zooming. Initially, the zoom level is 1. ZoomLevel cannot be less than 1.
EnableZoom property enables or disables the zooming feature. A
True value of this property enables the zooming feature and
False disables the zooming feature.
MinZoom property is used to set the minimum zoom level of the map.
MaxZoom property is used to set the maximum zoom level of the Map control.
<syncfusion:SfMap ZoomLevel="3" MinZoom="1" MaxZoom="20" EnableZoom="True"> </syncfusion:SfMap >
Methods to Zoom the Map:
Maps can be zoomed using the following methods:
- By changing the ZoomLevel.
- Through the Zoom method.
- By pinching the map.
- Through the mouse scroll.
- By double-tapping on the map.
Changing the ZoomLevel
A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel will zoom in on the map and decrementing the ZoomLevel will zoom out of the map.
Through the Zoom method
Maps can be zoomed through the Zoom method. The Zoom method has the parameter zoom value. The map can be zoomed or scaled with the zoom value parameter.
SfMap syncMap = new SfMap(); ShapeFileLayer shapeLayer = new ShapeFileLayer(); shapeLayer.Uri = "MapApp.ShapeFiles.world.shp"; syncMap.Layers.Add(shapeLayer); syncMap.Zoom(5);
By pinching the map
Since UWP fully supports touch interactions, the Maps control also supports touch interactions. Maps can be zoomed through pinching events. Scale value is determined by using the delta value of the pinch event.
Through a mouse wheel event
In addition to the pinching event, the map can be zoomed with mouse events. When the mouse is scrolled up, the map is zoomed in. When the mouse is scrolled down, the map is zoomed out.
Through a double-tapping event
When the map is double-tapped, the zooming operation is performed.
Panning the map
The panning feature enables navigation through the map.
Properties related to Panning are:
Enable and disable pan
EnablePan property enables or disables the panning feature of the map. A
True value enables the panning feature. A
False value disables the panning feature of the map.
<syncfusion:SfMap ShowCoords="True" LatitudeLongitudeType="Decimal" EnablePan="True"> <syncfusion:SfMap.Layers> <syncfusion:ShapeFileLayer Uri="MapApp.world1.shp"> </syncfusion:ShapeFileLayer> </syncfusion:SfMap.Layers> </syncfusion:SfMap >
Ways to pan the map
There are two methods for panning the map. They are:
- Through the Pan method.
- By dragging the map.
Through the Pan method
The map can be panned with the Pan method in the Maps control. The Pan method has two parameters: x and y. The map is translated with respect to the x and y parameters.
SfMap syncMap = new SfMap(); syncMap.EnablePan = true; ShapeFileLayer layer = new ShapeFileLayer(); layer.Uri = "App2.world1.shp"; syncMap.Layers.Add(layer); syncMap.Pan(200, 200);
Dragging the map
The map can be panned by dragging the map through mouse interactions. This works automatically for touch events.
The map can be panned only when some parts of the map are outside the view of the control.