Dynamic marker filter

[Goran Strok]

Hi,

is it possible to dynamically filter markers based on some criteria? I tried by filtering a datasource in render method but It does not work.

A simplified example:

render() {

const fMarkers = this.state.markers.filter( m => !m.hidden );

return (

<MapsComponent

id="map-container"

ref={m => this.mapInstance = m}

zoomSettings={{

enable: true,

pinchZooming: true

}}

>

<Inject services={[Zoom, Marker]} />

<LayersDirective>

<LayerDirective layerType="OSM">

<MarkersDirective>

<MarkerDirective

dataSource={ fMarkers }

visible={true}

animationDuration={0}

shape='Circle'

fill='white'

width={20}

/>

</MarkersDirective>

</LayerDirective>

</LayersDirective>

</MapsComponent>

I can accomplish a refresh by calling refresh() after I update the state but It also reverts map to center and seems like an overkill. Example:

this.setState({

markers: this.state.markers.map(marker => (marker.city === m.city ? Object.assign({}, m, { hidden: !m.hidden }) : marker))

}, () => {

if( this.mapInstance ) {

this.mapInstance.refresh()

}

});

Kind regards,

Goran

[Dharanidharan Dharmasivam]

Hi Goran, 

We have prepared a simple sample for filtering the data for marker and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/139405/ze/my-app-294083714 

Please refer the following code snippet to achieve this 

[JSX] 

 

<MarkerDirective visible={true} 

                                            animationDuration={0} 

                                                shape='Circle' 

                                                fill= 'white' 

                                                width= {4} 

                                                border= {{ 

                                                   color: '#285255', 

                                                   width: 2 

                                                }} 

                                            //Filter the marker data based on population 

                                            dataSource={ topPopulation.filter(m => m.population > 12000000) } 

                                        > 

</MarkerDirective> 

 

 

In the above code we have filtered the data based on the population. You can change this with respect to your scenario and kindly get back to us, if you would require further assistance. 

 

Thanks, 

Dharani.