AmCharts map. Show data after loading screen

Question

I have some amCharts(version 3) map with large amount of data(pins) in my app. I want it to load data without freezing the page. In which way can I implement this. I was trying proccessTimeout, setInterval, setTimeout. Nothing helps.

Answer 1

amMaps 3 isn't optimized to handle large amounts of data. There are a couple of workarounds you can try to help with performance somewhat but it isn't a 100% fix and may hit a ceiling if the amount of data is very large.

One option is to create a multi-level drill down where you display a smaller subset of your data in the form of regional markers. When a user clicks on one of them, the underlying data points are shown, ex:

  "dataProvider": {
    "map": "usa2Low",
    "images": [ {
      "svgPath": targetSVG,
      "label": "San Diego", //Clicking on the San Diego marker 
      "zoomLevel": 14,      //will reveal markers for Imperial Beach, El Cajon, etc
      "scale": 1,
      "title": "San Diego",
      "latitude": 32.715738,
      "longitude": -117.161084,
      "images": [ {
        "svgPath": targetSVG,
        "scale": 0.7,
        "title": "Imperial Beach",
        "latitude": 32.586299,
        "longitude": -117.110481
      }, {
        "svgPath": targetSVG,
        "scale": 0.7,
        "title": "El Cajon",
        "latitude": 32.802417,
        "longitude": -116.963539
      }, {
        "svgPath": targetSVG,
        "scale": 0.7,
        "title": "University City",
        "latitude": 32.861268,
        "longitude": -117.210045
      }, {
        "svgPath": targetSVG,
        "scale": 0.7,
        "title": "Poway",
        "latitude": 32.969635,
        "longitude": -117.036324
      } ]
    } ]

Here's an example: https://www.amcharts.com/docs/v3/tutorials/map-marker-drill-down/

Another option is to show certain data points only on particular zoom level using groupId and zoomLevel, which minimizes the number of points that needs to be rendered initially until the users looks for more detail, similar to the previous example but not using nested structures:

  "dataProvider": {
    "map": "worldLow",
    "images": [ {
      "groupId": "minZoom-2", //minZoom-2 group of images, visible at zoomLevel 5
      "svgPath": targetSVG,
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Vienna",
      "latitude": 48.2092,
      "longitude": 16.3728
    }, 
    // ... other images with group minZoom-2 omitted
    // ...
     {
      "groupId": "minZoom-2.5", //minZoom-2.5 group, visible at 
      "svgPath": targetSVG,
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Pyinmana",
      "latitude": 19.7378,
      "longitude": 96.2083
    }, 
    // ... etc

// create a zoom listener which will check current zoom level and will toggle
// corresponding image groups accordingly
map.addListener( "rendered", function() {
  revealMapImages();
  map.addListener( "zoomCompleted", revealMapImages );
} );

function revealMapImages( event ) {
  var zoomLevel = map.zoomLevel();
  if ( zoomLevel < 2 ) {
    map.hideGroup( "minZoom-2" );
    map.hideGroup( "minZoom-2.5" );
  } else if ( zoomLevel < 2.5 ) {
    map.showGroup( "minZoom-2" );
    map.hideGroup( "minZoom-2.5" );
  } else {
    map.showGroup( "minZoom-2" );
    map.showGroup( "minZoom-2.5" );
  }
}

Here's an example of this: https://www.amcharts.com/docs/v3/tutorials/show-groups-map-images-specific-zoom-level/