Fortsette så smått med å lese shapefiler

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

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;">

javascript/fileHandler.js

-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);
+  }
+}

javascript/openFileExplorer.js

-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();