From 33504e4888f2814216e5dd588c7d2f08d46bdf7e Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Sun, 1 Oct 2023 20:45:11 +0200
Subject: [PATCH] =?UTF-8?q?Starte=20og=20nesten=20i=20m=C3=A5l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 12 ++++++++++++
javascript/buffer.js | 3 ++-
javascript/difference.js | 21 +++++++++++++++++++++
javascript/dissolve.js | 3 ++-
javascript/sidebar&boxes.js | 17 ++++++++++++++++-
5 files changed, 53 insertions(+), 3 deletions(-)
create mode 100644 javascript/difference.js
diff --git a/index.html b/index.html
index dd5bf95..64434a4 100644
--- a/index.html
+++ b/index.html
@@ -106,6 +106,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>Which layer do you want to remove features from:</p>
+ <select id="differenceSelect_1"></select>
+
+ <p>Which layer do you want to remove from the first one:</p>
+ <select id="differenceSelect_2"></select>
+
+ <p>Choose a name for the new layer:</p>
+ <input id="differenceName"><br>
+
+ <button class="button" style="font-size: 25px;" onclick="difference()">Differ</button>
</div>
<div id="dissolveBox" class="box">
@@ -209,6 +220,7 @@
<script src="javascript/leafletLayerControl.js"></script>
<script src="javascript/buffer.js"></script>
<script src="javascript/dissolve.js"></script>
+ <script src="javascript/difference.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 54b2d78..73aff81 100644
--- a/javascript/buffer.js
+++ b/javascript/buffer.js
@@ -24,7 +24,8 @@ function makeBuffer() {
handleLayer(name);
document.getElementById("bufferDistance").value = "";
document.getElementById("bufferName").value = "";
+ fillSelect("bufferSelect");
} catch(failure) {
alert(failure);
}
-}
\ No newline at end of file
+}
diff --git a/javascript/difference.js b/javascript/difference.js
new file mode 100644
index 0000000..48c5f83
--- /dev/null
+++ b/javascript/difference.js
@@ -0,0 +1,21 @@
+function difference() {
+ var input1 = document.getElementById("differenceSelect_1").value;
+ var layer1 = overlayMaps[input1];
+ var input2 = document.getElementById("differenceSelect_2").value;
+ var layer2 = overlayMaps[input2];
+ var name = document.getElementById("differenceName").value;
+
+ try {
+ var difference = turf.difference(layer1.toGeoJSON(), layer2.toGeoJSON());
+ var newLayer = L.geoJSON(difference);
+
+ overlayMaps[name] = newLayer;
+
+ updateSidebar();
+ handleLayer(name);
+ document.getElementById("differenceName").value = "";
+ fillDifferenceSelect();
+ } catch(failure) {
+ alert(failure)
+ }
+}
diff --git a/javascript/dissolve.js b/javascript/dissolve.js
index 3aecc35..ffa1a53 100644
--- a/javascript/dissolve.js
+++ b/javascript/dissolve.js
@@ -13,7 +13,8 @@ function dissolve() {
handleLayer(name);
document.getElementById("dissolveSelect").value = "";
document.getElementById("dissolveName").value = "";
+ fillSelect("dissolveSelect");
} catch(failure) {
alert(failure);
}
-}
\ No newline at end of file
+}
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index 5893afe..97efc1a 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 == "differenceBox") {
+ fillDifferenceSelect();
} else if (id == "dissolveBox") {
fillSelect("dissolveSelect");
}
@@ -59,4 +61,17 @@ function fillSelect(id) {
for (key in overlayMaps) {
select.add(new Option(text = key, value = key));
}
-}
\ No newline at end of file
+}
+
+function fillDifferenceSelect() {
+ var select1 = document.getElementById("differenceSelect_1");
+ var select2 = document.getElementById("differenceSelect_2");
+
+ select1.innerHTML = "";
+ select2.innerHTML = "";
+
+ for (key in overlayMaps) {
+ select1.add(new Option(text = key, value = key));
+ select2.add(new Option(text = key, value = key));
+ }
+}
--
GitLab