Nesten i mål 8)

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

@@ -5,28 +5,32 @@ 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 fillSelect() {
+    var select = document.getElementById("bufferSelect");
+    select.options.lenght = 0;
+    for (key in overlayMaps) {
+        select.add(new Option(text = key, value = 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(buffer);
+        
+        // Må endre denne for å få funksjonaliteten på sida til å fungere
+        // Problematisk med samme navn på key og value for dictionaries
+        overlayMaps[name] = newLayer;
+        
+        updateSidebar();
+        
+        //newLayer.addTo(map);
+    } 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,59 @@ 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 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 handleLayer(layer) {
-    if(map.hasLayer(layer)) {
+    var name = null;
+    
+    for (key in overlayMaps) {
+        if (overlayMaps[key] == layer) {
+            name = key;
+            break;
+        }
+    }
+    
+    if (map.hasLayer(layer)) {
         map.removeLayer(layer);
-        document.getElementById(layer).style.backgroundColor = "black"; // Dette må endres opp i!
+        document.getElementById(name).style.backgroundColor = "black";
       } else {
         map.addLayer(layer);
-        document.getElementById(layer.innerHTML).style.backgroundColor = "green";
+        document.getElementById(name).style.backgroundColor = "green";
       }
 }
-
-function updateSidebar() {
-    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"));
-    }
-}

javascript/sidebar&boxes.js

@@ -24,6 +24,7 @@ function openBox(id) {
     if (boolskNav) {
         closeNav();
     }
+    fillSelect(); // Denne må justeres ved flere Selects ;)
     document.getElementById(String(id)).style.width = "40vw";
     document.getElementById(String(id)).style.height = "40vh";
     document.getElementById(String(id)).style.borderWidth = "20px";