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.
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.