diff --git a/css/style.css b/css/style.css
index 5c13ed0f7c1aacef233a3e5408dcbb1a523c1676..2aec3e298a8e29076e61a2131c729863080e0a61 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 71144d46c23e02be5f5f9542eaf5f11dbfc8db7d..5bee1db7f1e5fba543b6ad81c4eddaf3b0334a3f 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,8 @@
<!-- Leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+ <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
+
</head>
<body class="standard">
@@ -75,6 +77,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 +174,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,8 +192,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 0000000000000000000000000000000000000000..62685b6df1a29faff24e12c989c50ec296b34aa0
--- /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
diff --git a/javascript/geoJSON.js b/javascript/geoJSON.js
index 688392304d8e368f57e75b1fec402d08da0faa01..3092770b9c8a27f115c00c66cdc192b7a766b59e 100644
--- a/javascript/geoJSON.js
+++ b/javascript/geoJSON.js
@@ -80,6 +80,10 @@ 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();