From 886ab38675e1bf1a4f4b62f1d71e36102449562b Mon Sep 17 00:00:00 2001 From: jshjelse <jshjelse@stud.ntnu.no> Date: Fri, 29 Sep 2023 11:05:47 +0200 Subject: [PATCH] Begynne og generell layout --- css/style.css | 4 ++++ index.html | 13 +++++++++++++ javascript/buffer.js | 24 ++++++++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 javascript/buffer.js diff --git a/css/style.css b/css/style.css index 5c13ed0..2aec3e2 100644 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,10 @@ margin: 0; } +p { + font-size: 18px; +} + .box { font-family: monospace; background-color: orange; diff --git a/index.html b/index.html index 71144d4..92476c6 100644 --- a/index.html +++ b/index.html @@ -75,6 +75,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 a layer to create a buffer around:</p> + <select id="bufferSelect">Layer:</select> + + <p>Write the distance you want for the buffer (in meter):</p> + <input id="bufferDistance"> + + <p>Choose a name for the new buffer:</p> + <input id="bufferName"><br> + + <button class="button" style="font-size: 25px;" onclick="makeBuffer()">Make buffer</button> </div> <div id="differenceBox" class="box"> @@ -179,8 +190,10 @@ <script src="javascript/fileHandler.js"></script> <script src="javascript/geoJSON.js"></script> <script src="javascript/leafletLayerControl.js"></script> + <script src="javascript/buffer.js"></script> <!-- Imported js --> + <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script> <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> --> </body> diff --git a/javascript/buffer.js b/javascript/buffer.js new file mode 100644 index 0000000..62685b6 --- /dev/null +++ b/javascript/buffer.js @@ -0,0 +1,24 @@ +/* +Link til nettside med turfjs-funksjoner: +https://turfjs.org/docs/ +*/ + +// Fyller select med alternativ: + +var s = document.getElementById("bufferSelect"); + +s.options.lenght = 0; + +for (key in overlayMaps) { + s.add(new Option(key, overlayMaps[key])); +} + +function makeBuffer() { + var layer = document.getElementById("bufferSelect").value; + var distance = parseFloat(document.getElementById("bufferDistance").value) / 10^3; + var name = document.getElementById("bufferName").value; + + var buffer = L.geoJSON(turf.buffer(layer, distance, {units: "kilometers"})).addTo(map); + + overlayMaps[name] = buffer; +} \ No newline at end of file -- GitLab