diff --git a/index.html b/index.html index a3b6cf5349002934cd6ba011c252201310477b1d..dd5bf95411cd79e0876fd918aab97b3d16ad199c 100644 --- a/index.html +++ b/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> --> diff --git a/javascript/buffer.js b/javascript/buffer.js index 230703a6edee979e72be6b20c8e10d69de7f6240..54b2d78d8bd15e8c35c0432f115c8133fd2cbe51 100644 --- a/javascript/buffer.js +++ b/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; diff --git a/javascript/dissolve.js b/javascript/dissolve.js new file mode 100644 index 0000000000000000000000000000000000000000..3aecc35a5a3f185184d94df5030a5100fdd82886 --- /dev/null +++ b/javascript/dissolve.js @@ -0,0 +1,19 @@ +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 diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js index f08ff14e4bc787638a7fd98b8d9bcff55ef55b60..5893afead45fce105caf4714d9356ce32f7b303f 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 == "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)); }