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

Merge branch '31-handtering-av-kartlag' into 'dev' 

Resolve "Håndtering av kartlag"

See merge request !70
parents 818bea8d 80f7461e
No related branches found
No related tags found
2 merge requests!71Dev,!70Resolve "Håndtering av kartlag"
Hide whitespace changes
Inline Side-by-side
css/style.css
+ 4
− 5
View file @ 642f2b76
......@@ -67,14 +67,14 @@ p {
font-size: larger;
background-color: orangered;
color: white;
width: 20vw;
width: 18vw;
text-align: center;
border-color: white;
border-style: dotted;
border-width: 5px;
border-radius: 10px;
margin-left: 2vw;
margin-right: 2vw;
margin-left: 1vw;
margin-right: 1vw;
cursor: pointer;
}
......@@ -98,14 +98,13 @@ p {
font-family: monospace;
background-color: black;
color: white;
width: 20vw;
width: 18vw;
text-align: center;
border-color: white;
border-style: dotted;
border-width: 5px;
border-radius: 10px;
margin-top: 1vh;
margin-left: 2vw;
margin-right: 2vw;
cursor: pointer;
}
......
index.html
+ 5
− 5
View file @ 642f2b76
......@@ -51,15 +51,15 @@
</div>
<div id="dataLayers" class="sidebar">
<div class="box3" style="margin-left: 10px;">
<h1 style="width: 20vw; font-size: 2vw;">Data layers</h1>
<div class="box3" style="margin-left: 1vw;">
<h1 style="width: 18.5vw; font-size: 2vw;">Data layers</h1>
<svg onclick="closeNav()" style="margin-top: 1vh; margin-right: 1vw; cursor: pointer;" xmlns="http://www.w3.org/2000/svg" width="4vw" height="4vw" fill="white" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</div>
<div style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px;">
<div style="margin-top: 2vh;">
<input type="file" accept=".geojson" none="dialog" id="fileInput">
<div class="box3">
<button id="loadButton" class="onClick" onclick="clickMe()">Click here to choose a new layer</button>
......@@ -71,11 +71,11 @@
</div>
</div>
<div>
<div style="margin-top: 2vh;">
<button id="exampleData" class="onClick" onclick="loadExampleData()">Click here to load the sample datasets</button>
</div>
<div id="layers" style="font-family: monospace; margin-left: 10px; margin-top: 25px; font-size: 18px; height: 50vh;"></div>
<div id="layers" style="font-family: monospace; margin-left: 1vw; margin-top: 2vh; font-size: 18px; height: 53vh; overflow-y: scroll;"></div>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
......
javascript/colors.js
+ 24
− 17
View file @ 642f2b76
// Her farges alle lagene i kartet
var count = 0;
var a = 0;
var b = 0;
var c = 0;
var colors = [
"blue",
"red",
"yellow",
"green",
"purple",
"orange",
];
function RandomInt() {
return Math.floor(Math.random() * 256)
}
function getStyle() {
var myStyle = {
"color": colors[count]
};
// Lagene får bare en tilfeldig farge basert på telleren og fargene i listen over
count++;
if (count == colors.length) {
count = 0;
a += RandomInt();
b += RandomInt();
c += RandomInt();
if (a > 255) {
a = 0;
} else if (b > 255) {
b = 0;
} else if (c > 255) {
c = 0;
}
var myStyle = {
"color": "rgb(" + a.toString() + "," + b.toString() + "," + c.toString() + ")"
};
return myStyle
}
function changeColor(name) {
overlayMaps[name].setStyle(getStyle());
}
javascript/leafletLayerControl.js
+ 49
− 5
View file @ 642f2b76
......@@ -24,6 +24,8 @@ function loadExampleData() {
overlayMaps["Bygg_l"] = Bygg_l;
overlayMaps["Samferdsel"] = Samferdsel;
document.getElementById("layers").style.height = "60vh";
updateSidebar();
exampleLoaded = true;
document.getElementById("exampleData").style.display = "none";
......@@ -38,16 +40,54 @@ function updateSidebar() {
if (!addedLayers.includes(key)) {
addedLayers.push(key);
var layerButton = document.createElement("div");
layerButton.innerHTML = `<button id=${key} class='sidebarButton' onclick='handleLayer("${key}")' />${key}`;
var layerDiv = document.createElement("div");
var start = `<div id=${key + '_1'} style="position: flex; flex-grow: 3; flex-direction: row;">`;
var button = `<button id=${key} class='sidebarButton' onclick='handleLayer("${key}")'>${key}</button>`;
var paintB = `<svg onclick='changeColor("${key}")' style="cursor: pointer;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-palette-fill" viewBox="0 0 16 16"> <path d="M12.433 10.07C14.133 10.585 16 11.15 16 8a8 8 0 1 0-8 8c1.996 0 1.826-1.504 1.649-3.08-.124-1.101-.252-2.237.351-2.92.465-.527 1.42-.237 2.433.07M8 5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m4.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/> </svg>`;
var deleteB = `<svg onclick='deleteMapLayer("${key}")' style="cursor: pointer; margin-left: 1vw;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16"> <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/> </svg>`;
var end = '</div>';
layerDiv.innerHTML = start + button + paintB + deleteB + end;
container = document.getElementById("layers");
container.appendChild(layerButton);
container.appendChild(document.createElement("br"));
container.appendChild(layerDiv);
}
}
}
function deleteMapLayer(name) {
map.removeLayer(overlayMaps[name]);
delete overlayMaps[name];
addedLayers.splice(addedLayers.indexOf(name), 1);
var div = document.getElementById(name + '_1');
if (div) {
div.parentNode.removeChild(div);
}
checkExampleData();
}
function checkExampleData() {
var count = 0;
for (key in overlayMaps) {
if (key == "Arealdekke") {
count += 1;
} else if (key == "Bygg_f") {
count += 1;
} else if (key == "Bygg_l") {
count += 1;
} else if (key == "Samferdsel") {
count += 1;
}
if (count > 0) {
return;
}
}
exampleLoaded = false;
document.getElementById("exampleData").style.display = "block";
document.getElementById("layers").style.height = "53vh";
}
function handleLayer(name) { // Funksjon som viser og skjuler kartlag i kartet og endrer farge på knappene i sidebaren avhengig av lagets synlighet
var layer = null;
......@@ -58,6 +98,10 @@ function handleLayer(name) { // Funksjon som viser og skjuler kartlag i kartet o
}
}
if (layer == null) {
return;
}
if (map.hasLayer(layer)) {
map.removeLayer(layer);
document.getElementById(name).style.backgroundColor = "black";
......
javascript/sidebar&boxes.js
+ 8
− 6
View file @ 642f2b76
......@@ -61,8 +61,8 @@ function closeBox(id) { // Lukker aktuell boks og justerer siden motsatt av hva
function isPolygon(layer) {
var objects = layer["features"];
for (var i = 0; i < objects.lenght; i++) {
if (objects[i]["geometry"]["type"] == "Polygon") {
for (o of objects) {
if (o["geometry"]["type"] == "Polygon") {
return true;
}
}
......@@ -75,10 +75,10 @@ function fillSelect(id) {
select.add(new Option(text="- - -"));
for (key in overlayMaps) {
if (id == "bufferSelect") {
if (id == "bufferSelect" || id == "extractSelect") {
select.add(new Option(text = key, value = key));
}
else if (id != "bufferSelect" && isPolygon(overlayMaps[key])) {
else if (isPolygon(overlayMaps[key].toGeoJSON())) {
select.add(new Option(text = key, value = key));
}
}
......@@ -93,7 +93,9 @@ function fillDoubleSelect(id) {
select2.add(new Option(text="- - -"));
for (key in overlayMaps) {
select1.add(new Option(text = key, value = key));
select2.add(new Option(text = key, value = key));
if (isPolygon(overlayMaps[key].toGeoJSON())) {
select1.add(new Option(text = key, value = key));
select2.add(new Option(text = key, value = key));
}
}
}
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