-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
108 lines (100 loc) · 6.01 KB
/
Copy pathindex.html
File metadata and controls
108 lines (100 loc) · 6.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!--
~ Copyright (C) 2022 HERE Europe B.V.
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
~ SPDX-License-Identifier: Apache-2.0
~ License-Filename: LICENSE
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@here" />
<meta name="twitter:title" content="Clustering with interactive map layers" />
<meta name="twitter:description" content="Visualize the density of UK supermarkets with interactive map layers." />
<meta name="twitter:image" content="https://heremaps.github.io/here-interactive-map-layer-examples/clustering/opengraph.png" />
<meta property="og:url" content="https://heremaps.github.io/here-interactive-map-layer-examples/clustering/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Clustering with interactive map layers" />
<meta property="og:description" content="Visualize the density of UK supermarkets with interactive map layers." />
<meta property="og:image" content="https://heremaps.github.io/here-interactive-map-layer-examples/clustering/opengraph.png" />
<title>Clustering with interactive map layers</title>
<link rel="stylesheet" href="index.css" />
<script type="module" src="index.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info">
<h3> UK Supermarkets</h3>
<div id="retails">
<div class="descp"><span>Select supermarket retail chain:</span><span class="infoicon" value="1">ⓘ</span></div>
<div class="retail"><input id="All" type="radio" name="retail" checked value="All"/><label for="All">All</label></div>
<div class="retail"><input id="Tesco" type="radio" name="retail" value="Tesco"/><label for="Tesco">Tesco</label></div>
<div class="retail"><input id="Cooperative" type="radio" name="retail" value="The Co-operative Group"/><label for="Cooperative">The Cooperative</label></div>
<div class="retail"><input id="Spar" type="radio" name="retail" value="Spar"/><label for="Spar">Spar</label></div>
<div class="retail"><input id="Sainsburys" type="radio" name="retail" value="Sainsburys"/><label for="Sainsburys">Sainsbury's</label></div>
<div class="retail"><input id="Iceland" type="radio" name="retail" value="Iceland"/><label for="Iceland">Iceland</label></div>
</div>
<br/>
<div id="retails-layer">
<div class="descp"><span>Show individual supermarkets:</span><span class="infoicon" value="2">ⓘ</span></div>
<div>
<div id="retail-switch">
<div class="retail-btn-group">
<button class='active' value='off'>OFF</button>
<button value='on'>ON</button>
</div>
</div>
</div>
</div>
<br/>
<div id="quantiles" >
<div class="descp"><span>Number of cells by supermarket</span><span class="infoicon" value="3">ⓘ</span></div>
<span style="padding: 0 0 0 5px">density:</span>
<table>
</table>
</div>
</div>
<div id="clustering-switch">
<div class="btn-group">
<button class='active' value='hexbin'>Hexbin</button>
<button value='quadbin'>Quadbin</button>
</div>
</div>
<div id="slider">
<div id="range">
<span class="descp">Relative clustering resolution: 0</span><span class="infoicon" value="4">ⓘ</span>
<input type="range" min="-2" max="2" value="0">
</div>
<div id="scale"><span>-2</span><span class="space1"></span><span>-1</span><span class="space2"></span><span>0</span><span class="space2"></span><span>1</span><span class="space3"></span><span>2</span></div>
</div>
<div id="info2" class="expanded">
<span class="resizeicon collapse"></span><span id="resizetext" class="hidden">Click to expand</span>
<div id="content">
<div id="intro">
<h3>Clustering with interactive map layers</h3>
<p>Interactive map layers offer the capability to retrieve statistical information for the data stored in the layer. This could include information about the values of a property or simply the count of features in the cluster. Interactive map layers support hexagonal and square grid clustering.</p>
<p>The example shows how interactive map layers are used to demonstrate the density of supermarket coverage in the UK. The supermarket retail points are stored in an Interactive Map Layer. The layer is then queried to retrieve the individual points, the density of all supermarkets, and the density of each supermarket chain.</p>
<p>To represent the density, the supermarket data is requested as hexagonal and square grid clusters from the interactive map layer. The returned features represent the cluster cells and include the count of the features inside. The map client displays the cells in a color that represents the density of the supermarkets in it. Brighter cells indicate a bigger number of supermarkets and respectively higher density.</p>
</div>
<div id="source">
<p>This example uses: Interactive API, <a href="https://openlayers.org/" target="_new">OpenLayers</a></p>
<p>Data source: <a href="https://geolytix.com/blog/tag/open-data/" target="_new">GEOLYTIX</a></p>
<p>Source code: <a href="https://github.com/heremaps/here-interactive-map-layer-examples/blob/main/examples/clustering">GitHub</a></p>
</div>
</div>
</div>
</body>
</html>