diff options
Diffstat (limited to 'src/static')
| -rw-r--r-- | src/static/index.html | 18 | ||||
| -rw-r--r-- | src/static/main.js | 79 |
2 files changed, 53 insertions, 44 deletions
diff --git a/src/static/index.html b/src/static/index.html deleted file mode 100644 index 5bfcc1f..0000000 --- a/src/static/index.html +++ /dev/null @@ -1,18 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta http-equiv="X-UA-Compatible" content="ie=edge"> - <title>Nearest shop map</title> - <link rel="stylesheet" href="leaflet.css"/> - <link rel="stylesheet" href="main.css"/> - <!-- Make sure you put this AFTER Leaflet's CSS --> - <script src="leaflet.js" defer></script> - <script src="leaflet-heat.js" defer></script> - <script src="main.js" defer></script> - </head> - <body> - <div id="map"></div> - </body> -</html> diff --git a/src/static/main.js b/src/static/main.js index a920476..be136a4 100644 --- a/src/static/main.js +++ b/src/static/main.js @@ -11,14 +11,40 @@ 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 = { - "Supermarket icons": markers, - "Nearest supermarket polygons": polygons, - "Stores heatmap": heatmap + "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(); @@ -33,7 +59,25 @@ async function fetchChains() { iconAnchor: [8, 8], }); } - fetchAll() + + 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); + } } @@ -64,8 +108,8 @@ function addShop(shop) { } -async function fetchAll() { - const response = await fetch("all.json"); +async function fetchAll(Category) { + const response = await fetch(`all.json?Category=${Category}`) const shops = await response.json(); shops.forEach((shop) => addShop(shop)); } @@ -76,23 +120,6 @@ async function fetchShopHeatmap() { var heat = L.heatLayer(shops, {radius: 30}).addTo(heatmap); } - -async function fetch_voronoi_polygons() { - const response = await fetch("voronoi_polygons.json"); - const voronoi_polygons = await response.json(); - voronoi_polygons.forEach((polygon) => addPolygon(polygon)); -} - -function update(){ - if (map.getZoom() >= 14){ - //console.log('update') - } -} - -map.on('moveend', function() { - update() -}); - -fetchChains() - -fetchShopHeatmap(); +fetchChains(); +fetchCategories(); +//fetchShopHeatmap(); |