Reputation: 33
I am trying to work with bing map marker clustering in Javascript.The scenario I am fetching a huge chunk of data from database in the lot of 10000 per call and then rendering the set on google map by sending the lat lng array to the marker cluster. My data set consists of 100000 outlets. I am fetching 10000 outlets at once and this is being called 10 times so 10 clusters which convert to one or two clusters as per zoom level.
The problem is the clusters are only displayed once the whole data is loaded. i want it to keep updating the map simultaneously is there a way to do it?
Code:
function initializeMap(zoom)
{
var mapDiv = document.getElementById('newmap');
map = new Microsoft.Maps.Map('#newmap', {
credentials: '',
zoom:zoom
});
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
visible: false
});
infobox.setMap(map);
}
function addMarker1(mapData,outletname,outletData,colordata)
{
if(clusterLayer)
{
clusterLayer.clear();
}
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function ()
{
var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapData[i].lat, mapData[i].lng),
{
icon: svgTemplate,
color: strokeColor,
text: '1',
}
);
pin.metadata =
{
title: i,
description: title
};
Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
pin.metedata = mapData[i];
new_arr.push(pin);
}
clusterLayer = new Microsoft.Maps.ClusterLayer(new_arr,
{
clusteredPinCallback: createCustomClusteredPin,
});
map.layers.insert(clusterLayer);
});
}
//this is being called as per data limit set
// new_arr is a global array which gets updated everytime with new data
addMarker1(j,outletname,outletData,colordata);
Upvotes: 1
Views: 558
Reputation: 1198
You are creating a new cluster layer every time, which is not necessary. Once you have one clusterLayer created, upon receiving new data, you can just call
clusterLayer.setPushpins(new_arr);
to update the clusters.
Source: https://msdn.microsoft.com/en-us/library/mt712808.aspx
Upvotes: 1