diff --git a/index.html b/index.html index f6a49567da128657f02af1123e4fa2c871cba66e..46f687c05876b8624cc561c5c395a72bf4469f4d 100644 --- a/index.html +++ b/index.html @@ -60,9 +60,9 @@ </div> <div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;"> - <input type="file" accept=".zip" none="dialog" id="fileInput"> + <input type="file" accept=".geojson" none="dialog" id="fileInput"> <div class="box3"> - <button class="onClick" onclick="clickMe()">Click here to choose a new layer</button> + <button id="loadButton" class="onClick" onclick="clickMe()">Click here to choose a new layer</button> <svg onclick="handleFile()" style="cursor: pointer; margin-right: 2vw;" xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16"> @@ -281,6 +281,7 @@ <script src="javascript/leafletLayerControl.js"></script> <script src="javascript/turfFormatConverter.js"></script> <script src="javascript/tutorial.js"></script> + <script src="javascript/fileHandler.js"></script> <!-- Map functions --> diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js new file mode 100644 index 0000000000000000000000000000000000000000..abe77ce10ff0a0ad30903abe9e0268dc245d3af6 --- /dev/null +++ b/javascript/fileHandler.js @@ -0,0 +1,28 @@ +function handleFile() { + + const fileHandler = document.getElementById('fileInput'); + const selectedFile = fileHandler.files[0]; + + if (selectedFile == null) { + return alert("No chosen file!") + } + + console.log(selectedFile); + + var fr = new FileReader(); + fileHandler.value = ""; + document.getElementById("loadButton").style.backgroundColor = "orangered"; + + /* + fr.onload = function() { + var layer = omnivore.geojson(fr.result).addTo(map); + map.fitBounds(layer.getBounds()) + } + + fr.readAsDataURL(selectedFile); + + console.log("Kanskje bra...") + */ + + //console.log(data) +} diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js index 3bdee1abe896db1b979777621324fd3088315f93..5c2a4bc2d3d921d80d2da692aba32eb9a6b021b9 100644 --- a/javascript/openFileExplorer.js +++ b/javascript/openFileExplorer.js @@ -3,3 +3,7 @@ const dialog = document.getElementById("fileInput"); // Input-feltet vi har skju function clickMe() { dialog.click(); } + +dialog.addEventListener('change', () => { + document.getElementById("loadButton").style.backgroundColor = "green"; +})