Skip to content

Commit ac93e90

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

File tree

2 files changed

+471
-1
lines changed

2 files changed

+471
-1
lines changed

‎v180/ex0/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 - Tiles and grid points</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="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">
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
13+
<script src="../js/grid_clusterer.min.js"></script>
14+
<script src="tester.js"></script>
15+
<style>
16+
body, html {
17+
background-color: #FFFFFF;
18+
margin: 0;
19+
padding: 0;
20+
font-family: Roboto, Helvetica, sans-serif;
21+
}
22+
23+
header {
24+
border-bottom: 1px solid #AAAAAA;
25+
font-size: 16pt;
26+
font-weight: bold;
27+
margin: 6px 12px 0 12px;
28+
padding: 6px;
29+
text-align: center;
30+
}
31+
32+
main {
33+
margin: 0;
34+
padding: 6px 12px;
35+
}
36+
37+
section {
38+
margin: 6px 0;
39+
padding: 12px;
40+
}
41+
42+
.center_div {
43+
text-align: center;
44+
margin: 0;
45+
padding: 0;
46+
}
47+
48+
.form_div {
49+
display: inline-block;
50+
padding: 6px;
51+
margin: 0 0 0 12px;
52+
}
53+
.map_viewport {
54+
border: 1px solid #AAAAAA;
55+
height: 560px;
56+
width: 100%;
57+
position: relative;
58+
background: #EFEFEF;
59+
display: block;
60+
overflow: hidden;
61+
margin: 0;
62+
padding: 0;
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<header>
68+
<a href="../index.html">Grid Clusterer v1.8.0</a> - Tiles and grid points
69+
</header>
70+
<main>
71+
<section>
72+
<div class="center_div">
73+
The map below is using the grid clusterer with 200 random data points.
74+
<form id="frm1" onsubmit="tester_obj.config_update( event );">
75+
<div class="form_div">
76+
Tile size (pixels) height x width:
77+
<input type="text" size="3" id="fld_tile_height" name="fld_tile_height" value="256"> x
78+
<input type="text" size="3" id="fld_tile_width" name="fld_tile_width" value="256">
79+
</div>
80+
<div class="form_div">
81+
Grid point rows, columns:
82+
<select id="fld_grid_rows" name="fld_grid_rows">
83+
<option value="1">1</option>
84+
<option value="2">2</option>
85+
<option value="3">3</option>
86+
<option value="4" selected>4</option>
87+
<option value="5">5</option>
88+
<option value="6">6</option>
89+
<option value="7">7</option>
90+
<option value="8">8</option>
91+
</select> ,
92+
<select id="fld_grid_cols" name="fld_grid_cols">
93+
<option value="1">1</option>
94+
<option value="2">2</option>
95+
<option value="3">3</option>
96+
<option value="4" selected>4</option>
97+
<option value="5">5</option>
98+
<option value="6">6</option>
99+
<option value="7">7</option>
100+
<option value="8">8</option>
101+
</select>
102+
</div>
103+
<div class="form_div">
104+
<button id="btn1" type="submit">Update</button>
105+
</div>
106+
</form>
107+
</div>
108+
</section>
109+
<div id="mvp" class="map_viewport"></div>
110+
<section id="log">
111+
<div class="center_div">
112+
<b>Click on the map, a cluster marker or grid point marker to view details.</b>
113+
</div>
114+
</section>
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)