From 42b3fab35d96f3ec9c66bf3726c38ea5aa1ceb16 Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Fri, 15 Sep 2023 13:35:33 +0200
Subject: [PATCH] Lagd flyfoto-kartlag med velger og hent fil
---
index.html | 12 +++++++----
javascript/dropFiles.js | 29 --------------------------
javascript/handleFiles.js | 0
javascript/map.js | 29 ++++++++++++++++++++------
javascript/openFileFromExplorer.js | 6 ++++++
style.css | 33 ++++++++++++++++++------------
6 files changed, 57 insertions(+), 52 deletions(-)
delete mode 100644 javascript/dropFiles.js
delete mode 100644 javascript/handleFiles.js
create mode 100644 javascript/openFileFromExplorer.js
diff --git a/index.html b/index.html
index 7a217f0..9be1927 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
<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>
+ <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
+
</head>
<body class="standard">
@@ -45,12 +47,14 @@
</svg>
</div>
+ <div style="margin-top: 5px; margin-bottom: 5px;">
+ <input type="file" none="dialog" id="dialog">
+ <button id="clickOpen" onclick="clickMe()">Click here to open new layer</button>
+ </div>
+
<div style="margin-left: 10px; font-size: 18px; height: 60vh;">
<p id="layers"></p>
</div>
- <div class="dropBox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
- <p>Drop files here 8)</p>
- </div>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
@@ -143,4 +147,4 @@
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
-<script src="javascript/dropFiles.js"></script>
\ No newline at end of file
+<script src="javascript/openFileFromExplorer.js"></script>
diff --git a/javascript/dropFiles.js b/javascript/dropFiles.js
deleted file mode 100644
index 0e8258c..0000000
--- a/javascript/dropFiles.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function dropHandler(event) {
- event.preventDefault();
- event.stopPropagation();
-
- if (event.dataTransfer.items) {
- // Use DataTransferItemList interface to access the file(s)
- [...event.dataTransfer.items].forEach((item, i) => {
- // If dropped items aren't files, reject them
- if (item.kind === "file") {
- const file = item.getAsFile();
- let layer = file.name;
- document.getElementById("layers").innerHTML = layer;
- console.log(`… file[${i}].name = ${file.name}`);
- }
- });
- } else {
- // Use DataTransfer interface to access the file(s)
- [...event.dataTransfer.files].forEach((file, i) => {
- let layer = file.name;
- document.getElementById("layers").innerHTML = layer;
- console.log(`… file[${i}].name = ${file.name}`);
- });
- }
-}
-
-function dragOverHandler(event) {
- event.preventDefault();
- event.stopPropagation();
-}
\ No newline at end of file
diff --git a/javascript/handleFiles.js b/javascript/handleFiles.js
deleted file mode 100644
index e69de29..0000000
diff --git a/javascript/map.js b/javascript/map.js
index b3e3b48..4b50140 100644
--- a/javascript/map.js
+++ b/javascript/map.js
@@ -1,21 +1,38 @@
-// Bestemme URL til basiskartet:
-var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: '© <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
-});
-
// Initialiserer kartet:
var map = L.map('map', {
- layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false, // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13)
+// Bestemme URL til basiskartet:
+var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
+});
+
+// Google Map layer:
+
+var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
+ subdomains:['mt0','mt1','mt2','mt3']
+});
+
+osm_map.addTo(map);
+googleSat.addTo(map);
+
// Legger til zoom-knapper på egnet sted
L.control.zoom({
position:'topright'
}).addTo(map);
+// Layer control:
+
+var baselayers = {
+ "OpenStreetMap": osm_map,
+ "Satellite": googleSat
+};
+
+L.control.layers(baselayers).addTo(map)
+
/* Activate and deactivate interactions in the leaflet map*/
function deactivateMap() {
diff --git a/javascript/openFileFromExplorer.js b/javascript/openFileFromExplorer.js
new file mode 100644
index 0000000..5ad9ca4
--- /dev/null
+++ b/javascript/openFileFromExplorer.js
@@ -0,0 +1,6 @@
+const clickOpen = document.getElementById("clickOpen");
+const dialog = document.getElementById("dialog");
+
+function clickMe() {
+ dialog.click();
+};
diff --git a/style.css b/style.css
index b1d3433..d7a4b83 100644
--- a/style.css
+++ b/style.css
@@ -41,19 +41,6 @@
flex-direction: row;
}
-.dropBox {
- font-family: monospace;
- font-size: larger;
- width: 20vw;
- text-align: center;
- border-color: white;
- border-style: dotted;
- border-width: 5px;
- border-radius: 10px;
- margin-left: 2vw;
- margin-right: 2vw;
-}
-
.button {
font-family: monospace;
font-weight: bolder;
@@ -79,4 +66,24 @@
height: 80vh;
overflow-x: hidden;
transition: 0.5s;
+}
+
+#dialog {
+ display: none;
+}
+
+#clickOpen {
+ 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
--
GitLab