diff --git a/css/style.css b/css/style.css
index 44de507117b0fb71077d421d6e6b16e9434fd276..ec729db0062fed15bb9c8ea7b1ff0a79b855ff1b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
}
diff --git a/index.html b/index.html
index a81ee052a618e1ecca39627799734ca4c6966991..9a5e5be697a7d07b54a16dac45cd6ab4392452ec 100644
--- a/index.html
+++ b/index.html
@@ -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;">
diff --git a/javascript/colors.js b/javascript/colors.js
index ab61b1175d6d48295b830f6d3663e6c2d62d8dea..548e51aef78399d54246a4f89cd4fee0d0ce9c26 100644
--- a/javascript/colors.js
+++ b/javascript/colors.js
@@ -1,27 +1,34 @@
// 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());
+}
diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js
index 1a7caf6ff18530e1be88402b6319e308b309e57c..998ffb727c26cb8384763c13fc739285d50ed22a 100644
--- a/javascript/leafletLayerControl.js
+++ b/javascript/leafletLayerControl.js
@@ -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";
diff --git a/javascript/sidebar&boxes.js b/javascript/sidebar&boxes.js
index a4c065498974cfd8411974ca8b235db7d7f7d2ca..5926cdb90d24e15ffdbb7a3d0124adb5af684bb9 100644
--- a/javascript/sidebar&boxes.js
+++ b/javascript/sidebar&boxes.js
@@ -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));
+ }
}
}