Skip to content

Commit 01aae0c

Browse files
vicbvicb
authored
feat: add benchmark examples (#678)
1 parent 1193ff4 commit 01aae0c

File tree

8 files changed

+10254
-0
lines changed

8 files changed

+10254
-0
lines changed

‎examples/bench-advanced.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2023 Google LLC
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<html>
19+
<head>
20+
<style>
21+
html,
22+
body,
23+
#map {
24+
margin: 0;
25+
height: 100%;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="map"></div>
31+
<script src="bench-advanced.js" type="module"></script>
32+
<script src="vendor.js" type="module"></script>
33+
</body>
34+
</html>

‎examples/bench-advanced.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Copyright 2023 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { MAP_ID, getLoaderOptions } from "./config";
18+
import { Loader } from "@googlemaps/js-api-loader";
19+
import { MarkerClusterer } from "../src";
20+
import points from "./realworld.json";
21+
22+
// Do not set the mapId to force legacy markers
23+
const mapOptions: google.maps.MapOptions = {
24+
center: { lat: -37.89, lng: 175.46 },
25+
zoom: 8,
26+
maxZoom: 18,
27+
mapId: MAP_ID,
28+
};
29+
30+
new Loader(getLoaderOptions()).load().then(() => {
31+
const element = document.getElementById("map");
32+
33+
const map = new google.maps.Map(element, mapOptions);
34+
35+
const markers = (points as [number, number, string][]).map(
36+
([lat, lng, title]) =>
37+
new google.maps.marker.AdvancedMarkerElement({
38+
position: { lat, lng },
39+
map,
40+
title,
41+
})
42+
);
43+
44+
const markerCluster = new MarkerClusterer({
45+
markers,
46+
algorithmOptions: { maxZoom: 30 },
47+
});
48+
49+
markerCluster.setMap(map);
50+
});

‎examples/bench-leaflet.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2023 Google LLC
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<html>
19+
<head>
20+
<style>
21+
html,
22+
body,
23+
#map {
24+
margin: 0;
25+
height: 100%;
26+
}
27+
</style>
28+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
29+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
30+
crossorigin=""/>
31+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"/>
32+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
33+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
34+
crossorigin=""></script>
35+
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>
36+
</head>
37+
<body>
38+
<div id="map"></div>
39+
<script src="bench-leaflet.js" type="module"></script>
40+
<script src="vendor.js" type="module"></script>
41+
</body>
42+
</html>

‎examples/bench-leaflet.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* Copyright 2023 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import points from "./realworld.json";
18+
19+
declare let L: any;
20+
21+
const tiles = L.tileLayer("//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
22+
maxZoom: 18,
23+
attribution:
24+
'&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ',
25+
});
26+
27+
const map = L.map("map", {
28+
center: L.latLng(-37.89, 175.46),
29+
zoom: 8,
30+
layers: [tiles],
31+
});
32+
33+
const mcg = L.markerClusterGroup({
34+
chunkedLoading: true,
35+
spiderfyOnMaxZoom: false,
36+
});
37+
38+
for (const [lat, lng, title] of points as [number, number, string][]) {
39+
const marker = L.marker(new L.LatLng(lat, lng), { title });
40+
marker.bindPopup(title);
41+
mcg.addLayer(marker);
42+
}
43+
44+
map.addLayer(mcg);

‎examples/bench-legacy.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2023 Google LLC
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<html>
19+
<head>
20+
<style>
21+
html,
22+
body,
23+
#map {
24+
margin: 0;
25+
height: 100%;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="map"></div>
31+
<script src="bench-legacy.js" type="module"></script>
32+
<script src="vendor.js" type="module"></script>
33+
</body>
34+
</html>

‎examples/bench-legacy.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* Copyright 2023 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { getLoaderOptions } from "./config";
18+
import { Loader } from "@googlemaps/js-api-loader";
19+
import { MarkerClusterer } from "../src";
20+
import points from "./realworld.json";
21+
22+
// Do not set the mapId to force legacy markers
23+
const mapOptions: google.maps.MapOptions = {
24+
center: { lat: -37.89, lng: 175.46 },
25+
zoom: 8,
26+
maxZoom: 18,
27+
};
28+
29+
new Loader(getLoaderOptions()).load().then(() => {
30+
const element = document.getElementById("map");
31+
32+
const map = new google.maps.Map(element, mapOptions);
33+
34+
const markers = (points as [number, number, string][]).map(
35+
([lat, lng, label]) =>
36+
new google.maps.Marker({ position: { lat, lng }, label })
37+
);
38+
39+
const markerCluster = new MarkerClusterer({
40+
markers,
41+
algorithmOptions: { maxZoom: 30 },
42+
});
43+
44+
markerCluster.setMap(map);
45+
});

‎examples/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ <h1>Google Maps JavaScript MarkerClusterer</h1>
3333
<li><a href="./renderers/index.html">Renderers</a></li>
3434
<li><a href="./updates/index.html">Updates</a></li>
3535
<li><a href="./defaults/index.html">Defaults</a></li>
36+
<li><a href="./bench-legacy/index.html">Benchmark legacy markers</a></li>
37+
<li><a href="./bench-advanced/index.html">Benchmark advanced markers</a></li>
38+
<li><a href="./bench-leaflet/index.html">Benchmark Leaflet markers</a></li>
3639
</ul>
3740
<label>Google Maps API Key<input id="key" style="width: 400px"></input></label>
3841

0 commit comments

Comments
 (0)