Identifying marker clicked in OnMarkerClickEvent

I wish to identify the marker that has been clicked in the OnMarkerClickEvent.

OnMarkerClickEvent(Syncfusion.Blazor.Maps.MarkerClickEventArgs args)

From the documentation I assumed that args.Value would show something useful but it appears to be null.  The documentation says Value is "the name for a marker".  How is that set when a marker is created or is tehre another way to detect which marker has been clicked.


My marker definition is here:

<MapsMarkerSettings>

    <MapsMarker Visible="true" DataSource="poly" TValue="PolygonPoint" OffsetY="-15" OffsetX="7" >

        <MarkerTemplate Context="mapMarkerContext" >

            @{

                var data = mapMarkerContext as PolygonPoint;

                <div style="font-size:13px;font-weight:bold">@data.Index</div> <br>

            }

        </MarkerTemplate>

    </MapsMarker>

    <MapsMarker Visible="true" Width="25" Height="25" DataSource="poly" TValue="PolygonPoint" Shape="Syncfusion.Blazor.Maps.MarkerType.Balloon">

        <MapsMarkerBorder Width="2" Color="rgb(0,0,0)"></MapsMarkerBorder>

        <MapsMarkerTooltipSettings Visible="true" ValuePath="Index">

            <MapsMarkerTooltipTextStyle Color="gray"></MapsMarkerTooltipTextStyle>

        </MapsMarkerTooltipSettings>

    </MapsMarker>

</MapsMarkerSettings>



Relevent class definitions:

public class PolygonPoint

{

    public Double Latitude { get; set; }

    public Double Longitude { get; set; }

    public int Index { get; set; }

}


public List<PolygonPoint> poly = new List<PolygonPoint>();




3 Replies

MA Manuel November 13, 2023 12:31 PM UTC

you need to use OnMarkerClick event :


@using Syncfusion.Blazor.Maps



<SfMaps>
    <MapsEvents OnMarkerClick="@OnMarkerClickEvent"></MapsEvents>
    <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>
            </MapsMarkerSettings>
            <MapsShapeSettings Fill="lightgray"></MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>
@code {
    public class City
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    };
    public List<City> California = new List<City> {
        new City {Latitude=35.145083,Longitude=-117.960260}
    };
    public List<City> NewYork = new List<City> {
        new City { Latitude=40.724546, Longitude=-73.850344 }
    };
    public List<City> Iowa = new List<City> {
        new City {Latitude= 41.657782, Longitude=-91.533857}
    };
    public void OnMarkerClickEvent(Syncfusion.Blazor.Maps.MarkerClickEventArgs args)
    {
       // Here you can customize your code
    }
}


MA Martin November 13, 2023 01:10 PM UTC

Sorry if I did not make clear in my original posting that  that is exactly what I did.  My question was how do I identify in the code in the event handler which marker was clicked?  I assumed that in 

OnMarkerClickEvent(Syncfusion.Blazor.Maps.MarkerClickEventArgs args)


args.Value would provide a way to identify which marker was clicked.  But its value was null, and no other  part of args seemed to allow identification of which marker was clicked to raise the event?


M



IR Indumathi Ravi Syncfusion Team November 14, 2023 02:00 PM UTC

Hi Martin,


In the “OnMarkerClick” event, “Target” and “Data” event arguments can be used to identify which marker is clicked on the Maps. The “Data” property will hold the object from the marker data source for the corresponding marker over which the click action is performed. Please refer the below screenshot for your reference.



Meanwhile, the "Target" property will return the id name of the marker element which is clicked. For example, if the id name of the marker is "Maps_LayerIndex_0_MarkerIndex_0_dataIndex_1", you can split the string to get the index values associated with the marker such as layer index (represents which layer the marker is available), marker index (represents which marker setting, the marker is available) and data index (represents index of the object in the data source collection). Please refer the below screenshot for further reference.



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

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


Please let us know if you need any further assistance.


Loader.
Up arrow icon