Category / Section
How to interactively place the markers, connect and drag the route in Xamarin Maps (SfMaps)
4 mins read
Description
This KB article describes on how to add markers at the required tapped location without even knowing the exact geo location (i.e. latitude and Longitude) of that place and can also connect a route between the tapped locations using a polyline.
Solution
The Tapped and Panning events in maps is helpful for achievinghelp achieve this. To add a marker at the required location, follow these below steps.
- Step 1: Raise the Tapped event in maps.
XAML:
<maps:SfMaps x:Name="maps" Tapped="maps_Tapped" > <maps:SfMaps.Layers> <maps:ImageryLayer x:Name="layer" > </maps:ImageryLayer> </maps:SfMaps.Layers> </maps:SfMaps>
- Step 2: To connect a route between the tapped points with a polyline, add a sublayer to the base layer as shown below.
XAML:
<maps:ImageryLayer x:Name="layer"> <maps:ImageryLayer.Sublayers> <maps:ShapeFileLayer x:Name="subLayer" ShapeType="Polyline"> <maps:ShapeFileLayer.ShapeSettings> <maps:ShapeSetting ShapeStrokeThickness="4"></maps:ShapeSetting> </maps:ShapeFileLayer.ShapeSettings> </maps:ShapeFileLayer> </maps:ImageryLayer.Sublayers> </maps:ImageryLayer>
- Step 3: In the tapped event, weyou can convert the screen point to geo point using the GetLatLonFromPoint() method.
- Step 4: Add a marker to the layer with the retrieved geo point and add the same geo point to the sub sub-layer points to connect with a polyline.
C# :
private void maps_Tapped(object sender, Syncfusion.SfMaps.XForms.MapTappedEventArgs e)
{
var screenPoint = e.Position;
var geoPoint = layer.GetLatLonFromPoint(screenPoint);
MapMarker marker = new MapMarker();
marker.Latitude = geoPoint.Y.ToString();
marker.Longitude = geoPoint.X.ToString();
layer.Markers.Add(marker);
subLayer.Points.Add(new Point(geoPoint.Y, geoPoint.X));
}
To edit the connected polyline, hold on the map marker and drag it to the desired location.
Follow these below steps to perform the same.
- Step 1: Raise the panning event in maps and set the EnablePanning to false in order to restrict the maps panning and to perform the polyline editing on the maps.
XAML:
<maps:SfMaps x:Name="maps" Panning="maps_Panning" EnablePanning="False" > <maps:SfMaps.Layers> <maps:ImageryLayer x:Name="layer" > </maps:ImageryLayer> </maps:SfMaps.Layers> </maps:SfMaps>
- Step 2: Convert the screen point to geo point and find the marker which is hold down for editing and modify its geo point and also the corresponding sublayer point to perform the editing as shown in the followingbelow samplenippet.
C# :
private void maps_Panning(object sender, Syncfusion.SfMaps.XForms.MapPanUpdatedEventArgs e)
{
if (maps.EnablePanning) return;
var screenPoint = e.Position;
var geoPoint = layer.GetLatLonFromPoint(screenPoint);
if (e.Started)
{
markerSelectedIndex = CalculateNearestMarker(geoPoint, screenPoint);
}
if (markerSelectedIndex != -1 && !e.Started && !e.Completed)
{
if (layer.Markers.Count > markerSelectedIndex)
{
layer.Markers[markerSelectedIndex].Latitude = geoPoint.Y.ToString();
layer.Markers[markerSelectedIndex].Longitude = geoPoint.X.ToString();
}
if (subLayer.Points.Count > markerSelectedIndex)
{
subLayer.Points[markerSelectedIndex] = new Point(geoPoint.Y, geoPoint.X);
}
}
if (e.Completed)
{
markerSelectedIndex = -1;
}
}
Complete A complete sample to add markers with connected routes and editing the same can be downloaded from the followingbelow link,
