0

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.

2 Answers 2

0

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.

3
  • Thank you for your response. Can you please give me simple code about what kind of data I can put inside pushpin array. I want generate pushpin using longitude and longitude.
    – Bipn Paul
    Commented Jul 24, 2017 at 18:39
  • There are a ton of samples and documentation on this: bing.com/api/maps/sdkrelease/mapcontrol/…
    – rbrundritt
    Commented Jul 25, 2017 at 19:19
  • No, there aren't tons of samples, as a matter of fact very few and repetitive. The only example for clustering uses random generation of pushpins, when trying to make it work with custom pushpins I cannot resolve how to do it.
    – lisandro
    Commented Dec 18, 2018 at 2:14
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.