How to Use ObservableCollection for Marker Updates in Blazor Maps?

The Blazor Maps component supports dynamic marker rendering through the use of ObservableCollection, which enables automatic UI updates when the underlying data changes. This feature is particularly useful for scenarios such as tracking live positions (e.g., flights or vehicles).

In this implementation, multiple markers are initially rendered on the map using separate ObservableCollection instances bound to the DataSource property of the MapsMarker component.

Each marker is defined by a model containing latitude and longitude coordinates. When a new marker needs to be added for example, by clicking a button the corresponding ObservableCollection is updated by appending a new data item. Since Blazor Maps listens for changes in the collection, the map automatically reflects the newly added marker without requiring manual refresh or re-rendering. Additionally, the map’s center position can be programmatically adjusted using relevant properties to focus on specific regions as needed.

Code Example

<SfMaps>
   <MapsLayers>
       <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
           <MapsMarkerSettings>
               <MapsMarker Visible="true" DataSource="California" Height="25" Width="15" TValue="City"></MapsMarker>
               <MapsMarker Visible="true" DataSource="NewYork" Height="25" Width="15" TValue="City"></MapsMarker>
               <MapsMarker Visible="true" DataSource="Iowa" Height="25" Width="15" TValue="City"></MapsMarker>
               <MapsMarker Visible="true" DataSource="Texas" Height="25" Width="15" TValue="City"></MapsMarker>
           </MapsMarkerSettings>
           <MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
       </MapsLayer>
   </MapsLayers>
</SfMaps>

<button @onclick="AddNewMarker">Add Texas Marker</button>

@code {
   public class City
   {
       public double Latitude { get; set; }
       public double Longitude { get; set; }
   }

   public ObservableCollection<City> California { get; set; } = new ObservableCollection<City>
   {
       new City { Latitude = 35.145083, Longitude = -117.960260 }
   };

   public ObservableCollection<City> NewYork { get; set; } = new ObservableCollection<City>
   {
       new City { Latitude = 40.724546, Longitude = -73.850344 }
   };

   public ObservableCollection<City> Iowa { get; set; } = new ObservableCollection<City>
   {
       new City { Latitude = 41.657782, Longitude = -91.533857 }
   };

   public ObservableCollection<City> Texas { get; set; } = new ObservableCollection<City>();

   private void AddNewMarker()
   {
       Texas.Add(new City { Latitude = 31.9686, Longitude = -99.9018 });
   }
} 

When the button is clicked, a new marker is added to the Texas collection. Because it is an ObservableCollection, the map component detects the change and automatically updates the UI to show the new marker.

Output

Before button click:

After button click:

Sample

You can download a working sample from the following link:
Map Marker ObservableCollection Sample

See Also

Blazor Maps Documentation – Markers

Conclusion

I hope you enjoyed learning about how to use observablecollection for marker updates in Blazor Maps.

You can refer to our Blazor Maps feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Map Documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Blazor Map and other Blazor components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!