From ad2bf1c012a5bcab0124feadce8e21de85d6f9a5 Mon Sep 17 00:00:00 2001
From: Pedro Henrique <pcosta@bcfsolutions.net.br>
Date: Tue, 16 May 2023 15:44:08 -0300
Subject: [PATCH] feat: added clusters

---
 src/App.jsx                      |  1 -
 src/components/BingMapsReact.jsx | 13 +++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index e557b98..4577cb8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -32,7 +32,6 @@ function App() {
           )
             .then((res) => res.json())
             .then((jsonRes) => {
-              console.log(jsonRes);
               const newPins = jsonRes.resourceSets[0].resources.map(
                 (resource) => {
                   if (!resource.geocodePoints) {
diff --git a/src/components/BingMapsReact.jsx b/src/components/BingMapsReact.jsx
index 9e23906..f4fe0ec 100644
--- a/src/components/BingMapsReact.jsx
+++ b/src/components/BingMapsReact.jsx
@@ -7,6 +7,7 @@ export default function BingMapsReact({
   mapOptions,
   onMapReady,
   pushPins,
+  clusterPins,
   pushPinsWithInfoboxes,
   viewOptions,
   width,
@@ -129,6 +130,16 @@ export default function BingMapsReact({
       addPushpins(pushPins, map.current, Maps);
     }
 
+    if (clusterPins) {
+      Maps.loadModule('Microsoft.Maps.Clustering', function () {
+        var pushpins = clusterPins.map(function (location) {
+          return new Maps.Pushpin(location.center, location.options)
+        })
+        var clusterLayer = new Maps.ClusterLayer(pushpins, { gridSize: 100 })
+        map.current.layers.insert(clusterLayer)
+      })
+    }
+
     // add infoboxes, if any
     if (pushPinsWithInfoboxes) {
       const infobox = new Maps.Infobox(map.current.getCenter(), {
@@ -150,6 +161,7 @@ export default function BingMapsReact({
     mapOptions,
     onMapReady,
     pushPins,
+    clusterPins,
     pushPinsWithInfoboxes,
     viewOptions,
   ]);
@@ -181,6 +193,7 @@ BingMapsReact.defaultProps = {
   height: "100%",
   onMapReady: null,
   pushPins: null,
+  clusterPins: null,
   pushPinsWithInfoboxes: null,
   viewOptions: null,
   width: "100%",