From 886ab38675e1bf1a4f4b62f1d71e36102449562b Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Fri, 29 Sep 2023 11:05:47 +0200
Subject: [PATCH] Begynne og generell layout

---
 css/style.css        |  4 ++++
 index.html           | 13 +++++++++++++
 javascript/buffer.js | 24 ++++++++++++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 javascript/buffer.js

diff --git a/css/style.css b/css/style.css
index 5c13ed0..2aec3e2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,6 +5,10 @@
     margin: 0;
 }
 
+p {
+    font-size: 18px;
+}
+
 .box {
     font-family: monospace;
     background-color: orange;
diff --git a/index.html b/index.html
index 71144d4..92476c6 100644
--- a/index.html
+++ b/index.html
@@ -75,6 +75,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">
@@ -179,8 +190,10 @@
         <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/@turf/turf@6/turf.min.js'></script>
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
 
     </body>
diff --git a/javascript/buffer.js b/javascript/buffer.js
new file mode 100644
index 0000000..62685b6
--- /dev/null
+++ b/javascript/buffer.js
@@ -0,0 +1,24 @@
+/*
+Link til nettside med turfjs-funksjoner:
+https://turfjs.org/docs/
+*/
+
+// Fyller select med alternativ:
+
+var s = document.getElementById("bufferSelect");
+
+s.options.lenght = 0;
+
+for (key in overlayMaps) {
+    s.add(new Option(key, overlayMaps[key]));
+}
+
+function makeBuffer() {
+    var layer = document.getElementById("bufferSelect").value;
+    var distance = parseFloat(document.getElementById("bufferDistance").value) / 10^3;
+    var name = document.getElementById("bufferName").value;
+    
+    var buffer = L.geoJSON(turf.buffer(layer, distance, {units: "kilometers"})).addTo(map);
+
+    overlayMaps[name] = buffer;
+}
\ No newline at end of file
-- 
GitLab