JS - Better multli country support

Center on selected country city
Safe and load country URL param

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: '&copy; <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}`)