Markers rendering only on map scrolling

[Mario Tilita]

Hi,

I'm facing this strange behavior, I can see the markers only after moving the map.

Example attached.

I'm rendering the markers from a JSON, deserializing as a <List<ExpandoObject>>. I don't know beforehand what kind of data I can have. 

There's a better way to render on a map the markers?

Attachment: markers_9d863761.zip

[Hemanathan Pandian]

Hi Mario,

Instead of placing the marker data source in a JSON file and converting the list of objects into a “List<ExpandoObject”, you can define the marker data source as a “ObservableCollection” in the razor page. We recommend you to define the marker data source as “ObservableCollection” to resolve the reported issue. Please find the code snippet for the same below.

Code Snippet:

<div style="height: 300px; border: 0.5px solid #E5E5E5">

</div>

<div>

    <SfMaps>

        <MapsTitleSettings Text="Top 25 Populated Cities in the World">

            <MapsTitleTextStyle Size="16px" FontFamily="Segoe UI" />

        </MapsTitleSettings>

        <MapsZoomSettings Enable="true" ZoomFactor="2"></MapsZoomSettings>

        <MapsLayers>

            <MapsLayer UrlTemplate=https://tile.openstreetmap.org/level/tileX/tileY.png TValue="string">

                @* Add marker *@

                <MapsMarkerSettings>

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

                    </MapsMarker>

                </MapsMarkerSettings>

            </MapsLayer>

        </MapsLayers>

    </SfMaps>

</div>

@code

{

   public class PopulationCityDetails

  {

               public double Latitude { get; set; }

               public double Longitude { get; set; }

               public string Name { get; set; }

               public double Population { get; set; }

               public string Country { get; set; }

               public string Continent { get; set; }

}

private ObservableCollection<PopulationCityDetails> Cities = new ObservableCollection<PopulationCityDetails> {

               new PopulationCityDetails { Name="Tokyo", Latitude=35.6894875, Longitude=139.6917064, Population=33200000, Country="Japan", Continent="Asia" },

               ..........

               ........

}

}

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

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

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Panning-456234806

Please let us know if you need any further assistance.