From c23d3bbb9943b9e58a4318b0ace0474c2b7b86be Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Mon, 18 Sep 2023 21:32:16 +0200
Subject: [PATCH] =?UTF-8?q?Fortsette=20s=C3=A5=20sm=C3=A5tt=20med=20=C3=A5?=
=?UTF-8?q?=20lese=20shapefiler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/style.css | 34 ++++++++++++-------------
index.html | 11 ++++++--
javascript/fileHandler.js | 46 ++++++++++++++++++++++++++--------
javascript/openFileExplorer.js | 3 +--
4 files changed, 63 insertions(+), 31 deletions(-)
diff --git a/css/style.css b/css/style.css
index 38a8717..4059555 100644
--- a/css/style.css
+++ b/css/style.css
@@ -56,6 +56,22 @@
margin-bottom: 0.5vh;
}
+.onClick {
+ font-family: monospace;
+ font-size: larger;
+ background-color: orangered;
+ color: white;
+ width: 20vw;
+ text-align: center;
+ border-color: white;
+ border-style: dotted;
+ border-width: 5px;
+ border-radius: 10px;
+ margin-left: 2vw;
+ margin-right: 2vw;
+ cursor: pointer;
+}
+
.sidebar {
font-family: monospace;
background-color: orangered;
@@ -68,22 +84,6 @@
transition: 0.5s;
}
-#fileSelect {
+#fileInput {
display: none;
}
-
-#onClick {
- font-family: monospace;
- font-size: larger;
- background-color: orangered;
- color: white;
- width: 20vw;
- text-align: center;
- border-color: white;
- border-style: dotted;
- border-width: 5px;
- border-radius: 10px;
- margin-left: 2vw;
- margin-right: 2vw;
- cursor: pointer;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 74be1ee..51de158 100644
--- a/index.html
+++ b/index.html
@@ -47,8 +47,15 @@
</div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
- <input type="file" accept=".zip" none="dialog" id="fileSelect">
- <button id="onClick" onclick="clickMe()">Click here to open new layers</button>
+ <input type="file" accept=".zip" none="dialog" id="fileInput">
+ <div class="box3">
+ <button 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">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
+ </svg>
+ </div>
</div>
<div style="margin-left: 10px; font-size: 18px; height: 50vh;">
diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js
index 12548c5..2cfc2bd 100644
--- a/javascript/fileHandler.js
+++ b/javascript/fileHandler.js
@@ -1,14 +1,40 @@
-const input = document.getElementById("fileSelect");
+function handleFile() {
+ input = document.getElementById("fileInput");
+ if (!input.files[0]) {
+ alert("Please select a file before clicking 'Load'.")
+ }
+ else {
+ file = input.files[0];
+ fr = new FileReader();
-input.addEventListener("change", handleFile(), false);
+ arrayBuffer = fr.readAsArrayBuffer(file);
-function handleFile() {
- const fileList = file.files;
- const fileName = fileList[0].name;
+ //document.getElementById("layers").innerHTML = arrayBuffer.type;
+
+ var shpfile = new L.Shapefile(arrayBuffer, {
+ onEachFeature: function(feature, layer) {
+ if (feature.properties) {
+ layer.bindPopup(Object.keys(feature.properties).map(function(k) {
+ return k + ": " + feature.properties[k];
+ }).join("<br />"), {
+ maxHeight: 200
+ });
+ }
+ }
+ });
- document.getElementById("layers").innerHTML = fileName;
+ shpfile.addTo(map);
+
+ shpfile.once("data:loaded", function() {
+ alert("Finished loaded shapefile 8)");
+ });
- //shp("files/pandr.zip").then(function(geojson) {
- //see bellow for whats here this internally call shp.parseZip()
- //});
-}
\ No newline at end of file
+ /*fr.onload = receiveBinary;
+ fr.readAsArrayBuffer(file);*/
+ }
+ function receiveBinary() {
+ result = fr.result;
+ var shpfile = new L.Shapefile(result);
+ shpfile.addTo(map);
+ }
+}
diff --git a/javascript/openFileExplorer.js b/javascript/openFileExplorer.js
index f54b865..3bdee1a 100644
--- a/javascript/openFileExplorer.js
+++ b/javascript/openFileExplorer.js
@@ -1,5 +1,4 @@
-const clickOpen = document.getElementById("onClick"); // Knappen vi gir funksjonalitet
-const dialog = document.getElementById("fileSelect"); // Input-feltet vi har skjult, men som lagrer dataen som velges
+const dialog = document.getElementById("fileInput"); // Input-feltet vi har skjult, men som lagrer dataen som velges
function clickMe() {
dialog.click();
--
GitLab