Merge branch '11-dissolve' into 'dev'

Resolve "Dissolve"

See merge request !28

index.html

@@ -84,7 +84,7 @@
                         </div>
 
                         <p>Choose a layer to create a buffer around:</p>
-                        <select id="bufferSelect">Layer:</select>
+                        <select id="bufferSelect"></select>
                         
                         <p>Write the distance you want for the buffer (in meter):</p>
                         <input id="bufferDistance">
@@ -92,6 +92,8 @@
                         <p>Choose a name for the new buffer:</p>
                         <input id="bufferName"><br>
 
+                        <p>Do you want to dissolve the layers? <input type="checkbox" id="bufferCheck"></p>
+
                         <button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button>
                     </div>
 
@@ -115,6 +117,14 @@
                                 <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 dissolve:</p>
+                        <select id="dissolveSelect"></select>
+
+                        <p>Choose a name for the new dissolved layer:</p>
+                        <input id="dissolveName"><br>
+
+                        <button class="button" style="font-size: 25px;" onclick="dissolve()">Dissolve</button>
                     </div>
 
                     <div id="extractBox" class="box">
@@ -198,6 +208,7 @@
         <script src="javascript/geoJSON.js"></script>
         <script src="javascript/leafletLayerControl.js"></script>
         <script src="javascript/buffer.js"></script>
+        <script src="javascript/dissolve.js"></script>
 
         <!-- Imported js -->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->

javascript/buffer.js

@@ -10,8 +10,13 @@ function makeBuffer() {
     var name = document.getElementById("bufferName").value;
 
     try {
-        var buffer = turf.buffer(layer.toGeoJSON(), distance, {units: "meters"}); // Denne må ryddes opp i!
-        var newLayer = L.geoJSON(turf.dissolve(buffer));
+        var buffer = turf.buffer(layer.toGeoJSON(), distance, {units: "meters"});
+        
+        if (document.getElementById("bufferCheck").checked) {
+            var newLayer = L.geoJSON(turf.dissolve(buffer));
+        } else {
+            var newLayer = L.geoJSON(buffer);
+        }
         
         overlayMaps[name] = newLayer;
         

javascript/dissolve.js

+function dissolve() {
+    var input = document.getElementById("dissolveSelect").value;
+    var layer = overlayMaps[input];
+    var name = document.getElementById("dissolveName").value;
+    
+    try {
+        var dissolved = turf.dissolve(layer.toGeoJSON());
+        var newLayer = L.geoJSON(dissolved);
+
+        overlayMaps[name] = newLayer;
+
+        updateSidebar();
+        handleLayer(name);
+        document.getElementById("dissolveSelect").value = "";
+        document.getElementById("dissolveName").value = "";
+    } catch(failure) {
+        alert(failure);
+    }
+}
\ No newline at end of file

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 == "dissolveBox") {
+        fillSelect("dissolveSelect");
     }
     
     document.getElementById(String(id)).style.width = "40vw";
@@ -54,7 +56,6 @@ function fillSelect(id) {
     
     select.innerHTML = "";
     
-    //select.options.lenght = 0;
     for (key in overlayMaps) {
         select.add(new Option(text = key, value = key));
     }