Change map marker

[Kyle Oliveros]

Hi,

Is it possible to change the map marker via click?  lets say I have a red dot on a map then I click on it and it will change its color to green then if I want it back to red color all I have to do is click on it again or it will go back to red if I click on another marker

[Deepaa Pragaasam]

Hi Kyle, 

We have analyzed your query . The color of the marker can be changed on click event using the “markerSelected” event and adding the modifying the fill attribute of the clicked marker. 

Please refer the code snippet below  

   $("#container").ejMap({ 

 

// markerSelected event triggered  

 

     markerSelected:"marker", 

}); 

 

// variable to check the color of the selected marker  

var currentMarkerColor = "",markerColor; 

        function marker(args) 

        { 

            currentMarkerColor = args.originalEvent.marker[0].children[0].children[0].childNodes[1].getAttribute("fill"); 

            var x = $(".e-mapMarker svg").length; 

            for (var i = 0; i < x; i++) 

            { 

                $(".e-mapMarker svg")[i].childNodes[1].setAttribute("fill", "red"); 

            } 

            markerColor = currentMarkerColor === "red"? "green" : "red" 

            args.originalEvent.marker[0].children[0].children[0].childNodes[1].setAttribute("fill", markerColor); 

        

            

        } 

Please refer the output screenshot  

Map while rendering 

 

On clicking the USA marker 

 

After clicking the brazil marker, please refer the output screenshot 

 

Again clicking on the same Brazil marker ,the output map is rendered as below  

   

Please refer the sample below 

JS Playground Link: https://jsplayground.syncfusion.com/bqk5cv3y 

Please let me know if you have any concerns . 

Regards, 

Deepaa.