diff --git a/index.html b/index.html
index c2176d3991e0a8824d7c4902b2a3e3478cb25d12..06e7d13a22592df38290893280f543ffa636fb33 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,16 @@
<head>
<title>ProgGIS</title>
<style>
+ .box1 {
+ display: flex;
+ flex-grow: 6;
+ flex-direction: row;
+ }
+ .box2 {
+ display: flex;
+ flex-grow: 3;
+ flex-direction: row;
+ }
.button {
font-family: monospace;
font-weight: bolder;
@@ -17,10 +27,16 @@
margin-top: 0.5vh;
margin-bottom: 0.5vh;
}
- .box1 {
- display: flex;
- flex-grow: 6;
- flex-direction: row;
+ .sidebar {
+ background-color: orangered;
+ color: white;
+ font-family: monospace;
+ position: fixed;
+ z-index: 999;
+ width: 0vw;
+ height: 80vh;
+ overflow-x: hidden;
+ transition: 0.5s;
}
</style>
</head>
@@ -29,8 +45,7 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<body style="margin: 0;">
- <div style="display: flex; flex-grow: 3; flex-direction: row;
- height: 20vh; background-color: orange; color: white; font-family: monospace;">
+ <div class="box2" style="height: 20vh; background-color: orange; color: white; font-family: monospace;">
<div style="padding-left: 2vh; padding-top: 2vh;">
<svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-europe-africa" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.809.809 0 0 1 1.034-.275.809.809 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34c.078.028.16.044.243.054.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.333.333 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501Z"/>
@@ -54,12 +69,23 @@
</svg>
</div>
</div>
+ <div id="sidebar1" class="sidebar">
+ <div style="display: flex; flex-grow: 2; flex-direction: row;">
+ <div style="width: 20vw; padding-left: 10px;">
+ <h1 style="font-size: 2vw;">Data layers</h1>
+ </div>
+ <svg onclick="closeNav()" style="padding-top: 1vh; padding-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>
+ <p>Hei på deg</p>
+ </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>
<div style="display: flex; flex-grow: 3; flex-direction: row;">
<div style="padding-left: 2vw;">
- <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;"
+ <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>
@@ -91,5 +117,24 @@
minZoom: 6,
zoomControl: false // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13)
+
+ // Legger til zoom-knapper på egnet sted
+ L.control.zoom({
+ position:'topright'
+ }).addTo(map);
+ /* Set the width of the sidebar to 25vw */
+ function openNav() {
+ document.getElementById("sidebar1").style.width = "25vw";
+ boolsk = true;
+ }
+
+ /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
+ function closeNav() {
+ document.getElementById("sidebar1").style.width = "0vw";
+ Reset()
+ boolsk = false;
+ }
+
+
</script>
\ No newline at end of file