Merge branch '14-extract' into 'dev'

Resolve "Extract"

See merge request !43

index.html

@@ -150,6 +150,20 @@
                                 <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 a layer to extract features from:</p>
+                        <select id="extractSelect"></select>
+
+                        <p>Which feature will you extract to a new layer:</p>
+                        <select id="propertySelect"></select>
+
+                        <p>Which value will you sort out:</p>
+                        <select id="valueSelect"></select>
+
+                        <p>Choose a name for the new layer:</p>
+                        <input id="extractName"><br>
+
+                        <button class="button" style="font-size: 25px;" onclick="extract()">Extract</button>
                     </div>
 
                     <div id="intersectionBox" class="box">
@@ -249,6 +263,7 @@
         <script src="javascript/turfFormatConverter.js"></script>
         <script src="javascript/intersect.js"></script>
         <script src="javascript/union.js"></script>
+        <script src="javascript/extract.js"></script>
 
         <!-- Imported js -->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->

javascript/extract.js

+document.getElementById("extractSelect").addEventListener("change", () => {
+    var input = document.getElementById("extractSelect").value;
+
+    if (input == "- - -") {
+        var select = document.getElementById("propertySelect");
+        select.innerHTML = "";
+        select.add(new Option(text="- - -"));
+    } else {
+        var layer = overlayMaps[input].toGeoJSON();
+
+        var features = [];
+        
+        for (element in layer["features"]) {
+            for (key in layer["features"][element]["properties"]) {
+                if (!features.includes(key)) {
+                    features.push(key);
+                }
+            }
+        }
+        
+        var select = document.getElementById("propertySelect");
+        select.innerHTML = "";
+        select.add(new Option(text="- - -"));
+
+        for (var i = 0; i < features.length; i++) {
+            select.add(new Option(text = features[i], value = features[i]));
+        }
+    }
+})
+
+document.getElementById("propertySelect").addEventListener("change", () => {
+    var input = document.getElementById("extractSelect").value;
+
+    if (input == "- - -") {
+        var select = document.getElementById("valueSelect");
+        select.innerHTML = "";
+        select.add(new Option(text="- - -"));
+    } else {
+        var layer = overlayMaps[input].toGeoJSON();
+        var property = document.getElementById("propertySelect").value;
+
+        var values = [];
+
+        for (element in layer["features"]) {
+            if (!values.includes(layer["features"][element]["properties"][property])) {
+                values.push(layer["features"][element]["properties"][property]);
+            }
+        }
+
+        var select = document.getElementById("valueSelect");
+        select.innerHTML = "";
+        select.add(new Option(text="- - -"));
+
+        for (var i = 0; i < values.length; i++) {
+            select.add(new Option(text = values[i], value = values[i]));
+        }
+    }
+})
+
+function extract() {
+    var input = document.getElementById("extractSelect").value;
+    var layer = overlayMaps[input].toGeoJSON();
+    var property = document.getElementById("propertySelect").value;
+    var value = document.getElementById("valueSelect").value;
+    var name = document.getElementById("extractName").value;
+
+    var extracted = [];
+
+    try {
+        for (element in layer["features"]) {
+            if (layer["features"][element]["properties"][property] == value) {
+                extracted.push(layer["features"][element]);
+            }
+        }
+        var extract = turf.featureCollection(extracted);
+
+        var newLayer = new L.GeoJSON(extract, {style: getStyle()});
+
+        overlayMaps[name] = newLayer;
+        
+        updateSidebar();
+        handleLayer(name);
+        document.getElementById("extractName").value = "";
+        resetInput();
+    } catch(failure) {
+        alert(failure);
+    }
+}
+
+function resetInput() {
+    fillSelect("extractSelect");
+
+    var select = document.getElementById("propertySelect");
+    select.innerHTML = "";
+
+    var select = document.getElementById("valueSelect");
+    select.innerHTML = "";
+}

javascript/sidebar&boxes.js

@@ -32,6 +32,8 @@ function openBox(id) {
         fillDoubleSelect("differenceSelect");
     } else if (id == "dissolveBox") {
         fillSelect("dissolveSelect");
+    } else if (id == "extractBox") {
+        fillSelect("extractSelect");
     } else if (id == "intersectionBox") {
         fillDoubleSelect("intersectionSelect");
     } else if (id == "unionBox") {
@@ -59,8 +61,8 @@ function closeBox(id) {
 
 function fillSelect(id) {
     var select = document.getElementById(id);
-    
     select.innerHTML = "";
+    select.add(new Option(text="- - -"));
     
     for (key in overlayMaps) {
         select.add(new Option(text = key, value = key));
@@ -70,9 +72,10 @@ function fillSelect(id) {
 function fillDoubleSelect(id) {
     var select1 = document.getElementById(id + "_1");
     var select2 = document.getElementById(id + "_2");
-    
     select1.innerHTML = "";
     select2.innerHTML = "";
+    select1.add(new Option(text="- - -"));
+    select2.add(new Option(text="- - -"));
 
     for (key in overlayMaps) {
         select1.add(new Option(text = key, value = key));