How to Update the Markers Dynamically in the .NET MAUI Maps (SfMaps)?
In the Syncfusion .NET MAUI Maps control, you can update the markers dynamically in the SfMaps through the following steps:
Step 1: Add the SfMaps control and the Button controls in your layout as shown in the following code sample.
XAML:
<Grid RowDefinitions="0.9*,0.1*"> <map:SfMaps x:Name="map"> </map:SfMaps> <Grid Grid.Row="1" ColumnDefinitions="0.25*, 0.25*, 0.25*, 0.25*" HorizontalOptions="Center" ColumnSpacing="10"> <Button x:Name="AddButton" Text="Add" HeightRequest="40" WidthRequest="80"/> <Button Grid.Column="1" x:Name="UpdateButton" Text="Update" HeightRequest="40" WidthRequest="80" /> <Button Grid.Column="2" x:Name="RemoveButton" Text="Remove" HeightRequest="40" WidthRequest="80" /> <Button Grid.Column="3" x:Name="ClearButton" Text="Clear" HeightRequest="40" WidthRequest="80" /> </Grid> </Grid>
Step 2: Add the MapTileLayer to the SfMaps to render the tiles returned from the Web Map Tile Services and set the URL to the UrlTemplate property, as shown in the following code sample.
XAML:
<map:SfMaps x:Name="map">
<map:SfMaps.Layer>
<map:MapTileLayer x:Name="layer"
UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png">
</map:MapTileLayer>
</map:SfMaps.Layer>
</map:SfMaps>
Step 3: Add Markers to the MapTileLayer as shown in the following code sample.
XAML:
<map:MapTileLayer.Markers> <map:MapMarkerCollection x:Name="MarkerCollection"> <map:MapMarker Latitude="-14.235004" IconWidth="15" IconHeight="15" IconFill="#2f98f3" IconType="Circle" Longitude="-51.92528" /> <map:MapMarker Latitude="51.16569" IconWidth="15" IconHeight="15" IconFill="#2f98f3" IconType="Circle" Longitude="10.451526" /> <map:MapMarker Latitude="-25.274398" IconWidth="15" IconHeight="15" IconFill="#2f98f3" IconType="Circle" Longitude="133.775136" /> <map:MapMarker Latitude="61.52401" IconWidth="15" IconHeight="15" IconType="Circle" IconFill="#2f98f3" Longitude="105.318756" /> </map:MapMarkerCollection> </map:MapTileLayer.Markers>
Step 4: In the AddButton.Clicked event, initialize a new MapMarker instance and add another marker to the MapMarkerCollection, as shown in the following code sample.
C#:
private MapMarker mapMarker;
private void AddButton_Clicked(object sender, EventArgs e)
{
this.mapMarker = new MapMarker();
this.mapMarker.Latitude = 20.593684;
this.mapMarker.Longitude = 78.96288;
this.mapMarker.IconWidth = 15;
this.mapMarker.IconHeight = 15;
this.mapMarker.IconFill = Color.FromRgb(47, 152, 243);
this.MarkerCollection.Add(mapMarker);
}
Step 5: In the UpdateButton.Clicked event, update the newly added marker as shown in the following code sample.
C#:
private void UpdateButton_Clicked(object sender, EventArgs e)
{
this.mapMarker.IconHeight = 15;
this.mapMarker.IconWidth = 15;
this.mapMarker.IconType = MapIconType.Square;
this.mapMarker.IconFill = Colors.Red;
}
Step 6: In the RemoveButton.Clicked event, remove the newly added marker from the MapMarkerCollection, as shown in the following code sample.
C#:
private void RemoveButton_Clicked(object sender, EventArgs e)
{
this.MarkerCollection.Remove(mapMarker);
}
Step 7: In the ClearButton.Clicked event, clear the markers from the MapMarkerCollection as shown in the following code sample.
C#:
private void ClearButton_Clicked(object sender, EventArgs e)
{
this.MarkerCollection.Clear();
}
Output:
|
Conclusion:
Hope you enjoyed learning about how to update the markers dynamically in the .NET MAUI Maps (SfMaps).
You can refer to our .NET MAUI Maps feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Maps documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Maps and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
