Skip to content
Snippets Groups Projects
Commit fcc6e163 authored by Jakob Severin Steffensen Hjelseth's avatar Jakob Severin Steffensen Hjelseth
Browse files

Ferdigstille

parent fd511662
No related branches found
No related tags found
2 merge requests!37Dev,!36Resolve "Intersect"
......@@ -116,7 +116,7 @@
<p>Choose a name for the new layer:</p>
<input id="differenceName"><br>
<button class="button" style="font-size: 25px;" onclick="difference()">Differ</button>
<button class="button" style="font-size: 25px;" onclick="difference()">Make difference</button>
</div>
<div id="dissolveBox" class="box">
......@@ -158,6 +158,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 the first layer to intersect:</p>
<select id="intersectionSelect_1"></select>
<p>Choose the second layer:</p>
<select id="intersectionSelect_2"></select>
<p>Choose a name for the intersection:</p>
<input id="intersectionName"><br>
<button class="button" style="font-size: 25px;" onclick="intersection()">Intersect</button>
</div>
<div id="unionBox" class="box">
......@@ -222,6 +233,7 @@
<script src="javascript/dissolve.js"></script>
<script src="javascript/difference.js"></script>
<script src="javascript/turfFormatConverter.js"></script>
<script src="javascript/intersect.js"></script>
<!-- Imported js -->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
......
......@@ -21,7 +21,7 @@ function difference() {
updateSidebar();
handleLayer(name);
document.getElementById("differenceName").value = "";
fillDifferenceSelect();
fillDoubleSelect("differenceSelect");
} catch(failure) {
alert(failure)
}
......
function intersection() {
var input1 = document.getElementById("intersectionSelect_1").value;
var layer1 = overlayMaps[input1].toGeoJSON();
var input2 = document.getElementById("intersectionSelect_2").value;
var layer2 = overlayMaps[input2].toGeoJSON();
var name = document.getElementById("intersectionName").value;
// Må konverteres fra feature collection til multipolygon:
var coords1 = featureCollectionToMultiPolygon(layer1);
var coords2 = featureCollectionToMultiPolygon(layer2);
var multiPolygon1 = turf.multiPolygon(coords1);
var multiPolygon2 = turf.multiPolygon(coords2);
try {
var intersection = turf.intersect(multiPolygon1, multiPolygon2);
var newLayer = new L.GeoJSON(intersection);
overlayMaps[name] = newLayer;
updateSidebar();
handleLayer(name);
document.getElementById("intersectionName").value = "";
fillDoubleSelect("intersectionSelect")
} catch(failure) {
alert(failure);
}
}
......@@ -29,9 +29,11 @@ function openBox(id) {
if (id == "bufferBox") {
fillSelect("bufferSelect");
} else if (id == "differenceBox") {
fillDifferenceSelect();
fillDoubleSelect("differenceSelect");
} else if (id == "dissolveBox") {
fillSelect("dissolveSelect");
} else if (id == "intersectionBox") {
fillDoubleSelect("intersectionSelect");
}
document.getElementById(String(id)).style.width = "40vw";
......@@ -63,9 +65,9 @@ function fillSelect(id) {
}
}
function fillDifferenceSelect() {
var select1 = document.getElementById("differenceSelect_1");
var select2 = document.getElementById("differenceSelect_2");
function fillDoubleSelect(id) {
var select1 = document.getElementById(id + "_1");
var select2 = document.getElementById(id + "_2");
select1.innerHTML = "";
select2.innerHTML = "";
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment