diff options
| -rw-r--r-- | src/static/main.js | 74 |
1 files changed, 44 insertions, 30 deletions
diff --git a/src/static/main.js b/src/static/main.js index 04ea88a..84b9fa7 100644 --- a/src/static/main.js +++ b/src/static/main.js @@ -1,4 +1,4 @@ -var map = L.map('map').setView([55.68, 12.57], 13); +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>' @@ -21,7 +21,8 @@ const heatmap_radius_element = document.getElementById("HeatmapRadius"); var shops; -const DefaultSearchValue = "supermarket"; +const DefaultCategory = "supermarket"; +const DefaultCountry = "Denmark"; var Categories = [] var overlayMaps = { @@ -35,8 +36,21 @@ var layerControl = L.control.layers({},overlayMaps).addTo(map); form.addEventListener('submit', (event) => { - event.preventDefault(); // Prevents the default form submission - changeCategory(); + event.preventDefault(); // Prevents the default form submission + if (SubmitButton.disabled) { // Disallow double queries + return; + } + SubmitButton.disabled = true; + LoadingIndicator.hidden = false; + + const url = new URL(location); + url.searchParams.set("category", CategoryField.value); + url.searchParams.set("country", CountryField.value); + history.pushState({}, "", url); + + markers.clearLayers(); + polygons.clearLayers(); + fetchAll(CountryField.value, CategoryField.value); }); heatmap_intensity_element.addEventListener('input', (event) => { @@ -56,21 +70,6 @@ function changeHeatmap() { 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(CountryField.value, CategoryField.value); - } -} - function alterHeatMapParameter(event) { event.srcElement.value; } @@ -126,22 +125,29 @@ async function fetchChains() { const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); - const urlParam = urlParams.get('category') - const fieldValue = CategoryField.value + const category_url_param = urlParams.get('category') + const country_url_param = urlParams.get('country') + //console.log(country_url_param) + const category_field_value = CategoryField.value + const country_field_value = CountryField.value // Retains saved value from input field on reload - if (urlParam) + if (category_url_param) { - fetchAll(CountryField.value, urlParam); - CategoryField.value = urlParam; + CategoryField.value = category_url_param; - } else if (fieldValue !== "") - { - fetchAll(CountryField.value, fieldValue); - } else + } else if (category_field_value == "") { + CategoryField.value = DefaultCategory; + } + + if (country_url_param) { - CategoryField.value = DefaultSearchValue; - fetchAll(CountryField.value, DefaultSearchValue); + CountryField.value = country_url_param; + + } else if (country_field_value == "") { + CountryField.value = DefaultCountry; } + + fetchAll(CountryField.value, category_field_value); } @@ -189,6 +195,14 @@ function drawHeatmap() { } async function fetchAll(country, category) { + if (CountryField.value == "Denmark") { + console.log('Focusing Copenhagen') + map.setView([55.68, 12.57], 13); + } else if(CountryField.value == "Germany") { + console.log('Focusing Hamburg') + map.setView([53.56, 10.01], 12); + } + let response; try { response = await fetch(`all.json?country=${country}&category=${category}`) |