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
|
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 DefaultSearchValue = "supermarket";
var Categories = []
var overlayMaps = {
"POI markers": markers,
"Nearest POI polygons": polygons,
// "POI heatmap": heatmap
};
var layerControl = L.control.layers({},overlayMaps).addTo(map);
function runQueryAfterLoad() {
fetchAll(CategoryField.value);
}
async function fetchCategories() {
const response = await fetch("categories");
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");
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)
}
async function fetchAll(Category) {
const response = await fetch(`all.json?Category=${Category}`)
const shops = await response.json();
shops.forEach((shop) => addShop(shop));
}
async function fetchShopHeatmap() {
const response = await fetch("stores.json");
const shops = await response.json();
var heat = L.heatLayer(shops, {radius: 30}).addTo(heatmap);
}
fetchChains();
fetchCategories();
//fetchShopHeatmap();
|
