Merge branch '15-funksjonalitet-for-kartbytte' into 'dev'

Resolve "Funksjonalitet for kartbytte"

See merge request !45

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> -->

javascript/mapChange.js

+// 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());
+        }
+    }
+}