.NET MAUI Map Pan and Zoom
Telerik UI for .NET MAUI Map provides pan and zoom functionality that will help you interact with the view and inspect your data. The Map control handles the gestures drag, pinch-open and pinch-close which respectively cause panning, zooming-in and zooming-out of the associated plot area.
Interaction Modes
You can configure which gesture manipulations the user can do with the map through the enum InteractionMode
property. InteractionMode
can receive the following values:
- None: No interaction is allowed;
- Pan;
- Zoom;
- PanAndZoom (default value).
Here is a quick snippet how InteractionMode
isd applied:
<telerik:RadMap x:Name="map" InteractionMode="Zoom">
<telerik:RadMap.Layers>
<telerik:ShapefileLayer>
<telerik:ShapefileLayer.Reader>
<telerik:MapShapeReader x:Name="reader"/>
</telerik:ShapefileLayer.Reader>
</telerik:ShapefileLayer>
</telerik:RadMap.Layers>
</telerik:RadMap>
where the Source of the MapShapeReader should be defined as well:
var assembly = this.GetType().Assembly;
var source = MapSource.FromResource("SDKBrowserMaui.Examples.MapControl.world.shp", assembly);
this.reader.Source = source;
In the example the .shp file is loaded as an EmbeddedResource, there are other options as well, please check them in the ShapefileLayer topic.
Zoom Level Support
The Map exposes properties for applying min and max zoom values.
-
MaxZoomLevel
: Defines the maximum magnification factor at which content could be maximized. The default value is 20.0 -
MinZoomLevel
: Defines the minimum magnification factor at which content could be minimized. The default value is 1.0
You can check the current magnification through the readonly ZoomLevel
property.
<telerik:RadMap x:Name="map" MinZoomLevel="2" MaxZoomLevel="5">
<telerik:RadMap.Layers>
<telerik:ShapefileLayer>
<telerik:ShapefileLayer.Reader>
<telerik:MapShapeReader x:Name="reader"/>
</telerik:ShapefileLayer.Reader>
</telerik:ShapefileLayer>
</telerik:RadMap.Layers>
</telerik:RadMap>
In addition, you can use the method below to set the provided zoom value as the current zoom level of the map:
-
ZoomToLevel
(double zoomLevel);
Setting the View
If you would like to show a specific area from the map, you can use SetView
method as described below:
-
SetView
(LocationRect locationRect) – Sets the provided location as the current view of the map.
LocationRect
class is a special type from the Telerik.Maui.Controls.Compatibility.ShapefileReader
namespace, which describes a rectangle region through the locations of the northwest and southeast points.
For more details on how points are positioned in the geographic coordinate system, check Layers Overview topic.
Here is an example how you could utilize SetView
method (in the example the used latitude and longitude values are chosen to form a region around Italy):
var northWest = new Location(45.7, 4.8);
var southEast = new Location(37.7, 20.08);
var view = new LocationRect(northWest, southEast);
this.map.SetView(view);