Skip to content

Commit 6130cb6

Browse files
author
bdcoder2
authored
Add files via upload
1 parent c2613f3 commit 6130cb6

File tree

6 files changed

+2673
-1
lines changed

6 files changed

+2673
-1
lines changed

‎v180/grid_boxes_0.jpg‎

99.6 KB
Loading

‎v180/grid_boxes_1.jpg‎

108 KB
Loading

‎v180/index.html‎

Lines changed: 204 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,204 @@
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</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+
<style>
13+
body, html {
14+
background-color: #FFFFFF;
15+
margin: 0;
16+
padding: 0;
17+
font-family: Roboto, Helvetica, sans-serif;
18+
}
19+
20+
footer {
21+
border-top: 1px solid #AAAAAA;
22+
margin: 0 12px 6px 12px;
23+
padding: 6px;
24+
text-align: center;
25+
}
26+
27+
header {
28+
border-bottom: 1px solid #AAAAAA;
29+
font-size: 16pt;
30+
font-weight: bold;
31+
margin: 6px 12px 0 12px;
32+
padding: 6px;
33+
text-align: center;
34+
}
35+
36+
li {
37+
padding: 4px 0;
38+
}
39+
40+
main {
41+
margin: 0;
42+
padding: 6px 12px;
43+
}
44+
45+
pre {
46+
margin: 16px 0 0 0;
47+
padding: 0;
48+
white-space: pre-wrap;
49+
white-space: -moz-pre-wrap;
50+
white-space: -o-pre-wrap;
51+
word-wrap: break-word;
52+
}
53+
54+
section {
55+
margin: 6px 0;
56+
padding: 12px;
57+
}
58+
59+
.code_div {
60+
background-color: #F1F3F4;
61+
border: 1px solid #AAAAAA;
62+
display: inline-block;
63+
margin: 6px 0;
64+
padding: 0 16px 0 16px;
65+
font-family: 'Courier New', Courier, monospace;
66+
font-size: 12pt;
67+
}
68+
69+
.img_div {
70+
margin:6px;
71+
padding:0;
72+
}
73+
</style>
74+
</head>
75+
<body>
76+
<header>
77+
Grid Clusterer v1.8.0
78+
</header>
79+
<main>
80+
<section>
81+
<h1>Overview</h1>
82+
<p>
83+
The grid clusterer uses the <a href="https://developers.google.com/maps/documentation/javascript/reference">Google maps API</a>
84+
to manage a large number of &quot;data points&quot;, and displays the data points in grid-like &quot;clusters&quot;.
85+
</p>
86+
<p>
87+
Use the following links to learn about the grid clusterer:
88+
</p>
89+
<ul>
90+
<li><a href="./ex1/index.html">Creating data points vs creating Google map markers</a></li>
91+
<li><a href="./ex0/index.html">Tiles and grid points</a></li>
92+
<li><a href="./ex2/index.html">Clusterer configuration options and performance</a></li>
93+
<li><a href="./ex3/index.html">Enabling and disabling cluster marker click checks</a></li>
94+
<li><a href="reference.html">Clusterer Reference</a></li>
95+
</ul>
96+
<h2>Data Points</h2>
97+
<p>
98+
The grid clusterer accepts &quot;data point&quot; objects as input. A data point
99+
object has the following properties:
100+
</p>
101+
<div class="code_div">
102+
<pre>
103+
{
104+
key: number | string, // The data point key (any unique number or string)
105+
lat: number, // The data point latitude
106+
lon: number // The data point longitude
107+
}
108+
</pre>
109+
</div>
110+
<p>
111+
An example of a data point with a numeric key is shown below:
112+
</p>
113+
<div class="code_div">
114+
<pre>
115+
data_pt = { key: 7133, lat: 37.4220698, lon: -122.086278 };
116+
</pre>
117+
</div>
118+
<p>
119+
An example of a data point with a string key is shown below:
120+
</p>
121+
<div class="code_div">
122+
<pre>
123+
data_pt = { key: "GoogleHQ", lat: 37.4220698, lon: -122.086278 };
124+
</pre>
125+
</div>
126+
<p>
127+
Using data points results in decreased memory usage as well as a performance increase
128+
as there is no need to create Google map markers.
129+
See <a href="./ex1/index.html">Creating data points vs creating Google map markers</a>
130+
</p>
131+
<h2>Grid Tiles and Cluster Markers</h2>
132+
<p>
133+
By default, Google maps consist of tiles that are 256 x 256 pixels in size.
134+
&quot;Grid tiles&quot; that are visible within the map bounds are &quot;indexed&quot;
135+
starting at index 0, which is always located in the top left corner of
136+
the map viewport. Index numbers increase as you move left to right in
137+
column, then row order (as shown below).
138+
</p>
139+
<p>
140+
Data points are &quot;clustered&quot; into individual tiles. When the
141+
number of data points in a tile exceed a configured minimum, a single
142+
&quot;cluster marker&quot; is displayed in the center of the tile. In
143+
the following image, two cluster markers are present:
144+
</p>
145+
<ul>
146+
<li>
147+
The tile at index 4 has 144 data points associated with it, as shown in the cluster markers label.
148+
</li>
149+
<li>
150+
The tile at index 5 has 146 data points associated with it, as shown in the cluster markers label.
151+
</li>
152+
</ul>
153+
<div class="img_div">
154+
<img src="tiles_0.jpg" width="566" height="400" alt="Grid tiles image" title="Grid tiles with cluster markers">
155+
</div>
156+
<h2>Grid Points and Grid Point Markers</h2>
157+
<p>
158+
Tiles contain a configurable number of &quot;grid point&quot; rows and columns.
159+
When the number of data points in a tile is less than the minimum to show a
160+
cluster marker, the data points are organized into grid points. The number of
161+
grid points within a tile depends on the tile size and the number of grid point
162+
rows and columns set when the clusterer is configured. A &quot;grid point marker&quot;
163+
is displayed in the center of each grid point that contains one or more data points.
164+
</p>
165+
<p>
166+
In the example below, the tile size is 256 x 256 pixels and the clusterer was
167+
configured to use 2 grid point rows and columns, so each tile will contain 4 grid
168+
points.
169+
</p>
170+
<p>
171+
Grid points within a tile are indexed starting at index 0, which is
172+
always the grid point in the top left corner of a tile, moving left to
173+
right in column, then row order.
174+
</p>
175+
<ul>
176+
<li>The grid point at index 0 has one data point associated with it, as shown in the grid point markers label.</li>
177+
<li>The grid point at index 1 has three data points associated with it, as shown in the grid point markers label.</li>
178+
<li>The grid point at index 2 has one data point associated with it, as shown in the grid point markers label.</li>
179+
<li>The grid point at index 3 has two data points associated with it, as shown in the grid point markers label.</li>
180+
</ul>
181+
<div class="img_div">
182+
<img src="grid_boxes_0.jpg" width="270" height="272" alt="Grid point image" title="Grid point with 2 rows and 2 columns">
183+
</div>
184+
<p>
185+
The same tile, using a clusterer configured to use 4 grid point rows and columns
186+
has 16 grid points numbered 0 to 15, as shown below:
187+
</p>
188+
<div class="img_div">
189+
<img src="grid_boxes_1.jpg" width="271" height="271" alt="Grid point image" title="Grid point with 4 rows and 4 columns">
190+
</div>
191+
<p>
192+
* Note that grid point borders are <b>not</b> displayed by the clusterer,
193+
but were included in the images above for illustration purposes.
194+
</p>
195+
<p>
196+
See the <a href="./ex0/index.html">example of tiles and grid points</a>.
197+
</p>
198+
</section>
199+
</main>
200+
<footer>
201+
Last updated on: 26-Jun-2024
202+
</footer>
203+
</body>
204+
</html>

0 commit comments

Comments
 (0)