diff --git a/css/style.css b/css/style.css
index d7a4b83141a26120d1f65e14bb114a42522a35ef..38a8717b7df7f8cf9f2183afeb456bfa05daf897 100644
--- a/css/style.css
+++ b/css/style.css
@@ -68,11 +68,11 @@
transition: 0.5s;
}
-#dialog {
+#fileSelect {
display: none;
}
-#clickOpen {
+#onClick {
font-family: monospace;
font-size: larger;
background-color: orangered;
diff --git a/index.html b/index.html
index 194d26b6be85815e8f09c2c402526c28d570c17d..cb65adf1926e1a157d3e09b6d259a0d3be3b4530 100644
--- a/index.html
+++ b/index.html
@@ -46,8 +46,8 @@
</div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
- <input type="file" none="dialog" id="dialog" multiple>
- <button id="clickOpen" onclick="clickMe()">Click here to open new layers</button>
+ <input type="file" none="dialog" id="fileSelect" multiple>
+ <button id="onClick" accept=".zip" onclick="clickMe()">Click here to open new layers</button>
</div>
<div style="margin-left: 10px; font-size: 18px; height: 50vh;">
@@ -56,86 +56,84 @@
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
- <div id="drop_zone">
- <div style="display: flex; flex-grow: 2; flex-direction: column;">
- <div style="height: 72vh;">
- <div id="bufferBox" class="box">
- <div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
-
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
- xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
- </svg>
- </div>
- </div>
-
- <div id="intersectionBox" class="box">
- <div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
-
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
- xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
- </svg>
- </div>
- </div>
-
- <div id="unionBox" class="box">
- <div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
-
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
- xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
- </svg>
- </div>
+ <div style="display: flex; flex-grow: 2; flex-direction: column;">
+ <div style="height: 72vh;">
+ <div id="bufferBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
+
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+ </svg>
</div>
+ </div>
- <div id="differenceBox" class="box">
- <div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
-
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
- xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
- </svg>
- </div>
+ <div id="intersectionBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
+
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+ </svg>
</div>
+ </div>
- <div id="tutorialBox" class="box">
- <div class="box3">
- <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
-
- <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
- xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
- </svg>
- </div>
+ <div id="unionBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
- <p style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
- border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
- Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
- </p>
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+ </svg>
</div>
</div>
- <div class="box2">
- <div style="padding-left: 2vw;">
- <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
- 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"/>
+ <div id="differenceBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
+
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
+ </div>
- <div style="width: 95vw;"></div>
-
- <div style="padding-right: 2vw;">
- <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
- xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+ <div id="tutorialBox" class="box">
+ <div class="box3">
+ <h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
+
+ <svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
+ xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
+
+ <p style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
+ border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
+ Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
+ </p>
+ </div>
+ </div>
+
+ <div class="box2">
+ <div style="padding-left: 2vw;">
+ <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
+ 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 style="width: 95vw;"></div>
+
+ <div style="padding-right: 2vw;">
+ <svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
+ xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
+ <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
+ </svg>
</div>
</div>
</div>
@@ -144,8 +142,10 @@
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
<script src="javascript/openFileFromExplorer.js"></script>
-
+
+ <script src="javascript/index.js"></script>
<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/index.js b/javascript/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ef2133d5e688e60054129ffcd7889ae81ab355a
--- /dev/null
+++ b/javascript/index.js
@@ -0,0 +1,63 @@
+/*
+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/openFileFromExplorer.js b/javascript/openFileFromExplorer.js
index 7afb68130253fc63f7414374cc332e4c277077bc..f54b865d1b1d8e6a9fc7b401fdcbe8a6f89e38d2 100644
--- a/javascript/openFileFromExplorer.js
+++ b/javascript/openFileFromExplorer.js
@@ -1,16 +1,6 @@
-const clickOpen = document.getElementById("clickOpen"); // Knappen vi gir funksjonalitet
-const dialog = document.getElementById("dialog"); // Input-feltet vi har skjult, men som lagrer dataen som velges
+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
function clickMe() {
dialog.click();
}
-
-dialog.addEventListener("input", () => {
- if (dialog.files.length) {
- for (i = 0; i < dialog.files.length; i++) {
- var file = shp(dialog.files[i].name);
- L.geoJSON().addData(file).addTo(map);
- document.getElementById("layers").innerHTML += "Hei!";
- }
- }
-});