diff --git a/index.html b/index.html index dd5bf95411cd79e0876fd918aab97b3d16ad199c..61dc05099bc8c24a27c63fe5f1c2d56fd2dae9d2 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,8 @@ <script src="javascript/leafletLayerControl.js"></script> <script src="javascript/buffer.js"></script> <script src="javascript/dissolve.js"></script> + <script src="javascript/difference.js"></script> + <script src="javascript/turfFormatConverter.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 54b2d78d8bd15e8c35c0432f115c8133fd2cbe51..73aff812628741a913f71651d0bd41730412f0e9 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 0000000000000000000000000000000000000000..694f997dca9a31aaec9a389fffd905a65ad95e87 --- /dev/null +++ b/javascript/difference.js @@ -0,0 +1,28 @@ +function difference() { + var input1 = document.getElementById("differenceSelect_1").value; + var layer1 = overlayMaps[input1].toGeoJSON(); + var input2 = document.getElementById("differenceSelect_2").value; + var layer2 = overlayMaps[input2].toGeoJSON(); + var name = document.getElementById("differenceName").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 difference = turf.difference(multiPolygon1, multiPolygon2); + 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 3aecc35a5a3f185184d94df5030a5100fdd82886..ffa1a531792b94f816da2d1d2846ba6123ec8ffc 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 5893afead45fce105caf4714d9356ce32f7b303f..97efc1aa78085fb6a7029edb8a4a630e675cd3a8 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)); + } +} diff --git a/javascript/turfFormatConverter.js b/javascript/turfFormatConverter.js new file mode 100644 index 0000000000000000000000000000000000000000..c3c50951fc83f0ff3bcc6bf10a9f3d6973241595 --- /dev/null +++ b/javascript/turfFormatConverter.js @@ -0,0 +1,16 @@ +/* +Henter ut koordinatene fra GeoJSON-lag slik at en kan +konvertere mellom feature collections og format godtatt av turf +*/ + +function featureCollectionToMultiPolygon(layer) { // layer er her et GeoJSON-lag + if (layer["type"] == "FeatureCollection") { + var liste = []; + var features = layer["features"] + + for (var i = 0; i < features.length; i++) { + liste.push(features[i]["geometry"]["coordinates"]); + } + return liste; + } +} \ No newline at end of file