amCharts4 data change does not trigger map redraw

Question

I'm using amcharts4 as part of a meteor project. The goal is to show a map and have map-markers show up on the map. Each time data changes, the map markers must update themselves and point to the new locations.

I've attempted to reuse the already available demo

The only extra bit I've added is to reassign a different set of data to the imageSeries so as to have it update the markers on the map.

I have a jsfiddle to demonstrate what is going on. The setTimeout function is being used to mimmic a data change after 5 seconds.

  setTimeout(function(){
        $('.map-marker').remove()
        imageSeries.data = [{
           "zoomLevel": 5,
           "scale": 0.5,
           "title": "Brussels",
           "latitude": 50.8371,
           "longitude": 4.3676
         }];
        imageSeries.validateData();
    }, 5000)

The data change does happen after 5 seconds. But the new points don't show up on the map UNTIL you manually pan the map or zoom in / out.

How do I fix this issue?

Answer 1

AmCharts does update the map after the redraw/update. The problem is that you're using custom HTML markers rather than the native functionality with just images like in this demo. Since you're using a custom setup, an additional step is needed (as an aside, this a port of a demo written for v3, which also didn't have native HTML markers).

In the demo, updateCustomMarkers is responsible for placing the markers on the map in the first place. Note that the demo sets up the custom markers by attaching this method to the map instance's mappositionchanged event, which also happens to be called during the map's initialization due to zoom/viewport positioning that happens upon creation. This is also why you only see the markers after you manually zoom in. Your data update timeout doesn't call updateCustomMarkers, so the custom markers aren't drawn unless you manually call the method afterward; note that you also do not need to call invalidateData when replacing the entire array.

setTimeout(function() {
  $('.map-marker').remove()
  imageSeries.data = [{
    "zoomLevel": 5,
    "scale": 0.5,
    "title": "Brussels",
    "latitude": 50.8371,
    "longitude": 4.3676
  }];
  updateCustomMarkers();
}, 5000)

Note that this extra step isn't needed when using native images as the map will automatically update the markers in that scenario.