Bing Map Pushpin - How to add clustering layer on Bing Map with custom data (co-ordinates) using Bing Maps V8 interactive SDK? - bing-api

Question

I found an official article which is showing, how to add clustering layer to Map but that example takes input from a TestDataGenerator function.I don't know how to pass my information so that map will generate pushpin based on my data.
Bing Map Official Article on "Add clustering layer to map"
<div id='printoutPanel'></div>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(39.393486, -98.100769),
zoom: 3
});
Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {
// Creating sample Pushpin data within map view
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var clusterLayer = new Microsoft.Maps.ClusterLayer(pushpins, { gridSize: 100 });
map.layers.insert(clusterLayer);
});
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
Please visit the above link if anything is un-clear.

Answer 1

The test data generator returns an array of pushpins. Simply loop through your custom data and create an array of pushpins and then pass that into the clustering layer.

Answer 2

First add a new to your page with id and style display:none
add a gridview to this div
Bind your data to this gridview
Code Sample to bind data to map - works in ie - recently started having issues in Edge and Firefor - works on Safari
Issues seem to be related to attempts to add second cluster layer
Comments appreciated
function loadMap() {
var MaxLat = 0;
var MinLon = 0;
var MinLat = 0;
var MaxLon = 0;
var MLon = 0;
var MLat = 0;
var c;
var Val2;
var Val3;
var Lat;
var Lon;
var Val1;
var PPO;
var Val4;
var Val5;
if (typeof GVBounds !== "undefined" && GVBounds !== null) {
var Mcell = GVBounds.rows[1].cells;
MaxLat = Mcell(0).innerHTML;
MinLon = Mcell(1).innerHTML;
MinLat = Mcell(2).innerHTML;
MaxLon = Mcell(3).innerHTML;
MLat = Mcell(4).innerHTML;
MLon = Mcell(5).innerHTML;
}
var map;
var Rec = MaxLat + "," + MinLon + "," + MinLat + "," + MaxLon
var box = Microsoft.Maps.LocationRect.fromString(Rec);
//var PPCDr = new Microsoft.Maps.Layer();
//var PPCPU = new Microsoft.Maps.Layer();
//var PPCD = new Microsoft.Maps.Layer();
//var PPC = []
var pinDr;
var pinPU;
var pinD;
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//center: new Microsoft.Maps.Location(MLat, MLon)
}
);
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var Pins = [];
Pins = GetPins();
//Create a ClusterLayer and add it to the map.
clusterLayer = new Microsoft.Maps.ClusterLayer(Pins, { gridSize: 10 });
map.layers.insert(clusterLayer);
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
var DrPins = [];
DrPins = GetDrPins();
//Create a ClusterLayer and add it to the map.
DrclusterLayer = new Microsoft.Maps.ClusterLayer(DrPins, { gridSize: 1 });
map.layers.insert(DrclusterLayer);
});
map.setView({ bounds: box, padding: 20 });
}
RayD