docs: add example using SuperClusterViewportAlgorithm (#709)

mwaddell · web-flow · commit 7a48ee0d834d · 2023-08-11T17:13:16.000-07:00
diff --git a/examples/bench-leaflet.ts b/examples/bench-leaflet.ts
@@ -16,7 +16,7 @@
 
 import points from "./realworld.json";
 
-declare let L: any;
+declare let L: any; /* eslint-disable-line @typescript-eslint/no-explicit-any */
 
 const tiles = L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
   maxZoom: 18,
diff --git a/examples/bench-legacy-viewport.html b/examples/bench-legacy-viewport.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2023 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<html>
+  <head>
+    <style>
+      html,
+      body,
+      #map {
+        margin: 0;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="bench-legacy-viewport.js" type="module"></script>
+    <script src="vendor.js" type="module"></script>
+  </body>
+</html>
diff --git a/examples/bench-legacy-viewport.ts b/examples/bench-legacy-viewport.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { getLoaderOptions } from "./config";
+import { Loader } from "@googlemaps/js-api-loader";
+import { MarkerClusterer, SuperClusterViewportAlgorithm } from "../src";
+import points from "./realworld.json";
+
+// Do not set the mapId to force legacy markers
+const mapOptions: google.maps.MapOptions = {
+  center: { lat: -37.89, lng: 175.46 },
+  zoom: 8,
+  maxZoom: 18,
+};
+
+new Loader(getLoaderOptions()).load().then(() => {
+  const element = document.getElementById("map");
+
+  const map = new google.maps.Map(element, mapOptions);
+
+  const markers = (points as [number, number, string][]).map(
+    ([lat, lng, label]) =>
+      new google.maps.Marker({ position: { lat, lng }, label })
+  );
+
+  const markerCluster = new MarkerClusterer({
+    markers,
+    algorithm: new SuperClusterViewportAlgorithm({
+      maxZoom: 30,
+      viewportPadding: 60,
+    }),
+  });
+
+  markerCluster.setMap(map);
+});
diff --git a/examples/index.html b/examples/index.html
@@ -35,6 +35,7 @@ <h1>Google Maps JavaScript MarkerClusterer</h1>
         <li><a href="./defaults/index.html">Defaults</a></li>
         <li><a href="./bench-legacy/index.html">Benchmark legacy markers</a></li>
         <li><a href="./bench-advanced/index.html">Benchmark advanced markers</a></li>
+        <li><a href="./bench-legacyviewport/index.html">Benchmark legacy markers with viewport</a></li>
         <li><a href="./bench-leaflet/index.html">Benchmark Leaflet markers</a></li>
     </ul>
     <label>Google Maps API Key<input id="key" style="width: 400px"></input></label>
diff --git a/src/marker-utils.ts b/src/marker-utils.ts
@@ -15,14 +15,16 @@
  */
 
 /**
- * util class that creates a common set of convenience functions to wrap
- * shared behavior of Advanced Markers and Markers.
+ * Supports markers of either either "legacy" or "advanced" types.
  */
-
 export type Marker =
   | google.maps.Marker
   | google.maps.marker.AdvancedMarkerElement;
 
+/**
+ * util class that creates a common set of convenience functions to wrap
+ * shared behavior of Advanced Markers and Markers.
+ */
 export class MarkerUtils {
   public static isAdvancedMarkerAvailable(map: google.maps.Map): boolean {
     return (
