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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
var map = L.map('map').setView([55.68, 12.57], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
let known_store_chains;
let icons = {};
var markers = L.featureGroup().addTo(map);
var polygons = L.featureGroup().addTo(map);
var heatmap = L.featureGroup().addTo(map);
const CategoryField = document.getElementById('Category');
const LoadingIndicator = document.getElementById('LoadingIndicator');
const SubmitButton = document.getElementById('SubmitButton');
const form = document.getElementById('QueryForm');
const heatmap_intensity_element = document.getElementById("HeatmapIntensity");
const heatmap_radius_element = document.getElementById("HeatmapRadius");
var shops;
const DefaultSearchValue = "supermarket";
var Categories = []
var overlayMaps = {
"POI markers": markers,
"Nearest POI polygons": polygons,
"POI heatmap": heatmap
};
var layerControl = L.control.layers({},overlayMaps).addTo(map);
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevents the default form submission
changeCategory();
});
heatmap_intensity_element.addEventListener('input', (event) => {
changeHeatmap();
});
heatmap_radius_element.addEventListener('input', (event) => {
changeHeatmap();
});
function changeHeatmap() {
const url = new URL(location);
url.searchParams.set("HeatmapIntensity", heatmap_intensity_element.value);
history.pushState({}, "", url);
url.searchParams.set("HeatmapRadius", heatmap_radius_element.value);
history.pushState({}, "", url);
drawHeatmap();
}
function changeCategory() {
if (!SubmitButton.disabled) { // Disallow double queries
SubmitButton.disabled = true;
LoadingIndicator.hidden = false;
const url = new URL(location);
url.searchParams.set("Category", CategoryField.value);
history.pushState({}, "", url);
markers.clearLayers();
polygons.clearLayers();
fetchAll(CategoryField.value);
}
}
function alterHeatMapParameter(event) {
event.srcElement.value;
}
async function fetchCategories() {
const response = await fetch("categories.json");
try {
categories = await response.json();
const CategoriesDataList = document.getElementById('CategoriesDataList');
categories.forEach(function(item){
var option = document.createElement('option');
option.value = item;
option.innerHTML = item;
CategoriesDataList.appendChild(option);
});
CategoryField.pattern = categories.join('|');
} catch (error) {
alert(`Failed to fetch categories, are you online?\n${error.message}`)
}
}
async function fetchChains() {
const response = await fetch("chains.json");
known_store_chains = await response.json();
icons["Unknown"] = L.icon({
iconUrl: 'icons/Unknown.png',
iconSize: [10, 16],
iconAnchor: [5, 8],
});
for (let known_store_chain in known_store_chains) {
icons[known_store_chain] = L.icon({
iconUrl: `icons/${known_store_chain}.png`,
iconAnchor: [8, 8],
});
}
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const urlParam = urlParams.get('Category')
const fieldValue = CategoryField.value
// Retains saved value from input field on reload
if (urlParam)
{
fetchAll(urlParam);
CategoryField.value = urlParam;
} else if (fieldValue !== "")
{
fetchAll(fieldValue);
} else
{
CategoryField.value = DefaultSearchValue;
fetchAll(DefaultSearchValue);
}
}
function addPolygon(store) {
let color;
if (known_store_chains.hasOwnProperty(store.brand)) {
color = known_store_chains[store.brand];
} else {
color = 'grey';
}
L.polygon(store.polygon, {color: color}).addTo(polygons);
}
function addShop(shop) {
let icon;
if (known_store_chains.hasOwnProperty(shop.brand)){
icon = icons[shop.brand];
} else {
icon = icons["Unknown"];
}
L.marker([shop.lat, shop.long], {
title: shop.name,
icon: icon,
}).addTo(markers);
addPolygon(shop);
}
function drawHeatmap() {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const HeatmapIntensityUrlParam = urlParams.get("HeatmapIntensity")
if (HeatmapIntensityUrlParam){
heatmap_intensity_element.value = HeatmapIntensityUrlParam;
}
const HeatmapRadiusUrlParam = urlParams.get("HeatmapRadius")
if (HeatmapRadiusUrlParam){
heatmap_radius_element.value = HeatmapRadiusUrlParam;
}
heatmap.clearLayers();
const shops_heatmap_format = shops.map(r => [r.lat, r.long, parseInt(heatmap_intensity_element.value)]); // Convert data to heatmap format
var heat = L.heatLayer(shops_heatmap_format, {radius: parseInt(heatmap_radius_element.value)}).addTo(heatmap);
}
async function fetchAll(Category) {
const response = await fetch(`all.json?Category=${Category}`)
shops = await response.json();
shops.forEach((shop) => addShop(shop)); // Add icons and polygons
drawHeatmap();
LoadingIndicator.hidden = true;
SubmitButton.disabled = false;
}
fetchChains();
fetchCategories();
|
