Lagd flyfoto-kartlag med velger og hent fil

42b3fab3 · Jakob Severin Steffensen Hjelseth · a39ee908 · 42b3fab3 · a39ee908 · a39ee908
Commit 42b3fab3 authored 1 year ago by Jakob Severin Steffensen Hjelseth
--- 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>
--- a/javascript/dropFiles.js
+++ b/javascript/dropFiles.js
-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
--- a/javascript/handleFiles.js
+++ b/javascript/handleFiles.js
--- a/javascript/map.js
+++ b/javascript/map.js
-// Bestemme URL til basiskartet:
-var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <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: '&copy; <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() {

--- a/javascript/openFileFromExplorer.js
+++ b/javascript/openFileFromExplorer.js
+const clickOpen = document.getElementById("clickOpen");
+const dialog = document.getElementById("dialog");
+
+function clickMe() {
+    dialog.click();
+};
--- 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