Ferdigstille

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> -->

javascript/difference.js

@@ -21,7 +21,7 @@ function difference() {
         updateSidebar();
         handleLayer(name);
         document.getElementById("differenceName").value = "";
-        fillDifferenceSelect();
+        fillDoubleSelect("differenceSelect");
     } catch(failure) {
         alert(failure)
     }

javascript/intersect.js

+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);
+    }
+}

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 = "";