diff --git a/index.html b/index.html
index cb65adf1926e1a157d3e09b6d259a0d3be3b4530..74be1eee054f30ef4e1e4623224154957412b5c6 100644
--- 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>
diff --git a/javascript/fileHandler.js b/javascript/fileHandler.js
new file mode 100644
index 0000000000000000000000000000000000000000..12548c5e1e9262192686da592f8e69e2b27142c2
--- /dev/null
+++ b/javascript/fileHandler.js
@@ -0,0 +1,14 @@
+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
diff --git a/javascript/index.js b/javascript/index.js
deleted file mode 100644
index 8ef2133d5e688e60054129ffcd7889ae81ab355a..0000000000000000000000000000000000000000
--- a/javascript/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-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
diff --git a/javascript/map.js b/javascript/map.js
index f476ddab568827090b34d8eb233e772c67a1810c..5d74ba771d307f096ab2114f826d394452443a71 100644
--- a/javascript/map.js
+++ b/javascript/map.js
@@ -1,5 +1,5 @@
// 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
diff --git a/javascript/openFileFromExplorer.js b/javascript/openFileExplorer.js
similarity index 100%
rename from javascript/openFileFromExplorer.js
rename to javascript/openFileExplorer.js