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

Rydde opp litt som ikke funket

parent 3ed2f533
No related branches found
No related tags found
2 merge requests!15Resolve "Gjøre drop av filer mulig",!14Resolve "Gjøre drop av filer mulig"
Hide whitespace changes
Inline Side-by-side
index.html
+ 11
− 5
View file @ fdd3c516
...@@ -3,10 +3,11 @@ ...@@ -3,10 +3,11 @@
<head> <head>
<title>ProgGIS</title> <title>ProgGIS</title>
<!-- My css -->
<link rel="stylesheet" href="css/style.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="" /> <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> </head>
...@@ -46,8 +47,8 @@ ...@@ -46,8 +47,8 @@
</div> </div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;"> <div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
<input type="file" none="dialog" id="fileSelect"> <input type="file" accept=".zip" none="dialog" id="fileSelect">
<button id="onClick" accept=".zip" onclick="clickMe()">Click here to open new layers</button> <button id="onClick" onclick="clickMe()">Click here to open new layers</button>
</div> </div>
<div style="margin-left: 10px; font-size: 18px; height: 50vh;"> <div style="margin-left: 10px; font-size: 18px; height: 50vh;">
...@@ -138,12 +139,17 @@ ...@@ -138,12 +139,17 @@
</div> </div>
</div> </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/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script> <script src="javascript/sidebar&boxes.js"></script>
<script src="javascript/openFileExplorer.js"></script> <script src="javascript/openFileExplorer.js"></script>
<script src="javascript/fileHandler.js"></script> <script src="javascript/fileHandler.js"></script>
<!-- Imported js -->
<script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
<script src="https://unpkg.com/shapefile@0.6"></script> <script src="https://unpkg.com/shapefile@0.6"></script>
......
javascript/fileHandler.js
+ 1
− 62
View file @ fdd3c516
/* //document.getElementById("fileSelect").addEventListener("change", handleReadFile());
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
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