Merge branch '9-buffer' into 'dev'

Resolve "Buffer"

See merge request !26

css/style.css

@@ -5,6 +5,10 @@
     margin: 0;
 }
 
+p {
+    font-size: 18px;
+}
+
 .box {
     font-family: monospace;
     background-color: orange;
@@ -90,7 +94,7 @@
 
 .sidebarButton {
     font-family: monospace;
-    background-color: orangered;
+    background-color: black;
     color: white;
     width: 20vw;
     text-align: center;

index.html

@@ -8,6 +8,9 @@
         
         <!-- Leaflet css -->
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+        
+        <!-- Turfjs -->
+        <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
 
     </head>
     
@@ -60,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>
         
@@ -75,6 +82,17 @@
                                 <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                             </svg>
                         </div>
+
+                        <p>Choose a layer to create a buffer around:</p>
+                        <select id="bufferSelect">Layer:</select>
+                        
+                        <p>Write the distance you want for the buffer (in meter):</p>
+                        <input id="bufferDistance">
+                        
+                        <p>Choose a name for the new buffer:</p>
+                        <input id="bufferName"><br>
+
+                        <button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button>
                     </div>
 
                     <div id="differenceBox" class="box">
@@ -161,7 +179,7 @@
                     
                     <div style="padding-right: 2vw;">
                         <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
-                        xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
+                        xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
                             <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
                         </svg>
                     </div>
@@ -179,6 +197,7 @@
         <script src="javascript/fileHandler.js"></script>
         <script src="javascript/geoJSON.js"></script>
         <script src="javascript/leafletLayerControl.js"></script>
+        <script src="javascript/buffer.js"></script>
 
         <!-- Imported js -->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->

javascript/buffer.js

+/*
+Link til nettside med turfjs-funksjoner:
+https://turfjs.org/docs/
+*/
+
+function makeBuffer() {
+    var input = document.getElementById("bufferSelect").value;
+    var layer = overlayMaps[input];
+    var distance = parseFloat(document.getElementById("bufferDistance").value);
+    var name = document.getElementById("bufferName").value;
+
+    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,34 +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 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)) {
+function handleLayer(name) {
+    var layer = null;
+
+    for (key in overlayMaps) {
+        if (key == name) {
+            layer = overlayMaps[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";
       }
 }

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