Getting selected markers data

[Ryan Keefer]

I've looked everywhere to try and find this and I can't yet. I need to be able to get the list of selected markers from the map and pass that to the controller. I am able to display the map and select the markers. The markerClick function triggers but the args have no data defined in them and I can't find where the control structure has anything wBelow is my view code to display the map. What am I missing?

@{
    var select = new Syncfusion.EJ2.Maps.MapsSelectionSettings
    {
        Enable = true,
        EnableMultiSelect = true,
        Fill = "green",
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Color = "white",
            Width = 2,
            Opacity = 1
        }
    };
    var data = ViewBag.markerData;
}
 
@using Syncfusion.EJ2.Maps;
 
@{
 
    var toolbars = new string[] { "Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" };
    var propertyPath = new[] { "continent" };
}

<div id="control-section">
    <ejs-maps id="maps" load="window.onMapLoad" markerClick="markerClick">
        <e-maps-zoomsettings enable="true" toolbars="toolbars" pinchZooming="true">e-maps-zoomsettings>
        <e-maps-legendsettings visible="false">e-maps-legendsettings>
        <e-maps-layers>
            <e-maps-layer LayerType="Bing" key="<REMOVED FOR POST>">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Balloon" dataSource="data"
                                            height="20" width="20" selectionSettings="select">e-layersettings-marker>
                e-layersettings-markers>
            e-maps-layer>
        e-maps-layers>
    ejs-maps>
 
div>

[Indumathi Ravi]

Hi Ryan, 

Thank you for contacting Syncfusion support. 

We can get selected marker data from the arguments of "itemSelection" event and stored it in the "markerList" variable. Please find the code snippet for the same. 

Code Snippet: 

<ejs-maps id="maps" itemSelection="itemSelected">  

</ejs-maps> 

<script> 

     var markerList = []; 

     function itemSelected(args) { 

        

        // To store the selected marker data. 

        const markerData = args.data; 

       // Check the selected marker data is already exists in the list or not. 

        const isEqual = markerList.findIndex(a => a.name === markerData.name);   

              

        if(isEqual == -1) { 

              // Selected data is not exists in the list push the marker data in the list. 

              markerList.push(markerData); 

        } else { 

            // Selected data is exists in the list remove the marker data from the list. 

            markerList.splice(markerList.findIndex(a => a.name === markerData.name) , 1) 

        } 

    } 

</script> 

We have created a sample and screenshot to demonstrate the same and it can be downloaded from the below link. 

  

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

 

Screenshot –  

 

 

Please let us know that the above sample meets your requirement. 

Regards, 

Indumathi R.