Update dataProvider images without reseting the whole map

[cioraneanu]

I'm using the Maps product to show a lot of images. To avoid a performance impact I'm filtering the images( based on what the user sees).

But every time the chart.dataProvider.images field is updated the whole map gets reseted, losing current zoom and position. Here is my component that received filtered results via props:

render() {
  const options = {
    type: 'map',
    dataProvider: {
      map: 'randomMap',
      areas: areas,
      images: this.props.cities
    },
    'listeners': [
      {
        'event': 'dragCompleted',
        'method': this.dragCompleted
      }
    ]
  }

  return (
    <div className="App">
      <AmCharts.React options={options}/>
    </div>
  )
}

Are there any ways to refresh only the images?

[joneswe]

Is there any solution to hold the "mapState"? Any new rendering (props change) results in a map reset.

[cioraneanu]

I got this to work by persisting zoom level and position right before a re-render

    render() {
        let options = {
            type: 'map',
             .....
        }

        // this.map object is stored in the init event
        if (this.map !== undefined) {
        // Keep the current zoom level and position after re-render
            options.dataProvider.zoomLevel = this.map.zoomLevel()
            options.dataProvider.zoomX = this.map.zoomX()
            options.dataProvider.zoomY = this.map.zoomY()
        }

        const styleMap = {width: '100%', height: '500px'}

        return (
                <AmCharts.React style={styleMap} options={options}/>
        )
    }

[Pauan]

I recently fixed a bug which might be related to this issue.

Please try amcharts3-react version 3.0.2 and see if it fixes this issue.

(You might need to delete your node_modules folder and then run npm install)