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

Merge branch '4-gjore-drop-av-filer-mulig' into 'dev' 

Resolve "Gjøre drop av filer mulig"

See merge request !15
parents cbb4d69b 4ebce383
No related branches found
No related tags found
2 merge requests!16Dev,!15Resolve "Gjøre drop av filer mulig"
Hide whitespace changes
Inline Side-by-side
Showing
with 73 additions and 96 deletions
css/style.css
+ 17
− 17
View file @ 0b9e4325
......@@ -56,6 +56,22 @@
margin-bottom: 0.5vh;
}
.onClick {
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;
}
.sidebar {
font-family: monospace;
background-color: orangered;
......@@ -68,22 +84,6 @@
transition: 0.5s;
}
#fileSelect {
#fileInput {
display: none;
}
#onClick {
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
index.html
+ 23
− 8
View file @ 0b9e4325
......@@ -3,10 +3,11 @@
<head>
<title>ProgGIS</title>
<!-- My 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="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
......@@ -46,8 +47,15 @@
</div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
<input type="file" none="dialog" id="fileSelect" multiple>
<button id="onClick" accept=".zip" onclick="clickMe()">Click here to open new layers</button>
<input type="file" accept=".zip" none="dialog" id="fileInput">
<div class="box3">
<button class="onClick" onclick="clickMe()">Click here to choose a new layer</button>
<svg onclick="handleFile()" style="cursor: pointer; margin-right: 2vw;" 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>
<div style="margin-left: 10px; font-size: 18px; height: 50vh;">
......@@ -138,14 +146,21 @@
</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/sidebar&boxes.js"></script>
<script src="javascript/openFileFromExplorer.js"></script>
<script src="javascript/openFileExplorer.js"></script>
<script src="javascript/fileHandler.js"></script>
<script src="javascript/geoJSON.js"></script>
<script src="/js/leaflet-0.7.2/leaflet.ajax.min.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>
<!-- Imported js -->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
</body>
</html>
javascript/exampleData/shapefiles/arealbruk.zip 0 → 100644
+ 0
− 0
View file @ 0b9e4325
File added
javascript/exampleData/shapefiles/vann.zip 0 → 100644
+ 0
− 0
View file @ 0b9e4325
File added
javascript/fileHandler.js 0 → 100644
+ 0
− 0
View file @ 0b9e4325
javascript/geoJSON.js 0 → 100644
+ 18
− 0
View file @ 0b9e4325
var rectangle = [{
"type": "Feature",
"properties": {"name": "Gløshaugen"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[10.403787, 63.420031],
[10.410954, 63.414691],
[10.404863, 63.414188],
[10.398170, 63.418901],
[10.403787, 63.420031]
]]
}
}];
var geoLayer = L.geoJSON().addTo(map);
geoLayer.addData(rectangle);
javascript/index.js deleted 100644 → 0
+ 0
− 63
View file @ cbb4d69b
/*
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
javascript/map.js
+ 10
− 2
View file @ 0b9e4325
// Initialiserer kartet:
var map = L.map('map', {
const map = L.map('map', {
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false, // Fjerner default zoom-knapper
......@@ -45,4 +45,12 @@ function activateMap() {
map._handlers.forEach(function(handler) {
handler.enable();
});
}
\ No newline at end of file
}
map.on('click', function() {
if(map.hasLayer(geoLayer)) {
map.removeLayer(geoLayer);
} else {
map.addLayer(geoLayer);
}
});
javascript/openFileExplorer.js 0 → 100644
+ 5
− 0
View file @ 0b9e4325
const dialog = document.getElementById("fileInput"); // Input-feltet vi har skjult, men som lagrer dataen som velges
function clickMe() {
dialog.click();
}
javascript/openFileFromExplorer.js deleted 100644 → 0
+ 0
− 6
View file @ cbb4d69b
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();
}
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