From 1de75a2aa53c1db1d4e4148b9141e2bb88750e8c Mon Sep 17 00:00:00 2001
From: jshjelse <jshjelse@stud.ntnu.no>
Date: Thu, 5 Oct 2023 14:10:30 +0200
Subject: [PATCH] Fiksa!
---
index.html | 16 ++++++-
javascript/mapChange.js | 98 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 112 insertions(+), 2 deletions(-)
create mode 100644 javascript/mapChange.js
diff --git a/index.html b/index.html
index fcff435..65f8529 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
- <div class="box1">
+ <div id="buttons1" class="box1">
<p style="width: 7vw;"></p>
<button class="button" onclick="openBox('bufferBox')">Buffer</button>
<button class="button" onclick="openBox('differenceBox')">Difference</button>
@@ -36,6 +36,11 @@
<button class="button" onclick="openBox('intersectionBox')">Intersection</button>
<button class="button" onclick="openBox('unionBox')">Union</button>
</div>
+ <div id="buttons2" class="box2" style="display: none;">
+ <p style="width: 32vw;"></p>
+ <button class="button">TIN</button>
+ <button class="button">Voronoi</button>
+ </div>
</div>
<svg style="padding-right: 2vh; padding-top: 2vh;"
@@ -229,10 +234,16 @@
<div class="box2">
<div style="padding-left: 2vw;">
- <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
+ <svg id="sidebarOpener" 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>
+
+ <svg id="mapChanger" style="margin-left: 8vh; cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="changeMap()"
+ xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-pin-map-fill" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M3.1 11.2a.5.5 0 0 1 .4-.2H6a.5.5 0 0 1 0 1H3.75L1.5 15h13l-2.25-3H10a.5.5 0 0 1 0-1h2.5a.5.5 0 0 1 .4.2l3 4a.5.5 0 0 1-.4.8H.5a.5.5 0 0 1-.4-.8l3-4z"/>
+ <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999z"/>
+ </svg>
</div>
<div style="width: 95vw;"></div>
@@ -264,6 +275,7 @@
<script src="javascript/intersect.js"></script>
<script src="javascript/union.js"></script>
<script src="javascript/extract.js"></script>
+ <script src="javascript/mapChange.js"></script>
<!-- Imported js -->
<!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
diff --git a/javascript/mapChange.js b/javascript/mapChange.js
new file mode 100644
index 0000000..ef0097a
--- /dev/null
+++ b/javascript/mapChange.js
@@ -0,0 +1,98 @@
+// Variabler:
+
+var points = {
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [10.4044907, 63.4173049]
+ },
+ "properties": {
+ "name": "NTNU Gløshaugen"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [10.4696324, 63.4079572]
+ },
+ "properties": {
+ "name": "NTNU Dragvoll"
+ }
+ },
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [10.4336351, 63.4138729]
+ },
+ "properties": {
+ "name": "NTNU Moholt"
+ }
+ }
+ ]
+}
+
+var m = "m1"; // Hvilket kart en bruker
+var layersOnMap = []; // Hvilke kartlag som var på før en byttet til "m2"
+var NTNU_points = L.geoJSON(points, {style: {color: "blue"}}).bindPopup(function(point) {return point.feature.properties.name;})
+
+// Bytter layout på nettsiden ved kartbytte
+
+function changeMap() {
+
+ // Hvis en box allerede er åpen, må denne lukkes først:
+
+ if (boolskBox) {
+ closeBox(box);
+ }
+
+ // Avhengig av hvilket kart en allerede har oppe, bytter en til motsatt status:
+
+ if (m == "m1") {
+ m = "m2";
+
+ // Endrer knappene i menyen:
+ document.getElementById("buttons1").style.display = "none";
+ document.getElementById("buttons2").style.display = "flex";
+
+ // Endrer knappene nedrest til høyre i kartet:
+ document.getElementById("sidebarOpener").style.display = "none";
+ document.getElementById("mapChanger").style.marginLeft = "0";
+
+ // Skjuler synlige kartlag i kartet:
+ for (key in overlayMaps) {
+ var layer = overlayMaps[key];
+ if (map.hasLayer(layer)) {
+ handleLayer(key);
+ layersOnMap.push(key);
+ }
+ }
+
+ // Legger til nye punkt-markører i kartet:
+ NTNU_points.addTo(map);
+ } else if (m == "m2") {
+ m = "m1";
+
+ // Endrer knappene i menyen:
+ document.getElementById("buttons1").style.display = "flex";
+ document.getElementById("buttons2").style.display = "none";
+
+ // Endrer knappene nedrest til høyre i kartet:
+ document.getElementById("sidebarOpener").style.display = "block";
+ document.getElementById("mapChanger").style.marginLeft = "8vh";
+
+ // Fjerner punkt-markørene fra kartet:
+ if (map.hasLayer(NTNU_points)) {
+ map.removeLayer(NTNU_points);
+ }
+
+ // Legger til kartlagene som lå i kartet før en byttet kartmodus:
+ while (layersOnMap.length > 0) {
+ handleLayer(layersOnMap.shift());
+ }
+ }
+}
--
GitLab