Blazor Map Marker complex/nested class contains the Lat and Long

Question

I'm trying to put multiple markers on OSM dynamically, I have a class that contains the Location data.The Blazor map marker Latitude and Longitude are inside the complex/nested class.I'm not able to get it's content.Thanks ahead for the help.This is the code (The code that documented works): @* Add marker *@ @* *@ @* Add navigation line *@ @code{ public class Wrapper { public City BCity { get; set; } } private List BCities = new List { new Wrapper{BCity = new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }}, new Wrapper{BCity = new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"}} }; public class City { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } } private List Cities = new List { new City { Latitude = 34.060620, Longitude = -118.330491, Name="California" }, new City{ Latitude = 40.724546, Longitude = -73.850344, Name="New York"} };}

Indumathi Ravi · Answer

Hi Gabriel,Thank you for contacting Syncfusion support.We can achieve the requirement of dynamically adding markers in the Maps component by creating a list with all of the marker settings fields such as data source, visible state, and so on. This list can be used to add markers to the component by iterating over the “MapsMarker” tag. When the list is updated, the markers in the Maps component will be dynamically added. Please find the code snippet for the same below.Code Snippet: Add @* Add marker *@ @foreach (var Marker in MarkersCollection) { } //.. //.. @code{ public class Markers { public bool Visible { get; set; } public List DataSource { get; set; } public double Height { get; set; } public double Width { get; set; } public MarkerType Shape { get; set; } } public class MarkerCity { public double Latitude { get; set; } public double Longitude { get; set; } public string Name { get; set; } public string Shape { get; set; } public string Color { get; set; } }; public List MarkersCollection = new List { new Markers { Visible = true, Height = 20, Shape = MarkerType.Circle, Width=20, DataSource = new List { new MarkerCity {Latitude=35.145083,Longitude=-117.960260, Name = "California" , Shape="Circle", Color="Green"}, new MarkerCity { Latitude=40.724546, Longitude=-73.850344 , Name ="NewYork", Shape="Pentagon", Color= "Blue"}, new MarkerCity {Latitude= 41.657782, Longitude=-91.533857, Name="Iowa", Shape="Rectangle" , Color="Red"} }, }, }; void AddMarker() { MarkersCollection.Add( new Markers { Visible = true, Height = 20, Width=20, Shape = MarkerType.Diamond, DataSource = new List { new MarkerCity {Latitude=35.6894875,Longitude= 139.6917064, Name = "Tokyo" , Shape="Circle", Color="Pink"}, new MarkerCity { Latitude=-23.5505199, Longitude=-46.6333094 , Name ="Sao Paulo", Shape="Pentagon", Color= "Violet"}, new MarkerCity {Latitude= 19.2464696, Longitude= -99.1013498, Name="Mexico City", Shape="Rectangle" , Color="Brown"} } }); } } We have created a sample and video to demonstrate the same and it can be download from the below link.Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp947392249Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicMarker206723601Please let us know if you need any further assistance.Regards,Indumathi R.