Skip to content
Snippets Groups Projects
Commit 42b3fab3 authored by Jakob Severin Steffensen Hjelseth's avatar Jakob Severin Steffensen Hjelseth
Browse files

Lagd flyfoto-kartlag med velger og hent fil

parent a39ee908
No related branches found
No related tags found
2 merge requests!8From dev into main,!7Resolve "Gjøre drop av filer mulig"
Hide whitespace changes
Inline Side-by-side
index.html
+ 8
− 4
View file @ 42b3fab3
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" /> <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/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> </head>
<body class="standard"> <body class="standard">
...@@ -45,12 +47,14 @@ ...@@ -45,12 +47,14 @@
</svg> </svg>
</div> </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;"> <div style="margin-left: 10px; font-size: 18px; height: 60vh;">
<p id="layers"></p> <p id="layers"></p>
</div> </div>
<div class="dropBox" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
<p>Drop files here 8)</p>
</div>
</div> </div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;"> <div id="map" style="position: relative; z-index: 1; height: 80vh;">
...@@ -143,4 +147,4 @@ ...@@ -143,4 +147,4 @@
<script src="javascript/map.js"></script> <script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script> <script src="javascript/sidebar&boxes.js"></script>
<script src="javascript/dropFiles.js"></script> <script src="javascript/openFileFromExplorer.js"></script>
\ No newline at end of file
javascript/dropFiles.js deleted 100644 → 0
+ 0
− 29
View file @ a39ee908
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
javascript/handleFiles.js deleted 100644 → 0
+ 0
− 0
View file @ a39ee908
javascript/map.js
+ 23
− 6
View file @ 42b3fab3
// 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: // Initialiserer kartet:
var map = L.map('map', { var map = L.map('map', {
layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået maxZoom: 18, // Justerer zoom-nivået
minZoom: 6, minZoom: 6,
zoomControl: false, // Fjerner default zoom-knapper zoomControl: false, // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13) }).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 // Legger til zoom-knapper på egnet sted
L.control.zoom({ L.control.zoom({
position:'topright' position:'topright'
}).addTo(map); }).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*/ /* Activate and deactivate interactions in the leaflet map*/
function deactivateMap() { function deactivateMap() {
......
javascript/openFileFromExplorer.js 0 → 100644
+ 6
− 0
View file @ 42b3fab3
const clickOpen = document.getElementById("clickOpen");
const dialog = document.getElementById("dialog");
function clickMe() {
dialog.click();
};
style.css
+ 20
− 13
View file @ 42b3fab3
...@@ -41,19 +41,6 @@ ...@@ -41,19 +41,6 @@
flex-direction: row; 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 { .button {
font-family: monospace; font-family: monospace;
font-weight: bolder; font-weight: bolder;
...@@ -79,4 +66,24 @@ ...@@ -79,4 +66,24 @@
height: 80vh; height: 80vh;
overflow-x: hidden; overflow-x: hidden;
transition: 0.5s; 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment