how to add markers dynamically after initial rendering of map?

[Conor O'Molony]

Hey there!
In my map i am currently loading the users location as a marker on the map when it first renders:

<MapsLayers>

    <MapsLayer UrlTemplate="https://mt.google.com/vt/lyrs=m&x=tileX&y=tileY&z=level" TValue="string">

        <MapsMarkerSettings>

            <MapsMarker Visible="true" DataSource="users" Height="25" Width="25" TValue="User" AnimationDuration="0">

            </MapsMarker>

        </MapsMarkerSettings>

    </MapsLayer>

</MapsLayers>

But the user has an option to add "Issues" to a list of issues that i intend to add to the map as markers aswell. I have all the code to add objects to this list, i am just not sure how to dynamically add them to the map.

All help would be greatly appreciated!



[Hemanathan Pandian]

Hi Conor,

For adding the markers dynamically to the Maps component, you need to define the marker data source as a “ObservableCollection” data type instead of “List” data type. When a new object is added to the marker data source with “ObservableCollection” type, the marker will be added automatically to the Maps component. Please find the code snippet for the same below.

Code Snippet:

<div>

    <SfMaps>

        <MapsLayers>

            <MapsLayer UrlTemplate=https://mt.google.com/vt/lyrs=m&x=tileX&y=tileY&z=level TValue="string">

                @* Add marker *@

                <MapsMarkerSettings>

                    <MapsMarker Visible="true" Height="25" Width="15" DataSource="Cities" TValue="MapMarker">

                    </MapsMarker>

                </MapsMarkerSettings>

            </MapsLayer>

        </MapsLayers>

    </SfMaps>

</div>

<br />

<button @onclick="addMarkers" class="btn-lg">Add Marker</button>

 

@code

{

   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="1" },

        new MapMarker { Latitude = 28.6139391, Longitude = 77.2090212,  Name="2" }

    };

    private void addMarkers()

    {

        Cities.Add(new MapMarker { Latitude = 35.6894875, Longitude = 139.6917064, Name = "3" });

        Cities.Add(new MapMarker { Latitude = 19.0759837, Longitude = 72.8776559, Name = "4" });

        Cities.Add(new MapMarker { Latitude = 34.0522265, Longitude = -118.2436596, Name = "5" });

        Cities.Add(new MapMarker { Latitude = 41.0082376, Longitude = 28.9783589, Name = "6" });

    }

}

You can find the sample and video for demonstration from the below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicMarker-sample1376521671

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dynamic-marker-screenshot836597738

Please let us know if you need any further assistance.