Merge branch '5-lage-sidebar-for-kartlagene' into 'main'

Resolve "Lage sidebar for kartlagene"

Closes #5

See merge request !17

index.html

@@ -58,8 +58,8 @@
                 </div>
             </div>
 
-            <div style="margin-left: 10px; font-size: 18px; height: 50vh;">
-                <p id="layers"></p>
+            <div id="layers" style="font-family: monospace; margin-left: 10px; font-size: 18px; height: 50vh;">
+                
             </div>
         </div>
         
@@ -155,10 +155,12 @@
         <script src="javascript/sidebar&boxes.js"></script>
         <script src="javascript/openFileExplorer.js"></script>
         <script src="javascript/fileHandler.js"></script>
-
         <script src="javascript/geoJSON.js"></script>
+
         <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
         
+        <script src="javascript/leafletLayerControl.js"></script>
+
         <!-- Imported js -->
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
 

javascript/exampleData/TrainingCenters.geojson

+{
+    "type": "FeatureCollection",
+    "name": "Training centers",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {"name": "SIT Gløshaugen"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.403855, 63.421078],
+                    [10.404845, 63.421427],
+                    [10.40556, 63.421042],
+                    [10.404572, 63.420705],
+                    [10.403855, 63.421078]
+                ]]
+            }
+        }, {
+            "type": "Feature",
+            "properties": {"name": "SIT Dragvoll"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.474145, 63.407263],
+                    [10.475657, 63.407148],
+                    [10.475491, 63.406157],
+                    [10.473766, 63.406265],
+                    [10.474145, 63.407263]
+                ]]
+            }
+        }
+    ]
+}
\ No newline at end of file

javascript/exampleData/Universities.geojson

+{
+    "type": "FeatureCollection",
+    "name": "Universities",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {"name": "Gløshaugen"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.403787, 63.420031],
+                    [10.410954, 63.414691],
+                    [10.404863, 63.414188],
+                    [10.398170, 63.418901],
+                    [10.403787, 63.420031]
+                ]]
+            }
+        }, {
+            "type": "Feature",
+            "properties": {"name": "Dragvoll"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.467217, 63.409471],
+                    [10.471829, 63.408921],
+                    [10.47094, 63.406668],
+                    [10.466968 , 63.407128],
+                    [10.467217, 63.409471]
+                ]]
+            }
+        }
+    ]
+}
\ No newline at end of file

javascript/geoJSON.js

-var rectangle = [{
-    "type": "Feature",
-    "properties": {"name": "Gløshaugen"},
-    "geometry": {
-        "type": "Polygon",
-        "coordinates": [[
-            [10.403787, 63.420031],
-            [10.410954, 63.414691],
-            [10.404863, 63.414188],
-            [10.398170, 63.418901],
-            [10.403787, 63.420031]
-        ]]
-    }
-}];
+var rectangle1 = {
+    "type": "FeatureCollection",
+    "name": "Universities",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {"name": "Gløshaugen"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.403787, 63.420031],
+                    [10.410954, 63.414691],
+                    [10.404863, 63.414188],
+                    [10.398170, 63.418901],
+                    [10.403787, 63.420031]
+                ]]
+            }
+        }, {
+            "type": "Feature",
+            "properties": {"name": "Dragvoll"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.467217, 63.409471],
+                    [10.471829, 63.408921],
+                    [10.47094, 63.406668],
+                    [10.466968 , 63.407128],
+                    [10.467217, 63.409471]
+                ]]
+            }
+        }
+    ]
+};
+
+var rectangle2 = {
+    "type": "FeatureCollection",
+    "name": "Training centers",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {"name": "SIT Gløshaugen"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.403855, 63.421078],
+                    [10.404845, 63.421427],
+                    [10.40556, 63.421042],
+                    [10.404572, 63.420705],
+                    [10.403855, 63.421078]
+                ]]
+            }
+        }, {
+            "type": "Feature",
+            "properties": {"name": "SIT Dragvoll"},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [10.474145, 63.407263],
+                    [10.475657, 63.407148],
+                    [10.475491, 63.406157],
+                    [10.473766, 63.406265],
+                    [10.474145, 63.407263]
+                ]]
+            }
+        }
+    ]
+};
+
+var layer1 = L.geoJSON().addTo(map);
+var layer2 = L.geoJSON().addTo(map);
+
+fetch("javascript/exampleData/Universities.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    layer1.addData(data);
+})
 
-var geoLayer = L.geoJSON().addTo(map);
+fetch("javascript/exampleData/TrainingCenters.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    layer2.addData(data);
+})
 
-geoLayer.addData(rectangle);
+//layer1.addData(rectangle1);
+//layer2.addData(rectangle2);
+
+document.getElementById("layers").innerHTML += "Universities" + "<br>";
+document.getElementById("layers").innerHTML += "Training centers";
+
+// Hvordan slå av og på et lag:
+
+/*
+map.on('click', function() {
+    if(map.hasLayer(layer1)) {
+      map.removeLayer(layer1);
+    } else {
+      map.addLayer(layer1);
+    }
+  });
+*/

javascript/map.js

@@ -46,11 +46,3 @@ function activateMap() {
         handler.enable();
     });
 }
-
-map.on('click', function() {
-    if(map.hasLayer(geoLayer)) {
-      map.removeLayer(geoLayer);
-    } else {
-      map.addLayer(geoLayer);
-    }
-  });