From d4226f3c0ef70fe87775b74fbe9ab09577a992f1 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Sun, 1 Oct 2023 18:36:10 +0200
Subject: [PATCH] =?UTF-8?q?Ferdigstille=20+=20sm=C3=A5fikse=20en=20del=20a?=
=?UTF-8?q?nnet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 13 ++++++++++++-
javascript/buffer.js | 9 +++++++--
javascript/dissolve.js | 19 +++++++++++++++++++
javascript/sidebar&boxes.js | 3 ++-
4 files changed, 40 insertions(+), 4 deletions(-)
create mode 100644 javascript/dissolve.js
diff --git a/index.html b/index.html
index a3b6cf5..dd5bf95 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
</div>
<p>Choose a layer to create a buffer around:</p>
- <select id="bufferSelect">Layer:</select>
+ <select id="bufferSelect"></select>
<p>Write the distance you want for the buffer (in meter):</p>
<input id="bufferDistance">
@@ -92,6 +92,8 @@
<p>Choose a name for the new buffer:</p>
<input id="bufferName"><br>
+ <p>Do you want to dissolve the layers? <input type="checkbox" id="bufferCheck"></p>
+
<button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button>
</div>
@@ -115,6 +117,14 @@
<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 dissolve:</p>
+ <select id="dissolveSelect"></select>
+
+ <p>Choose a name for the new dissolved layer:</p>
+ <input id="dissolveName"><br>
+
+ <button class="button" style="font-size: 25px;" onclick="dissolve()">Dissolve</button>
</div>
<div id="extractBox" class="box">
@@ -198,6 +208,7 @@
<script src="javascript/geoJSON.js"></script>
<script src="javascript/leafletLayerControl.js"></script>
<script src="javascript/buffer.js"></script>
+ <script src="javascript/dissolve.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
index 230703a..54b2d78 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -10,8 +10,13 @@ function makeBuffer() {
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));
+ var buffer = turf.buffer(layer.toGeoJSON(), distance, {units: "meters"});
+
+ if (document.getElementById("bufferCheck").checked) {
+ var newLayer = L.geoJSON(turf.dissolve(buffer));
+ } else {
+ var newLayer = L.geoJSON(buffer);
+ }
overlayMaps[name] = newLayer;
diff --git a/javascript/dissolve.js b/javascript/dissolve.js
new file mode 100644
index 0000000..3aecc35
--- /dev/null
+++ b/javascript/dissolve.js
@@ -0,0 +1,19 @@
+function dissolve() {
+ var input = document.getElementById("dissolveSelect").value;
+ var layer = overlayMaps[input];
+ var name = document.getElementById("dissolveName").value;
+
+ try {
+ var dissolved = turf.dissolve(layer.toGeoJSON());
+ var newLayer = L.geoJSON(dissolved);
+
+ overlayMaps[name] = newLayer;
+
+ updateSidebar();
+ handleLayer(name);
+ document.getElementById("dissolveSelect").value = "";
+ document.getElementById("dissolveName").value = "";
+ } catch(failure) {
+ alert(failure);
+ }
+}
\ No newline at end of file
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index f08ff14..5893afe 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -28,6 +28,8 @@ function openBox(id) {
// Fyller aktuell select med alternativ avhengig av hvilken boks en åpner:
if (id == "bufferBox") {
fillSelect("bufferSelect");
+ } else if (id == "dissolveBox") {
+ fillSelect("dissolveSelect");
}
document.getElementById(String(id)).style.width = "40vw";
@@ -54,7 +56,6 @@ function fillSelect(id) {
select.innerHTML = "";
- //select.options.lenght = 0;
for (key in overlayMaps) {
select.add(new Option(text = key, value = key));
}
--
GitLab