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

Merge branch 'dev' into 'main' 

From dev into main

See merge request !8
parents bbbda86c 79207bd4
No related branches found
No related tags found
2 merge requests!20Resolve "Lage sidebar for kartlagene",!8From dev into main
Pipeline #232820 passed
Stage: deploy
Expand all Hide whitespace changes
Inline Side-by-side
style.css → css/style.css
+ 20
− 0
View file @ 86016b65
......@@ -66,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
index.html
+ 84
− 71
View file @ 86016b65
......@@ -3,11 +3,15 @@
<head>
<title>ProgGIS</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="css/style.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>
<script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script>
<script src="javascript/catiline.js"></script>
<script src="javascript/leaflet.shpfile.js"></script>
</head>
<body class="standard">
......@@ -45,96 +49,105 @@
</svg>
</div>
<div style="margin-left: 10px; font-size: 18px;">
<p>Hei<br>på<br>deg!<br><br>Hu<br>og<br>Hei :)</p>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
<input type="file" none="dialog" id="dialog" multiple>
<button id="clickOpen" onclick="clickMe()">Click here to open new layers</button>
</div>
<div style="margin-left: 10px; font-size: 18px; height: 50vh;">
<p id="layers"></p>
</div>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<div style="height: 72vh;">
<div id="bufferBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<div id="drop_zone">
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<div style="height: 72vh;">
<div id="bufferBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
</div>
<div id="intersectionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<div id="intersectionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
</div>
<div id="unionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<div id="unionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
</div>
<div id="differenceBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<div id="differenceBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
</div>
<div id="tutorialBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
<div id="tutorialBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
<p style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
</p>
</div>
<textarea style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
</textarea>
</div>
</div>
<div class="box2">
<div style="padding-left: 2vw;">
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
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 class="box2">
<div style="padding-left: 2vw;">
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
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 style="width: 95vw;"></div>
<div style="padding-right: 2vw;">
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
<div style="width: 95vw;"></div>
<div style="padding-right: 2vw;">
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
<script src="javascript/openFileFromExplorer.js"></script>
</body>
</html>
<script src="javascript/map.js"></script>
<script src="javascript/sidebar&boxes.js"></script>
\ No newline at end of file
javascript/catiline.js 0 → 100644
+ 769
− 0
View file @ 86016b65
This diff is collapsed.
javascript/leaflet.shpfile.js 0 → 100644
+ 63
− 0
View file @ 86016b65
'use strict';
/* global cw, shp */
L.Shapefile = L.GeoJSON.extend({
options: {
importUrl: 'javascript/shp.js'
},
initialize: function(file, options) {
L.Util.setOptions(this, options);
if (typeof cw !== 'undefined') {
/*eslint-disable no-new-func*/
if (!options.isArrayBuffer) {
this.worker = cw(new Function('data', 'cb', 'importScripts("' + this.options.importUrl + '");shp(data).then(cb);'));
} else {
this.worker = cw(new Function('data', 'importScripts("' + this.options.importUrl + '"); return shp.parseZip(data);'));
}
/*eslint-enable no-new-func*/
}
L.GeoJSON.prototype.initialize.call(this, {
features: []
}, options);
this.addFileData(file);
},
addFileData: function(file) {
var self = this;
this.fire('data:loading');
if (typeof file !== 'string' && !('byteLength' in file)) {
var data = this.addData(file);
this.fire('data:loaded');
return data;
}
if (!this.worker) {
shp(file).then(function(data) {
self.addData(data);
self.fire('data:loaded');
}).catch(function(err) {
self.fire('data:error', err);
})
return this;
}
var promise;
if (this.options.isArrayBufer) {
promise = this.worker.data(file, [file]);
} else {
promise = this.worker.data(cw.makeUrl(file));
}
promise.then(function(data) {
self.addData(data);
self.fire('data:loaded');
self.worker.close();
}).then(function() {}, function(err) {
self.fire('data:error', err);
})
return this;
}
});
L.shapefile = function(a, b, c) {
return new L.Shapefile(a, b, c);
};
javascript/map.js
+ 23
− 6
View file @ 86016b65
// 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() {
......
javascript/openFileFromExplorer.js 0 → 100644
+ 32
− 0
View file @ 86016b65
const clickOpen = document.getElementById("clickOpen"); // Knappen vi gir funksjonalitet
const dialog = document.getElementById("dialog"); // Input-feltet vi har skjult, men som lagrer dataen som velges
function clickMe() {
dialog.click();
}
dialog.addEventListener("input", () => {
if (dialog.files.length) {
for (i = 0; i < dialog.files.length; i++) {
document.getElementById("layers").innerHTML = dialog.files[i].name;
}
}
});
var geo = L.geoJson({features:[]}, {
onEachFeature: function popUp(f, l) {
var out = [];
if (f.properties){
for(var key in f.properties){
out.push(key + ": " + f.properties[key]);
}
l.bindPopup(out.join("<br />"));
}
}
}).addTo(map);
var base = 'vann.zip';
shp(base).then(function(data){
geo.addData(data);
});
javascript/shp.js 0 → 100644
+ 17726
− 0
View file @ 86016b65
This diff is collapsed.
javascript/vann.zip 0 → 100644
+ 0
− 0
View file @ 86016b65
File added
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