diff --git a/index.html b/index.html index 61dc05099bc8c24a27c63fe5f1c2d56fd2dae9d2..7d1f35715b4299758a60aaf1d44ea3720c0f4ef3 100644 --- a/index.html +++ b/index.html @@ -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> --> diff --git a/javascript/difference.js b/javascript/difference.js index 694f997dca9a31aaec9a389fffd905a65ad95e87..1a5f09c5f0c15876fc3ab2d3da14d33358935052 100644 --- a/javascript/difference.js +++ b/javascript/difference.js @@ -21,7 +21,7 @@ function difference() { updateSidebar(); handleLayer(name); document.getElementById("differenceName").value = ""; - fillDifferenceSelect(); + fillDoubleSelect("differenceSelect"); } catch(failure) { alert(failure) } diff --git a/javascript/intersect.js b/javascript/intersect.js new file mode 100644 index 0000000000000000000000000000000000000000..bfaa63cd1d1df3b0544bf8db7ce96e2448fff2f1 --- /dev/null +++ b/javascript/intersect.js @@ -0,0 +1,28 @@ +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); + } +} diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js index 97efc1aa78085fb6a7029edb8a4a630e675cd3a8..1b5f1dd7f5b06e917589e43ea9c03134508a4810 100644 --- a/javascript/sidebar&boxes.js +++ b/javascript/sidebar&boxes.js @@ -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 = "";