Add heatmap with intensity input elements and URL parameters

3 files changed, 70 insertions, 16 deletions

diff --git a/src/map_node5_net.py b/src/map_node5_net.py
index b8a2d9a..5bc31c3 100644
--- a/src/map_node5_net.py
+++ b/src/map_node5_net.py
@@ -42,3 +42,4 @@ def all():
             coordinates.append([coordinate[1], coordinate[0]])
         row['polygon'] = coordinates
     return json.dumps(rows)
+
diff --git a/src/static/main.js b/src/static/main.js
index ecaf650..22a9048 100644
--- a/src/static/main.js
+++ b/src/static/main.js
@@ -15,11 +15,10 @@ 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");
 
-form.addEventListener('submit', (event) => {
-    event.preventDefault(); // Prevents the default form submission
-    runQueryAfterLoad()
-});
+var shops;
 
 const DefaultSearchValue = "supermarket";
 var Categories = []
@@ -27,12 +26,36 @@ var Categories = []
 var overlayMaps = {
     "POI markers": markers,
     "Nearest POI polygons": polygons,
-//    "POI heatmap": heatmap
+    "POI heatmap": heatmap
 };
 
 var layerControl = L.control.layers({},overlayMaps).addTo(map);
 
-function runQueryAfterLoad() {
+
+
+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;
@@ -47,6 +70,10 @@ function runQueryAfterLoad() {
     }
 }
 
+function alterHeatMapParameter(event) {
+    event.srcElement.value;
+}
+
 async function fetchCategories() {
     const response = await fetch("categories.json");
     try {
@@ -123,24 +150,38 @@ function addShop(shop) {
         title: shop.name,
         icon: icon,
     }).addTo(markers);
-    addPolygon(shop)
+    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}`)
-  const shops = await response.json();
-  shops.forEach((shop) => addShop(shop));
+  shops = await response.json();
+
+  shops.forEach((shop) => addShop(shop)); // Add icons and polygons
+
+  drawHeatmap();
+
   LoadingIndicator.hidden = true;
   SubmitButton.disabled = false;
 }
 
-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();
+
diff --git a/src/templates/options.html b/src/templates/options.html
index 8b87346..40e5471 100644
--- a/src/templates/options.html
+++ b/src/templates/options.html
@@ -11,6 +11,18 @@
 
     <br>
 
+    <input class="form-control" id="HeatmapIntensity" name="HeatmapIntensity" value="5" type="number"
+           aria-describedby="HeatmapIntensityHelp">
+    <div id="HeatmapIntensityHelp" class="form-text">Change the intensity of the heatmap nodes</div>
+
+    <br>
+
+    <input class="form-control" id="HeatmapRadius" name="HeatmapRadius" value="100" type="number"
+           aria-describedby="HeatmapRadiusHelp">
+    <div id="HeatmapRadiusHelp" class="form-text">Change the radius of the heatmap nodes</div>
+
+    <br>
+
     <button type="submit" disabled id="SubmitButton" class="btn btn-primary">Run query</button>
 </form>