Merge branch '4-gjore-drop-av-filer-mulig' into 'main'

Resolve "Gjøre drop av filer mulig" Closes #4 See merge request !14

Merge branch '4-gjore-drop-av-filer-mulig' into 'main'
61333dfd · Jakob Severin Steffensen Hjelseth · 13e2a805 · e5340477 · 61333dfd · 61333dfd
Commit 61333dfd authored 1 year ago by Jakob Severin Steffensen Hjelseth
--- a/index.html
+++ b/index.html
@@ -3,10 +3,11 @@
    <head>
        <title>ProgGIS</title>
        
+        <!-- My css -->
        <link rel="stylesheet" href="css/style.css"/>
-
+        
+        <!-- Leaflet css -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
-        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    </head>
    
@@ -46,8 +47,8 @@
            </div>

            <div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
-                <input type="file" none="dialog" id="fileSelect" multiple>
-                <button id="onClick" accept=".zip" onclick="clickMe()">Click here to open new layers</button>
+                <input type="file" accept=".zip" none="dialog" id="fileSelect">
+                <button id="onClick" onclick="clickMe()">Click here to open new layers</button>
            </div>

            <div style="margin-left: 10px; font-size: 18px; height: 50vh;">
@@ -138,14 +139,18 @@
                </div>
            </div>
        </div>
+        
+        <!-- Leaflet js -->
+        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

+        <!-- My js -->
        <script src="javascript/map.js"></script>
        <script src="javascript/sidebar&boxes.js"></script>
-        <script src="javascript/openFileFromExplorer.js"></script>
+        <script src="javascript/openFileExplorer.js"></script>
+        <script src="javascript/fileHandler.js"></script>
        
-        <script src="javascript/index.js"></script>
+        <!-- Imported js -->
        <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
-        <script src="https://unpkg.com/shapefile@0.6"></script>

    </body>
 </html>
--- a/javascript/fileHandler.js
+++ b/javascript/fileHandler.js
+const input = document.getElementById("fileSelect");
+
+input.addEventListener("change", handleFile(), false);
+
+function handleFile() {
+    const fileList = file.files;
+    const fileName = fileList[0].name;
+
+    document.getElementById("layers").innerHTML = fileName;
+
+    //shp("files/pandr.zip").then(function(geojson) {
+		//see bellow for whats here this internally call shp.parseZip()
+	//});
+}
\ No newline at end of file
--- a/javascript/index.js
+++ b/javascript/index.js
-/*
-Kode hentet fra: https://github.com/ducduy10k/Read-data-from-file---Mapbox/blob/main/index.js
-*/
-
-function handleReadFile() {
-  let file = document.getElementById("fileSelect").files[0];
-  if (file) {
-    let ext = getExtension(file.name);
-    switch (ext) {
-      case "zip":
-        document.getElementById("layers").innerHTML = "Ja";
-        readDataFromShpZipFile(file);
-        break;
-      default:
-        alert("Invalid file ");
-    }
-  }
-}
-
-function getExtension(filename) {
-  var parts = filename.split(".");
-  return parts[parts.length - 1];
-}
-
-document.getElementById("fileSelect").addEventListener("change", handleReadFile());
-
-function readDataFromShpZipFile(file) {
-  const reader = new FileReader();
-  //document.getElementById("layers").innerHTML = "Ja";
-  reader.onload = (event) => {
-    shp(reader.result).then(function (fc) {
-      if (fc.features.length > 0) {
-        onHightLight(fc);
-      }
-    });
-  };
-  reader.readAsArrayBuffer(file);
-}
-
-function onHightLight(data) {
-  clearLayerFeature();
-  map.addSource("source-hightlight", {
-    type: "geojson",
-    data: data,
-  });
-  map.addLayer({
-    id: "layer-hightlight",
-    type: "line",
-    source: "source-hightlight",
-    layout: {},
-    paint: {
-      "line-color": "red",
-      "line-width": 2,
-    },
-  });
-}
-
-function clearLayerFeature() {
-  if (map.getLayer("layer-hightlight")) {
-    map.removeLayer("layer-hightlight");
-    map.removeSource("source-hightlight");
-  }
-}
\ No newline at end of file
--- a/javascript/map.js
+++ b/javascript/map.js
 // Initialiserer kartet:
-var map = L.map('map', {
+const map = L.map('map', {
    maxZoom: 18, // Justerer zoom-nivået
    minZoom: 6,
    zoomControl: false, // Fjerner default zoom-knapper

--- a/javascript/openFileFromExplorer.js
+++ b/javascript/openFileFromExplorer.js