How to empty marker on map

[Yogesh Patil]

Hello Team,

Based on API response, want to change markers on map. If, I received empty response then marker should be removed on map.

Thanks,

Yogesh Patil

[Sabari Anand Senthamarai Kannan]

Hi Yogesh,

 

We can render markers in the Maps component based on the data for markers from remote server. You can follow the below steps to achieve your scenario.

1. Create a Web API project for server side to provide the marker details. The latitude and longitude fields in the object are essential for the markers in Maps. You need to return the data source in web action method of Web API application same as the below structure.

              

2. In the client side application, the data available in the server side (accessed using the hosted URL) must be received using AJAX requests. The received data in the client side must be in JSON format.
3. Now, the JSON data must be set to the “dataSource” property in the “markerSettings” of the Maps component. For reference, we have created a sample to add a marker in the Maps dynamically.

https://stackblitz.com/edit/react-x5t3ss-reuj5y?file=index.js

4. You can also customize the markers by adding the tooltip feature or changing the shape and size of the marker. Please refer to the below UG Document link for more details.

https://ej2.syncfusion.com/react/documentation/maps/markers/#customize-marker-shapes-from-data-source

 

Please let us know if the above solution meets your requirement and let us know if you need any further assistance.

 

Regards,

Sabari Anand

[Yogesh Patil]

Hello Syncfusion,

Thanks for reply.

You have provided me to Add Marker on map. I have already implemented it. I need a solution on how to remove marker from map.

Thanks,

Yogesh Patil

[Indumathi Ravi]

Hi Yogesh,

 

All the markers in the Maps component can be removed by setting empty array in the “markerSettings” property. Please find the code snippet below.

 

Code Snippet:

clearMarker() {

    this.mapInstance.layersCollection[0].markerSettings = [];

}

 

<ButtonComponent value="clear" onClick={this.clearMarker.bind(this)} style={'MarginLeft'='30px'}>

          Clear Marker

</ButtonComponent>

<MapsComponent id="maps"ref={(m) => (this.mapInstance = m)}></MapsComponent>

 

You can find the sample for your reference from the below link.

https://stackblitz.com/edit/react-x5t3ss-yihceq?file=index.js

 

Please let us know if the above solution meet your requirement and let us know if you need any further assistance.