Modification of data in amCharts4 doesn't automatically update the map display

Question

Modification of data in amCharts4 doesn't automatically update the map display

I am integrating amcharts4 into a meteor project to display a map with dynamic map markers. These map markers need to update themselves whenever the underlying data changes.

I have tried to customize the demo available at this link.

The only modification I made was to assign a different set of data to the imageSeries in order to update the markers on the map dynamically.

You can view and test the functionality in action using this jsfiddle. The setTimeout function is used to simulate a data change every 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 does update after 5 seconds, however, the new points do not appear on the map until manual interaction such as panning, zooming in/out occurs.

I am looking for a solution to resolve this issue.

javascript amcharts amcharts4

Answer 1

Answer №1

After the redraw/update, AmCharts will indeed update the map. However, the issue arises from utilizing custom HTML markers instead of the standard functionality with simple images like in this demonstration. Since a custom setup is being used, an additional step becomes necessary. It's worth noting that this demo was originally created for version 3, which lacked support for native HTML markers.

Within the demo, updateCustomMarkers is responsible for initially placing the markers on the map. The demo showcases setting up custom markers by assigning this method to the mappositionchanged event of the map instance. This event is triggered during the initialization of the map due to zooming and viewport positioning inherent upon creation. Consequently, the markers are only visible after manually zooming in. In your case, the data update timeout does not include a call to updateCustomMarkers, resulting in the custom markers not being displayed unless the method is manually invoked afterwards. Additionally, there is no need to execute invalidateData when substituting 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)

It should be noted that this extra step is unnecessary when utilizing native images, as the map automatically updates the markers in such cases.

Answer 2

After the redraw/update, AmCharts will indeed update the map. However, the issue arises from utilizing custom HTML markers instead of the standard functionality with simple images like in this demonstration. Since a custom setup is being used, an additional step becomes necessary. It's worth noting that this demo was originally created for version 3, which lacked support for native HTML markers.

Within the demo, updateCustomMarkers is responsible for initially placing the markers on the map. The demo showcases setting up custom markers by assigning this method to the mappositionchanged event of the map instance. This event is triggered during the initialization of the map due to zooming and viewport positioning inherent upon creation. Consequently, the markers are only visible after manually zooming in. In your case, the data update timeout does not include a call to updateCustomMarkers, resulting in the custom markers not being displayed unless the method is manually invoked afterwards. Additionally, there is no need to execute invalidateData when substituting 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)

It should be noted that this extra step is unnecessary when utilizing native images, as the map automatically updates the markers in such cases.

Modification of data in amCharts4 doesn't automatically update the map display

Answer №1

Similar questions

JavaScript fails to display image slideshows upon loading

Creating a 3D image gallery within a cube using the three.js library

Update the grand total based on the values of the checkboxes

What is the reason for not being able to retrieve query parameters in "getStaticProps"?

Is there a way to delete highlighted text without using execCommand and changing the font color

Enable checkboxes to be pre-selected upon page loading automatically

When pasting content that exceeds a certain height, Quill will automatically scroll to the top on webkit-based browsers such as Chrome

Is it possible to track traffic using Alexa or SimilarWeb on a single-page application?

Exploring ways to utilize array.find by comparing it to a different object

Issue with Canvas rendering functionality

Dealing with SSE reconnection errors in Angular 8

analyzing strings by comparing their characters to another string

What is the best way to add a CSS rule to JavaScript?

Trigger AJAX request upon selecting a value from the dropdown menu

Exploring Point Clouds with Three.js

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail

Retrieve the Current Time with an Ajax Request

Angular's change detection mechanism surrenders after the secondary data load on a single-page application

Switch effortlessly between various THREE.EffectComposer scenes with a single renderer in three.js

Create a substitute for Object.seal, Object.freeze, and Object.preventExtensions applications