You need to sign in to do that
Don't have an account?

How can i render 60000 accounts on leaflet map using markerclustergroup
I have 60000 accounts that i want to display on the map but it gives me unrsponisve page. I tried like this
var markerList = [];
var myRenderer = L.canvas({ padding: 0.5 }); // iv read that is better to use a canvas
var markers = L.markerClusterGroup( {
chunkedLoading: true, // i found that this prevent the webpage to be unresponsive but acually it does not
chunkInterval: 300,
iconCreateFunction: function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
}
else if (childCount < 100) {
c += 'medium';
}
else {
c += 'large';
}
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>',
className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}
});
map.addLayer(markers); // i added the markers(with nothing in) to the map just to create the connection between map and markers
//add for each account a marker on map with the posibility to see the distance and to open the rute in google maps
for (var i=0; i<accounts.length; i++) {
var account = accounts[i];
var marker = L.marker(latLng, {icon:marker}, {account: account},{renderer: myRenderer})
markerList.push(marker);
}
markers.addLayers(markerList); // i added the markerlist to the markers and automatically the map is pupdated because map from leaflet has a marker watcher that detects every change of markers
My problem is that i could not find a more efficent way to upload markers on the map and the maximum number of markers that i can add now is around 20000 but no more than that and i need 60k or even more
var markerList = [];
var myRenderer = L.canvas({ padding: 0.5 }); // iv read that is better to use a canvas
var markers = L.markerClusterGroup( {
chunkedLoading: true, // i found that this prevent the webpage to be unresponsive but acually it does not
chunkInterval: 300,
iconCreateFunction: function (cluster) {
var childCount = cluster.getChildCount();
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
}
else if (childCount < 100) {
c += 'medium';
}
else {
c += 'large';
}
return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>',
className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
}
});
map.addLayer(markers); // i added the markers(with nothing in) to the map just to create the connection between map and markers
//add for each account a marker on map with the posibility to see the distance and to open the rute in google maps
for (var i=0; i<accounts.length; i++) {
var account = accounts[i];
var marker = L.marker(latLng, {icon:marker}, {account: account},{renderer: myRenderer})
markerList.push(marker);
}
markers.addLayers(markerList); // i added the markerlist to the markers and automatically the map is pupdated because map from leaflet has a marker watcher that detects every change of markers
My problem is that i could not find a more efficent way to upload markers on the map and the maximum number of markers that i can add now is around 20000 but no more than that and i need 60k or even more
and i manage to improve it a bit but not enough
for (var i=0, len = accounts.length; i<len; i++) {
var account = accounts[i];
var latLng = [account.Latitude, account.Longitude];
var marker = L.marker(latLng, {icon:markerColor},{account: account},{renderer: myRenderer});
markerList.push(marker);
}
Any ideas ?
All Answers
Please use apex class to get the data and preapre the json formate whihc is matched for leaflet formate and pass the data to lead left directly rather than doing in javascript
and i manage to improve it a bit but not enough
for (var i=0, len = accounts.length; i<len; i++) {
var account = accounts[i];
var latLng = [account.Latitude, account.Longitude];
var marker = L.marker(latLng, {icon:markerColor},{account: account},{renderer: myRenderer});
markerList.push(marker);
}
Any ideas ?