Skip to content

Commit 2674635

Browse files
bdcoder2bdcoder2
authored
Add files via upload
1 parent 6c23fb5 commit 2674635

2 files changed

Lines changed: 800 additions & 1 deletion

File tree

‎v190/ex2/index.html‎

Lines changed: 270 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,270 @@
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.9.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: 0;
48+
padding: 6px;
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+
.mzl_div {
84+
margin: 0;
85+
padding: 6px;
86+
text-align:center;
87+
}
88+
89+
.opt_div {
90+
margin:0;
91+
padding:6px;
92+
text-align:center;
93+
}
94+
</style>
95+
</head>
96+
<body>
97+
<header>
98+
<a href="../index.html"><b>Grid Clusterer v1.9.0</b></a> - Clusterer configuration options and performance
99+
</header>
100+
<main>
101+
<div class="flex_div">
102+
<div class="flex_div_left">
103+
<form id="frm1" onsubmit="return tester_obj.test_submit( event );">
104+
<div class="config_div">
105+
<div class="opt_div">
106+
Enter the number of random data points to create within the map bounds:<br>
107+
<input type="text" size="7" id="fld_dpc" name="fld_dpc" value="1000"><br><br>
108+
<button id="btn1" type="submit">Create New Data Points</button>
109+
</div>
110+
</div>
111+
</form>
112+
<form id="frm2" onsubmit="tester_obj.config_update( event );">
113+
<div class="config_div">
114+
<div class="opt_div">
115+
<b>Map Options</b>
116+
</div>
117+
<div class="opt_div">
118+
Fractional Zoom Enabled:<br>
119+
<input type="checkbox" checked id="fld_fractional_zoom_enabled" name="fld_fractional_zoom_enabled" value="1">
120+
</div>
121+
</div>
122+
<div class="config_div">
123+
<div class="opt_div">
124+
<b>Clusterer Options:</b>
125+
</div>
126+
<div class="opt_div">
127+
Tile height x width (pixels):<br>
128+
<input type="text" size="3" id="fld_tile_height" name="fld_tile_height" value="256"> x
129+
<input type="text" size="3" id="fld_tile_width" name="fld_tile_width" value="256">
130+
</div>
131+
<div class="opt_div">
132+
Cluster size minimum:<br>
133+
<input type="text" size="5" id="fld_cluster_size_min" name="fld_cluster_size_min" value="20">
134+
</div>
135+
<div class="opt_div">
136+
Cluster zoom maximum:<br>
137+
<select id="fld_cluster_zoom_max" name="fld_cluster_zoom_max">
138+
<option value="1">1</option>
139+
<option value="2">2</option>
140+
<option value="3">3</option>
141+
<option value="4">4</option>
142+
<option value="5">5</option>
143+
<option value="6">6</option>
144+
<option value="7">7</option>
145+
<option value="8">8</option>
146+
<option value="9">9</option>
147+
<option value="10">10</option>
148+
<option value="11">11</option>
149+
<option value="12">12</option>
150+
<option value="13">13</option>
151+
<option value="14" selected>14</option>
152+
<option value="15">15</option>
153+
<option value="16">16</option>
154+
<option value="17">17</option>
155+
<option value="18">18</option>
156+
<option value="19">19</option>
157+
<option value="20">20</option>
158+
<option value="21">21</option>
159+
<option value="22">22</option>
160+
</select>
161+
</div>
162+
<div class="opt_div">
163+
Grid rows, columns:<br>
164+
<select id="fld_grid_rows" name="fld_grid_rows">
165+
<option value="1">1</option>
166+
<option value="2">2</option>
167+
<option value="3">3</option>
168+
<option value="4" selected>4</option>
169+
<option value="5">5</option>
170+
<option value="6">6</option>
171+
<option value="7">7</option>
172+
<option value="8">8</option>
173+
</select> ,
174+
<select id="fld_grid_cols" name="fld_grid_cols">
175+
<option value="1">1</option>
176+
<option value="2">2</option>
177+
<option value="3">3</option>
178+
<option value="4" selected>4</option>
179+
<option value="5">5</option>
180+
<option value="6">6</option>
181+
<option value="7">7</option>
182+
<option value="8">8</option>
183+
</select>
184+
</div>
185+
<div class="opt_div">
186+
Tile borders visible:<br>
187+
<input type="checkbox" checked id="fld_tile_borders_visible" name="fld_tile_borders_visible" value="1">
188+
</div>
189+
<div class="opt_div">
190+
Tile border color:<br>
191+
<select id="fld_tile_border_color" name="fld_tile_border_color">
192+
<option value="#008000" selected>#008000</option>
193+
<option value="black">black</option>
194+
<option value="blue">blue</option>
195+
<option value="green">green</option>
196+
<option value="red">red</option>
197+
<option value="yellow">yellow</option>
198+
</select>
199+
</div>
200+
<div class="opt_div">
201+
Tile border style:<br>
202+
<select id="fld_tile_border_style" name="fld_tile_border_style">
203+
<option value="solid">solid</option>
204+
<option value="dashed" selected>dashed</option>
205+
<option value="dotted">dotted</option>
206+
<option value="double">double</option>
207+
<option value="groove">groove</option>
208+
<option value="hidden">hidden</option>
209+
<option value="inset">inset</option>
210+
<option value="none">none</option>
211+
<option value="outset">outset</option>
212+
<option value="ridge">ridge</option>
213+
</select>
214+
</div>
215+
<div class="opt_div">
216+
Tile border width:<br>
217+
<select id="fld_tile_border_width" name="fld_tile_border_width">
218+
<option value="1px" selected>1px</option>
219+
<option value="2px">2px</option>
220+
<option value="3px">3px</option>
221+
<option value="thin">thin</option>
222+
<option value="medium">medium</option>
223+
<option value="thick">thick</option>
224+
</select>
225+
</div>
226+
<div class="opt_div">
227+
<button id="btn2" type="submit">Update Clusterer Options</button>
228+
</div>
229+
</div>
230+
</form>
231+
</div>
232+
<div class="flex_div_right">
233+
<div class="map_viewport" id="mvp"></div>
234+
<div class="mzl_div">
235+
<b>Map Zoom Level</b>: <span id="mzl" style="margin: 0 20px 0 0;"></span>
236+
</div>
237+
<section>
238+
<b>Time to redraw tiles:</b> <span id="ts5"></span>
239+
</section>
240+
<section>
241+
<b>Initialization Statistics:</b>
242+
<ul>
243+
<li>Data points created: <span id="ts0"></span></li>
244+
<li>Time to create data points: <span id="ts1"></span></li>
245+
<li>Time to create cluster object AND load data: <span id="ts2"></span></li>
246+
</ul>
247+
</section>
248+
<section>
249+
<b>Notes:</b>
250+
<ul>
251+
<li>This example allows you to set various options used by the clusterer.</li>
252+
<li>The internal default cluster marker click handler is used.</li>
253+
<li>Clicking on a grid point marker will display an info window with the clicked-on grid and tile data.</li>
254+
</ul>
255+
</section>
256+
</div>
257+
</div>
258+
</main>
259+
<script>
260+
async function map_init() {
261+
// Request needed libraries ...
262+
const { Map } = await google.maps.importLibrary("maps");
263+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
264+
tester_obj = new tester( 'mvp', 37.4220698, -122.0862784 );
265+
}
266+
</script>
267+
<!-- Async script executes immediately and must be AFTER any DOM elements used in callback. -->
268+
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1RpoB4WdH8GQ6odWnELHcnDg6tQi8KWE&loading=async&callback=map_init"></script>
269+
</body>
270+
</html>

0 commit comments

Comments
 (0)