Skip to content

Commit ae92f1b

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

File tree

2 files changed

+789
-1
lines changed

2 files changed

+789
-1
lines changed

‎v180/ex2/index.html‎

Lines changed: 261 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,261 @@
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 - Configuration options and performance</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link rel="preconnect" href="https://ajax.googleapis.com" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Kalam:300,400%7CSource+Sans+Pro:300,400,600,700" />
11+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
12+
<script src="../js/grid_clusterer.min.js"></script>
13+
<script src="tester.js"></script>
14+
<style>
15+
body, html {
16+
background-color: #FFFFFF;
17+
margin: 0;
18+
padding: 0;
19+
font-family: Roboto, Helvetica, sans-serif;
20+
}
21+
22+
form {
23+
border: 1px solid #AAAAAA;
24+
margin: 0 6px 0 0;
25+
padding: 6px;
26+
}
27+
28+
header {
29+
border-bottom: 1px solid #AAAAAA;
30+
font-size: 16pt;
31+
font-weight: bold;
32+
margin: 6px 12px 0 12px;
33+
padding: 6px;
34+
text-align: center;
35+
}
36+
37+
li {
38+
padding: 4px 0;
39+
}
40+
41+
main {
42+
margin: 0;
43+
padding: 6px 12px;
44+
}
45+
46+
section {
47+
margin: 6px 0;
48+
padding: 12px;
49+
}
50+
51+
ul {
52+
margin:0;
53+
}
54+
55+
.map_viewport {
56+
height: 640px;
57+
width: 100%;
58+
position: relative;
59+
background: #EFEFEF;
60+
display: block;
61+
overflow: hidden;
62+
border: 1px solid #AAAAAA;
63+
margin: 0;
64+
padding: 0;
65+
}
66+
67+
.flex_div {
68+
display: flex;
69+
}
70+
71+
.flex_div_left {
72+
flex: 0 0 240px;
73+
}
74+
.flex_div_right {
75+
flex: 1;
76+
}
77+
78+
.config_div {
79+
margin: 0;
80+
padding: 6px;
81+
}
82+
83+
.opt_div {
84+
margin:0;
85+
padding:6px;
86+
text-align:center;
87+
}
88+
89+
.stats_div {
90+
margin: 12px 0 0 0;
91+
padding: 0;
92+
}
93+
</style>
94+
</head>
95+
<body>
96+
<header>
97+
<a href="../index.html"><b>Grid Clusterer v1.8.0</b></a> - Clusterer configuration options and performance
98+
</header>
99+
<main>
100+
<div class="flex_div">
101+
<div class="flex_div_left">
102+
<form id="frm1" onsubmit="return tester_obj.test_submit( event );">
103+
<div class="config_div">
104+
<div class="opt_div">
105+
Enter the number of random data points to create within the map bounds:<br>
106+
<input type="text" size="7" id="fld_dpc" name="fld_dpc" value="1000"><br><br>
107+
<button id="btn1" type="submit">Create New Data Points</button>
108+
</div>
109+
</div>
110+
</form>
111+
<form id="frm2" onsubmit="tester_obj.config_update( event );">
112+
<div class="config_div">
113+
<div class="opt_div">
114+
<b>Clusterer Options:</b>
115+
</div>
116+
<div class="opt_div">
117+
Tile height x width (pixels):<br>
118+
<input type="text" size="3" id="fld_tile_height" name="fld_tile_height" value="256"> x
119+
<input type="text" size="3" id="fld_tile_width" name="fld_tile_width" value="256">
120+
</div>
121+
<div class="opt_div">
122+
Cluster marker click check:<br>
123+
<input type="checkbox" checked id="fld_cluster_marker_click_check" name="fld_cluster_marker_click_check" value="1">
124+
</div>
125+
<div class="opt_div">
126+
Cluster size minimum:<br>
127+
<input type="text" size="5" id="fld_cluster_size_min" name="fld_cluster_size_min" value="20">
128+
</div>
129+
<div class="opt_div">
130+
Cluster zoom maximum:<br>
131+
<select id="fld_cluster_zoom_max" name="fld_cluster_zoom_max">
132+
<option value="1">1</option>
133+
<option value="2">2</option>
134+
<option value="3">3</option>
135+
<option value="4">4</option>
136+
<option value="5">5</option>
137+
<option value="6">6</option>
138+
<option value="7">7</option>
139+
<option value="8">8</option>
140+
<option value="9">9</option>
141+
<option value="10">10</option>
142+
<option value="11">11</option>
143+
<option value="12">12</option>
144+
<option value="13">13</option>
145+
<option value="14" selected>14</option>
146+
<option value="15">15</option>
147+
<option value="16">16</option>
148+
<option value="17">17</option>
149+
<option value="18">18</option>
150+
<option value="19">19</option>
151+
<option value="20">20</option>
152+
<option value="21">21</option>
153+
<option value="22">22</option>
154+
</select>
155+
</div>
156+
<div class="opt_div">
157+
Grid rows, columns:<br>
158+
<select id="fld_grid_rows" name="fld_grid_rows">
159+
<option value="1">1</option>
160+
<option value="2">2</option>
161+
<option value="3">3</option>
162+
<option value="4" selected>4</option>
163+
<option value="5">5</option>
164+
<option value="6">6</option>
165+
<option value="7">7</option>
166+
<option value="8">8</option>
167+
</select> ,
168+
<select id="fld_grid_cols" name="fld_grid_cols">
169+
<option value="1">1</option>
170+
<option value="2">2</option>
171+
<option value="3">3</option>
172+
<option value="4" selected>4</option>
173+
<option value="5">5</option>
174+
<option value="6">6</option>
175+
<option value="7">7</option>
176+
<option value="8">8</option>
177+
</select>
178+
</div>
179+
<div class="opt_div">
180+
Tile borders visible:<br>
181+
<input type="checkbox" checked id="fld_tile_borders_visible" name="fld_tile_borders_visible" value="1">
182+
</div>
183+
<div class="opt_div">
184+
Tile border color:<br>
185+
<select id="fld_tile_border_color" name="fld_tile_border_color">
186+
<option value="#008000" selected>#008000</option>
187+
<option value="black">black</option>
188+
<option value="blue">blue</option>
189+
<option value="green">green</option>
190+
<option value="red">red</option>
191+
<option value="yellow">yellow</option>
192+
</select>
193+
</div>
194+
<div class="opt_div">
195+
Tile border style:<br>
196+
<select id="fld_tile_border_style" name="fld_tile_border_style">
197+
<option value="solid">solid</option>
198+
<option value="dashed" selected>dashed</option>
199+
<option value="dotted">dotted</option>
200+
<option value="double">double</option>
201+
<option value="groove">groove</option>
202+
<option value="hidden">hidden</option>
203+
<option value="inset">inset</option>
204+
<option value="none">none</option>
205+
<option value="outset">outset</option>
206+
<option value="ridge">ridge</option>
207+
</select>
208+
</div>
209+
<div class="opt_div">
210+
Tile border width:<br>
211+
<select id="fld_tile_border_width" name="fld_tile_border_width">
212+
<option value="1px" selected>1px</option>
213+
<option value="2px">2px</option>
214+
<option value="3px">3px</option>
215+
<option value="thin">thin</option>
216+
<option value="medium">medium</option>
217+
<option value="thick">thick</option>
218+
</select>
219+
</div>
220+
<div class="opt_div">
221+
<button id="btn2" type="submit">Update Clusterer Options</button>
222+
</div>
223+
</div>
224+
</form>
225+
</div>
226+
<div class="flex_div_right">
227+
<div class="map_viewport" id="mvp"></div>
228+
<section>
229+
Map Zoom Level: <span id="mzl" style="margin: 0 20px 0 0;"></span> Time to redraw tiles: <span id="ts5"></span>
230+
<div class="stats_div">
231+
<b>Initialization Statistics:</b>
232+
<ul>
233+
<li>Data points created: <span id="ts0"></span></li>
234+
<li>Time to create data points: <span id="ts1"></span></li>
235+
<li>Time to create cluster object AND load data: <span id="ts2"></span></li>
236+
</ul>
237+
</div>
238+
</section>
239+
<section>
240+
<b>Notes:</b>
241+
<ul>
242+
<li>This example allows you to set various options used by the clusterer.</li>
243+
<li>The internal default cluster marker click handler is used.</li>
244+
<li>No handler is set for grid point marker clicks.</li>
245+
</ul>
246+
</section>
247+
</div>
248+
</div>
249+
</main>
250+
<script>
251+
async function map_init() {
252+
// Request needed libraries ...
253+
const { Map } = await google.maps.importLibrary("maps");
254+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
255+
tester_obj = new tester( 'mvp', 37.4220698, -122.0862784 );
256+
}
257+
</script>
258+
<!-- Async script executes immediately and must be AFTER any DOM elements used in callback. -->
259+
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1RpoB4WdH8GQ6odWnELHcnDg6tQi8KWE&loading=async&callback=map_init"></script>
260+
</body>
261+
</html>

0 commit comments

Comments
 (0)