diff --git a/css/style.css b/css/style.css
index 5c13ed0f7c1aacef233a3e5408dcbb1a523c1676..915f0c2244d336062646122d879668581845cdcb 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;
@@ -90,7 +94,7 @@
.sidebarButton {
font-family: monospace;
- background-color: orangered;
+ background-color: black;
color: white;
width: 20vw;
text-align: center;
diff --git a/index.html b/index.html
index 71144d46c23e02be5f5f9542eaf5f11dbfc8db7d..a3b6cf5349002934cd6ba011c252201310477b1d 100644
--- a/index.html
+++ b/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> -->
diff --git a/javascript/buffer.js b/javascript/buffer.js
new file mode 100644
index 0000000000000000000000000000000000000000..230703a6edee979e72be6b20c8e10d69de7f6240
--- /dev/null
+++ b/javascript/buffer.js
@@ -0,0 +1,25 @@
+/*
+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
diff --git a/javascript/geoJSON.js b/javascript/geoJSON.js
index 688392304d8e368f57e75b1fec402d08da0faa01..ab174703cc88c1588c73f75d9a0b6b8171ffb759 100644
--- a/javascript/geoJSON.js
+++ b/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();
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index 30913cc92d7238aa9ed2be0bdc2acf6179bf9a95..9585943e99d06fda50ad4652a6aba4210e2429f4 100644
--- a/javascript/leafletLayerControl.js
+++ b/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";
}
}
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index 12fd8f1f98a906e37261998dacb3823699d776ac..f08ff14e4bc787638a7fd98b8d9bcff55ef55b60 100644
--- a/javascript/sidebar&boxes.js
+++ b/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