Merge branch 'dev' into 'main'

From dev into main

See merge request !27

css/style.css

@@ -94,7 +94,7 @@ p {
 
 .sidebarButton {
     font-family: monospace;
-    background-color: orangered;
+    background-color: black;
     color: white;
     width: 20vw;
     text-align: center;

index.html

@@ -63,6 +63,10 @@
                 </div>
             </div>
 
+            <div>
+                <button id="exampleData" class="onClick" onclick="loadExampleData()">Click here to load the sample datasets</button>
+            </div>
+
             <div id="layers" style="font-family: monospace; margin-left: 10px; margin-top: 25px; font-size: 18px; height: 50vh;"></div>
         </div>
         

javascript/buffer.js

@@ -3,30 +3,23 @@ Link til nettside med turfjs-funksjoner:
 https://turfjs.org/docs/
 */
 
-// Fyller select med alternativ:
-
-var select = document.getElementById("bufferSelect");
-
-select.options.lenght = 0;
-
-for (key in overlayMaps) {
-    select.add(new Option(key, overlayMaps[key]));
-}
-
 function makeBuffer() {
-    var layer = overlayMaps[document.getElementById("bufferSelect").value];
+    var input = document.getElementById("bufferSelect").value;
+    var layer = overlayMaps[input];
     var distance = parseFloat(document.getElementById("bufferDistance").value);
     var name = document.getElementById("bufferName").value;
 
-    var object = layer.toGeoJSON();
-    console.log(JSON.stringify(object));
-
-    var buffer = turf.buffer(layer.toGeoJSON(), distance, {units: "meters"});
-    var newLayer = L.geoJSON(buffer);
-    
-    overlayMaps[name] = newLayer;
-    
-    updateSidebar();
-    
-    newLayer.addTo(map);
+    try {
+        var buffer = turf.buffer(layer.toGeoJSON(), distance, {units: "meters"}); // Denne må ryddes opp i!
+        var newLayer = L.geoJSON(turf.dissolve(buffer));
+        
+        overlayMaps[name] = newLayer;
+        
+        updateSidebar();
+        handleLayer(name);
+        document.getElementById("bufferDistance").value = "";
+        document.getElementById("bufferName").value = "";
+    } catch(failure) {
+        alert(failure);
+    }
 }
\ No newline at end of file

javascript/geoJSON.js

@@ -69,11 +69,6 @@ var TC = {
   ]
 };
 
-/*
-var layer1 = L.geoJSON(U);
-var layer2 = L.geoJSON(TC);
-*/
-
 var test1 = L.geoJSON();
 var test2 = L.geoJSON();
 

javascript/leafletLayerControl.js

@@ -5,45 +5,61 @@ var baselayers = {
     "Satellite": googleSat
 }
 
-var overlayMaps = {
-    "Arealdekke": Arealdekke,
-    "Bygg_f": Bygg_f,
-    "Bygg_l": Bygg_l,
-    "Samferdsel": Samferdsel,
-    "test1": test1,
-    "test2": test2
-}
+var overlayMaps = {};
 
 var controller = L.control.layers(baselayers).addTo(map);
+var exampleLoaded = false;
+
+var addedLayers = [];
 
 // Til sidebaren:
 
-for (key in overlayMaps) {
-    var layerButton = document.createElement("div");
-    layerButton.innerHTML = "<button id='" + key + "' class='sidebarButton' onclick=handleLayer(" + key + ") />" + key;
-    
-    container = document.getElementById("layers");
-    container.appendChild(layerButton);
-    container.appendChild(document.createElement("br"));
+function loadExampleData() {
+    if (!exampleLoaded) {
+        
+        overlayMaps["Arealdekke"] = Arealdekke;
+        overlayMaps["Bygg_f"] = Bygg_f;
+        overlayMaps["Bygg_l"] = Bygg_l;
+        overlayMaps["Samferdsel"] = Samferdsel;
+        overlayMaps["test1"] = test1;
+        overlayMaps["test2"] = test2;
+        
+        updateSidebar();
+        exampleLoaded = true;
+        document.getElementById("exampleData").style.display = "none";
+    }
 }
 
-function handleLayer(layer) {
-    if(map.hasLayer(layer)) {
-        map.removeLayer(layer);
-        document.getElementById(layer).style.backgroundColor = "black"; // Dette må endres opp i!
-      } else {
-        map.addLayer(layer);
-        document.getElementById(layer.innerHTML).style.backgroundColor = "green";
-      }
+function updateSidebar() {
+    for (key in overlayMaps) {
+        if (!addedLayers.includes(key)) {
+            addedLayers.push(key);
+
+            var layerButton = document.createElement("div");
+            layerButton.innerHTML = `<button id=${key} class='sidebarButton' onclick='handleLayer("${key}")' />${key}`;
+            
+            container = document.getElementById("layers");
+            container.appendChild(layerButton);
+            container.appendChild(document.createElement("br"));
+        }
+    }
 }
 
-function updateSidebar() {
+function handleLayer(name) {
+    var layer = null;
+
     for (key in overlayMaps) {
-        var layerButton = document.createElement("div");
-        layerButton.innerHTML = "<button id='" + key + "' class='sidebarButton' onclick=handleLayer(" + key + ") />" + key;
-        
-        container = document.getElementById("layers");
-        container.appendChild(layerButton);
-        container.appendChild(document.createElement("br"));
+        if (key == name) {
+            layer = overlayMaps[key];
+            break;
+        }
     }
+    
+    if (map.hasLayer(layer)) {
+        map.removeLayer(layer);
+        document.getElementById(name).style.backgroundColor = "black";
+      } else {
+        map.addLayer(layer);
+        document.getElementById(name).style.backgroundColor = "green";
+      }
 }

javascript/sidebar&boxes.js

@@ -24,6 +24,12 @@ function openBox(id) {
     if (boolskNav) {
         closeNav();
     }
+
+    // Fyller aktuell select med alternativ avhengig av hvilken boks en åpner:
+    if (id == "bufferBox") {
+        fillSelect("bufferSelect");
+    }
+    
     document.getElementById(String(id)).style.width = "40vw";
     document.getElementById(String(id)).style.height = "40vh";
     document.getElementById(String(id)).style.borderWidth = "20px";
@@ -39,4 +45,17 @@ function closeBox(id) {
     boolskBox = false;
     box = null;
     activateMap();
+}
+
+// Fyller select i de ulike boksene med alternativ:
+
+function fillSelect(id) {
+    var select = document.getElementById(id);
+    
+    select.innerHTML = "";
+    
+    //select.options.lenght = 0;
+    for (key in overlayMaps) {
+        select.add(new Option(text = key, value = key));
+    }
 }
\ No newline at end of file