Skip to content

Commit a554ace

Browse files
author
bdcoder2
authored
Add files via upload
1 parent ac93e90 commit a554ace

File tree

2 files changed

+428
-1
lines changed

2 files changed

+428
-1
lines changed

‎v180/ex1/index.html‎

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,127 @@
1-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Grid Clusterer v1.8.0 - Creating data points vs creating Google map markers</title>
7+
<link rel="preconnect" href="https://ajax.googleapis.com" />
8+
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
11+
<link rel="preconnect" href="https://apis.google.com" crossorigin>
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans_old:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap">
13+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
14+
<script src="../js/grid_clusterer.min.js"></script>
15+
<script src="tester.js"></script>
16+
<style>
17+
body, html {
18+
background-color: #FFFFFF;
19+
margin: 0;
20+
padding: 0;
21+
font-family: Roboto, Helvetica, sans-serif;
22+
}
23+
24+
form {
25+
border: 1px solid #AAAAAA;
26+
margin: 0;
27+
padding: 6px;
28+
}
29+
30+
header {
31+
border-bottom: 1px solid #AAAAAA;
32+
font-size: 16pt;
33+
font-weight: bold;
34+
margin: 6px 12px 0 12px;
35+
padding: 6px;
36+
text-align: center;
37+
}
38+
39+
li {
40+
padding: 4px 0;
41+
}
42+
43+
main {
44+
margin: 0;
45+
padding: 6px 12px;
46+
}
47+
48+
section {
49+
margin: 6px 0;
50+
padding: 12px;
51+
}
52+
53+
.map_viewport {
54+
height: 256px;
55+
width: 100%;
56+
position: relative;
57+
background: #EFEFEF;
58+
display: block;
59+
overflow: hidden;
60+
border: 1px solid #AAAAAA;
61+
margin: 6px 0;
62+
padding: 0;
63+
}
64+
65+
.center_div {
66+
margin: 0;
67+
padding: 6px;
68+
text-align: center;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<header>
74+
<b><a href="../index.html">Grid Clusterer v1.8.0</a> - Creating data points vs creating Google map markers</b>
75+
</header>
76+
<main>
77+
<section>
78+
<p>
79+
Nearly every mapping application will use &quot;data points&quot; that contain
80+
latitude and longitude values. So why not use the latitude and longitude values
81+
as input into a clusterer rather than spending time creating Google map markers
82+
for use as input? The majority of the individual map markers created are never
83+
displayed, which is a waste of memory.
84+
</p>
85+
<p>
86+
In this example, we compare the time required to create &quot;data_point&quot; objects
87+
vs creating Google map markers. The example illustrates the performance gain by
88+
omitting the need to create Google map markers as input to a clusterer.
89+
</p>
90+
<p>
91+
Note we do not display any markers on the map, as we are only measuring the time
92+
to create them.
93+
</p>
94+
<form id="frm1" onsubmit="return tester_obj.test_submit( event );">
95+
<div class="center_div">
96+
<b>Enter the number of random data points to create within the map bounds:</b>
97+
</div>
98+
<div class="center_div">
99+
<input type="text" size="7" id="fld_dpc" name="fld_dpc" value="10000">
100+
<button id="btn1" type="submit">Create New Data Points</button>
101+
</div>
102+
</form>
103+
</section>
104+
<section>
105+
<b>Statistics:</b>
106+
<ul>
107+
<li>Total data points: <span id="ts0"></span></li>
108+
<li>Time to create data points: <span id="ts1"></span></li>
109+
<li>Time to create Google map markers: <span id="ts2"></span></li>
110+
<li>Difference: <span id="ts3"></span></li>
111+
</ul>
112+
<div class="center_div" id="ts4"></div>
113+
</section>
114+
<div class="map_viewport" id="mvp"></div>
115+
</main>
116+
<script>
117+
async function map_init() {
118+
// Request needed libraries ...
119+
const { Map } = await google.maps.importLibrary("maps");
120+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
121+
tester_obj = new tester( 'mvp' );
122+
}
123+
</script>
124+
<!-- Async script executes immediately and must be AFTER any DOM elements used in callback. -->
125+
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1RpoB4WdH8GQ6odWnELHcnDg6tQi8KWE&loading=async&callback=map_init"></script>
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)