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

Resolve "Lage sidebar for kartlagene"

See merge request !20

css/style.css

@@ -87,3 +87,19 @@
 #fileInput {
     display: none;
 }
+
+.sidebarButton {
+    font-family: monospace;
+    background-color: orangered;
+    color: white;
+    width: 20vw;
+    text-align: center;
+    border-color: white;
+    border-style: dotted;
+    border-width: 5px;
+    border-radius: 10px;
+    margin-top: 1vh;
+    margin-left: 2vw;
+    margin-right: 2vw;
+    cursor: pointer;
+}
\ No newline at end of file

index.html

@@ -58,9 +58,7 @@
                 </div>
             </div>
 
-            <div style="margin-left: 10px; font-size: 18px; height: 50vh;">
-                <p id="layers"></p>
-            </div>
+            <div id="layers" style="font-family: monospace; margin-left: 10px; margin-top: 25px; font-size: 18px; height: 50vh;"></div>
         </div>
         
         <div id="map" style="position: relative; z-index: 1; height: 80vh;">
@@ -155,10 +153,9 @@
         <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",
+    "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]
+                ]]
+            }
+        }
+    ]
+}
\ No newline at end of file

javascript/exampleData/Universities.geojson

+{
+    "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]
+                ]]
+            }
+        }
+    ]
+}
\ 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 geoLayer = L.geoJSON().addTo(map);
-
-geoLayer.addData(rectangle);
+// Test-data jeg tester funksjonalitet på:
+// Det fungerer ikke å lese fra fil ved å kun kjøre html-filen lokalt
+
+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);
+*/
+
+var test1 = L.geoJSON();
+var test2 = L.geoJSON();
+
+test1.addData(U);
+test2.addData(TC);
+
+// Det jeg skal ha med i ferdig versjon:
+
+var Arealdekke = L.geoJSON();
+var Bygg_f = L.geoJSON();
+var Bygg_l = L.geoJSON();
+var Samferdsel = L.geoJSON();
+
+fetch("javascript/exampleData/Arealdekke_klippa.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    Arealdekke.addData(data);
+})
+
+fetch("javascript/exampleData/Bygg&Anlegg_f_klippa.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    Bygg_f.addData(data);
+})
+
+fetch("javascript/exampleData/Bygg&Anlegg_l_klippa.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    Bygg_l.addData(data);
+})
+
+fetch("javascript/exampleData/Samferdsel_klippa.geojson").then(function(response) {
+    return response.json();
+}).then(function(data) {
+    Samferdsel.addData(data);
+})

javascript/leafletLayerControl.js

+// Layer control:
+
+var baselayers = {
+    "OpenStreetMap": osm_map,
+    "Satellite": googleSat
+}
+
+var overlayMaps = {
+    "Arealdekke": Arealdekke,
+    "Bygg_f": Bygg_f,
+    "Bygg_l": Bygg_l,
+    "Samferdsel": Samferdsel,
+    "test1": test1,
+    "test2": test2
+}
+
+var controller = L.control.layers(baselayers).addTo(map);
+
+// Til sidebaren:
+
+for (key in overlayMaps) {
+    var layerButton = document.createElement("div");
+    layerButton.innerHTML = "<button id='" + key + "' class='sidebarButton' onclick=handleLayer(" + key + ") />" + key;
+    
+    container = document.getElementById("layers");
+    container.appendChild(layerButton);
+    container.appendChild(document.createElement("br"));
+}
+
+function handleLayer(layer) {
+    if(map.hasLayer(layer)) {
+        map.removeLayer(layer);
+        document.getElementById(layer).style.backgroundColor = "black"; // Dette må endres opp i!
+      } else {
+        map.addLayer(layer);
+        document.getElementById(layer.innerHTML).style.backgroundColor = "green";
+      }
+}

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() {
@@ -46,11 +38,3 @@ function activateMap() {
         handler.enable();
     });
 }
-
-map.on('click', function() {
-    if(map.hasLayer(geoLayer)) {
-      map.removeLayer(geoLayer);
-    } else {
-      map.addLayer(geoLayer);
-    }
-  });