feat: add benchmark examples (#678)

googlemaps · Jun 17, 2023 · 01aae0c · 01aae0c
1 parent 1193ff4
commit 01aae0c
Show file tree

Hide file tree

Showing 8 changed files with 10,254 additions and 0 deletions.
diff --git a/examples/bench-advanced.html b/examples/bench-advanced.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-advanced.js" type="module"></script>
+    <script src="vendor.js" type="module"></script>
+  </body>
+</html>
diff --git a/examples/bench-advanced.ts b/examples/bench-advanced.ts
@@ -0,0 +1,50 @@
+/**
+ * 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 { MAP_ID, getLoaderOptions } from "./config";
+import { Loader } from "@googlemaps/js-api-loader";
+import { MarkerClusterer } 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,
+  mapId: MAP_ID,
+};
+
+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, title]) =>
+      new google.maps.marker.AdvancedMarkerElement({
+        position: { lat, lng },
+        map,
+        title,
+      })
+  );
+
+  const markerCluster = new MarkerClusterer({
+    markers,
+    algorithmOptions: { maxZoom: 30 },
+  });
+
+  markerCluster.setMap(map);
+});
diff --git a/examples/bench-leaflet.html b/examples/bench-leaflet.html
@@ -0,0 +1,42 @@
+<!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>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""/>    
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"/>
+    <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""></script> 
+    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster-src.js"></script>    
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="bench-leaflet.js" type="module"></script>
+    <script src="vendor.js" type="module"></script>
+  </body>
+</html>
diff --git a/examples/bench-leaflet.ts b/examples/bench-leaflet.ts
@@ -0,0 +1,44 @@
+/**
+ * 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 points from "./realworld.json";
+
+declare let L: any;
+
+const tiles = L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  maxZoom: 18,
+  attribution:
+    '&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ',
+});
+
+const map = L.map("map", {
+  center: L.latLng(-37.89, 175.46),
+  zoom: 8,
+  layers: [tiles],
+});
+
+const mcg = L.markerClusterGroup({
+  chunkedLoading: true,
+  spiderfyOnMaxZoom: false,
+});
+
+for (const [lat, lng, title] of points as [number, number, string][]) {
+  const marker = L.marker(new L.LatLng(lat, lng), { title });
+  marker.bindPopup(title);
+  mcg.addLayer(marker);
+}
+
+map.addLayer(mcg);
diff --git a/examples/bench-legacy.html b/examples/bench-legacy.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.js" type="module"></script>
+    <script src="vendor.js" type="module"></script>
+  </body>
+</html>
diff --git a/examples/bench-legacy.ts b/examples/bench-legacy.ts
@@ -0,0 +1,45 @@
+/**
+ * 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 } 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,
+    algorithmOptions: { maxZoom: 30 },
+  });
+
+  markerCluster.setMap(map);
+});
diff --git a/examples/index.html b/examples/index.html
@@ -33,6 +33,9 @@ <h1>Google Maps JavaScript MarkerClusterer</h1>
         <li><a href="./renderers/index.html">Renderers</a></li>
         <li><a href="./updates/index.html">Updates</a></li>
         <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-leaflet/index.html">Benchmark Leaflet markers</a></li>
     </ul>
     <label>Google Maps API Key<input id="key" style="width: 400px"></input></label>