Merge branch '9-buffer' into 'main'

Teste ut

Closes #9

See merge request !25

index.html

@@ -8,7 +8,8 @@
         
         <!-- 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>
@@ -195,7 +196,6 @@
         <script src="javascript/buffer.js"></script>
 
         <!-- Imported js -->
-        <!--<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>-->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
 
     </body>

javascript/buffer.js

@@ -5,20 +5,28 @@ https://turfjs.org/docs/
 
 // Fyller select med alternativ:
 
-var s = document.getElementById("bufferSelect");
+var select = document.getElementById("bufferSelect");
 
-s.options.lenght = 0;
+select.options.lenght = 0;
 
 for (key in overlayMaps) {
-    s.add(new Option(key, overlayMaps[key]));
+    select.add(new Option(key, overlayMaps[key]));
 }
 
 function makeBuffer() {
-    var layer = document.getElementById("bufferSelect").value;
-    var distance = parseFloat(document.getElementById("bufferDistance").value) / 10^3;
+    var layer = overlayMaps[document.getElementById("bufferSelect").value];
+    var distance = parseFloat(document.getElementById("bufferDistance").value);
     var name = document.getElementById("bufferName").value;
-    
-    var buffer = L.geoJSON(turf.buffer(layer, distance, {units: "kilometers"})).addTo(map);
 
-    overlayMaps[name] = buffer;
+    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);
 }
\ No newline at end of file

javascript/geoJSON.js

@@ -80,10 +80,6 @@ var test2 = L.geoJSON();
 test1.addData(U);
 test2.addData(TC);
 
-var point = turf.point([10.403787, 63.420031]);
-var buffered = turf.buffer(point, 500, {units: "meters"});
-var test3 = L.geoJSON(buffered).addTo(map);
-
 // Det jeg skal ha med i ferdig versjon:
 
 var Arealdekke = L.geoJSON();

javascript/leafletLayerControl.js

@@ -36,3 +36,14 @@ function handleLayer(layer) {
         document.getElementById(layer.innerHTML).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"));
+    }
+}