Samples/Clustering/Basics/Basic Clustering.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic Clustering - Bing Maps Samples</title>

    <meta charset="utf-8" />
	<link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to implement basic pushpin clustering into your app." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
    <meta name="author" content="Microsoft Bing Maps" />
    <meta name="screenshot" content="bmv8-basicclusteringexample.jpg" />
    
    <script type="text/javascript">
    var map, clusterLayer;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});

        //Load the Clustering module.
        Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
            //Generate 1,000 random pushpins in the map view. 
            var pins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());

            //Create a ClusterLayer and add it to the map.
            clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
            map.layers.insert(clusterLayer);
        });
    }
    </script>
    
</head>
<body>
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>

    <fieldset style="width:800px;margin-top:10px;">
        <legend>Basic Clustering Sample</legend>
        This sample shows how to implement basic pushpin clustering into your app. 
        Zoom in and notice how the clusters break apart into their individual pushpins. 
        Zoom out and see the pushpins group together into clusters. 
        Clustering helps keep the map uncluttered while also reducing the number of objects being rendered which improves performance.
    </fieldset>

    <script>
        // Dynamic load the Bing Maps Key and Script
        // Get your own Bing Maps key at https://www.microsoft.com/maps
        (async () => {
            let script = document.createElement("script");
            let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
            script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
            document.body.appendChild(script);
        })();
    </script>
</body>
</html>