How to dynamically add markers to Blazor Maps?

Using the ObservableCollection data type in the marker data source, we can dynamically add markers to Blazor Maps. When the marker data source is updated, the ObservableCollection will immediately refresh the Maps component. In this section, we will explain you how to dynamically add markers to Maps using the ObservableCollection data type.

In the following example, we have a marker data source as an ObservableCollection data type with two objects and a button to dynamically add the marker. These markers are displayed above OpenStreetMap. When you click the button, three objects are added to the marker data source, which results in three markers being added to the Maps component. When the marker data source is updated, the Maps will automatically refresh. Similarly, we can dynamically add the markers above the geometry map.

The below code example demonstrates how to add markers to Blazor Maps dynamically. This code example is demonstrated in a Blazor MAUI application in the sample application below. This code can be used in either a server application or a web assembly application.

Index.razor

@using Syncfusion.Blazor.Maps
@using System.Collections.ObjectModel;

<div>
    <SfMaps @ref="sfMaps">
        <MapsZoomSettings Enable="true" ZoomFactor="12"></MapsZoomSettings>
        <MapsCenterPosition Latitude="35.1154711" Longitude="-89.9568190"></MapsCenterPosition>
        <MapsLayers>
            <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" Height="25" Width="25" DataSource="Cities" TValue="MapMarker">
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
<br />
<button @onclick="addMarkers">Add Marker</button>

@code
{
    SfMaps sfMaps;
    public class MapMarker
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    }

    private ObservableCollection<MapMarker> Cities = new ObservableCollection<MapMarker> {
        new MapMarker { Latitude = 35.11547118078336, Longitude = -89.9568190513077,  Name="Marker-One" },
        new MapMarker { Latitude = 35.13256277762481, Longitude = -89.94753689681518,  Name="Marker-Two" }
    };
  
    private void addMarkers()
    {
        Cities.Add(new MapMarker { Latitude = 35.132226015736194, Longitude = -89.9804791131883, Name = "Marker-Three" });
        Cities.Add(new MapMarker { Latitude = 35.12111209207373, Longitude = -89.91933012404557, Name = "Marker-Four" });
        Cities.Add(new MapMarker { Latitude = 35.15209258395299, Longitude = -89.94753689681518, Name = "Marker-Five" });
    }
}

The following screenshots illustrate the output of the above code snippet.

Screenshot of the Maps’ initial rendering with two markers:

View the sample in GitHub

Conclusion

I hope you enjoyed learning how dynamically add markers to Blazor Maps component.

You can refer to our Blazor Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Maps example to understand how to create and visualize the data.

For current customers, you can check out our 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 other controls.

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, support portal, or feedback portal. We are always happy to assist you!