Begynne å dandere sidebar

index.html

@@ -58,9 +58,7 @@
                 </div>
             </div>
 
-            <div id="layers" style="font-family: monospace; margin-left: 10px; font-size: 18px; height: 50vh;">
-                
-            </div>
+            <div id="layers" style="font-family: monospace; margin-left: 10px; margin-top: 10px; font-size: 18px; height: 50vh;"></div>
         </div>
         
         <div id="map" style="position: relative; z-index: 1; height: 80vh;">

javascript/exampleData/TrainingCenters.geojson

 {
     "type": "FeatureCollection",
-    "name": "Training centers",
+    "properties": {"name": "Training centers"},
     "features": [
         {
             "type": "Feature",

javascript/exampleData/Universities.geojson

 {
     "type": "FeatureCollection",
-    "name": "Universities",
+    "properties": {"name": "Universities"},
     "features": [
         {
             "type": "Feature",

javascript/geoJSON.js

-var layer1 = L.geoJSON().addTo(map);
-var layer2 = L.geoJSON().addTo(map);
+var U = {
+  "type": "FeatureCollection",
+  "properties": {"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 TC = {
+  "type": "FeatureCollection",
+  "properties" : {"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(U);
+var layer2 = L.geoJSON(TC);
+
+/*
 fetch("javascript/exampleData/Universities.geojson").then(function(response) {
     return response.json();
 }).then(function(data) {
@@ -12,6 +81,7 @@ fetch("javascript/exampleData/TrainingCenters.geojson").then(function(response)
 }).then(function(data) {
     layer2.addData(data);
 })
+*/
 
 // Hvordan slå av og på et lag:
 

javascript/leafletLayerControl.js

-var htmlObject = layer1.getContainer();
+// Layer control:
+
+var baselayers = {
+    "OpenStreetMap": osm_map,
+    "Satellite": googleSat
+}
+
+var controller = L.control.layers(baselayers).addTo(map);
+
+var overlayMaps = [layer1, layer2];
+
+// Test:
+
+for (const i = 0; i < length(overlayMaps); i++) {
+    var checkbox = document.createElement("div");
+    checkbox.innerHTML += "<input type='checkbox' onchange='handleLayer(layer)' />";
+    
+    container = document.getElementById("layers");
+
+    container.appendChild(checkbox);
+
+    var t = overlayMaps[i]["properties"];
+
+    var label = document.createElement('label');
+    label.htmlFor = t;
+    label.appendChild(document.createTextNode(t));
+
+    container.appendChild(label);
+    container.appendChild(document.createElement("br"));
+}
+
+function handleLayer(layer) {
+    if(map.hasLayer(layer)) {
+        map.removeLayer(layer);
+      } else {
+        map.addLayer(layer);
+      }
+}
+
+/*var htmlObject = controller.getContainer();
 
 var a = document.getElementById("layers");
 
@@ -6,4 +45,4 @@ function setParent(el, newParent) {
     newParent.appendChild(el);
 }
 
-setParent(htmlObject, a);
\ No newline at end of file
+setParent(htmlObject, a);*/
\ No newline at end of file

javascript/map.js

@@ -17,22 +17,14 @@ var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
 });
 
 osm_map.addTo(map);
-googleSat.addTo(map);
+
+// Layer control er lagd i 'leafletLayerControl.js'
 
 // Legger til zoom-knapper på egnet sted
 L.control.zoom({
     position:'topright'
 }).addTo(map);
 
-// Layer control:
-
-var baselayers = {
-    "OpenStreetMap": osm_map,
-    "Satellite": googleSat
-}
-
-L.control.layers(baselayers).addTo(map)
-
 /* Activate and deactivate interactions in the leaflet map*/
 
 function deactivateMap() {