Putte i sidebar og av og på

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,7 +58,7 @@
                 </div>
             </div>
 
-            <div id="layers" style="font-family: monospace; margin-left: 10px; margin-top: 10px; font-size: 18px; height: 50vh;"></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;">
@@ -154,12 +154,9 @@
         <script src="javascript/openFileExplorer.js"></script>
         <script src="javascript/fileHandler.js"></script>
         <script src="javascript/geoJSON.js"></script>
-        
         <script src="javascript/leafletLayerControl.js"></script>
 
         <!-- Imported js -->
-        <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
-
         <!-- <script src="https://unpkg.com/shpjs@latest/dist/shp.js"></script> -->
 
     </body>

javascript/geoJSON.js

-/*
+// 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"},
@@ -67,61 +69,44 @@ var TC = {
   ]
 };
 
+/*
 var layer1 = L.geoJSON(U);
 var layer2 = L.geoJSON(TC);
 */
 
-var layer_Arealdekke = L.geoJSON().addTo(map);
-var layer_Bygg_f = L.geoJSON().addTo(map);
-var layer_Bygg_l = L.geoJSON().addTo(map);
-var layer_Samferdsel = L.geoJSON().addTo(map);
+var test1 = L.geoJSON();
+var test2 = L.geoJSON();
 
-/*
-fetch("javascript/exampleData/Universities.geojson").then(function(response) {
-    return response.json();
-}).then(function(data) {
-    layer.addData(data);
-})
+test1.addData(U);
+test2.addData(TC);
 
-fetch("javascript/exampleData/TrainingCenters.geojson").then(function(response) {
-    return response.json();
-}).then(function(data) {
-    layer.addData(data);
-})
-*/
+// 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) {
-    layer_Arealdekke.addData(data);
+    Arealdekke.addData(data);
 })
 
 fetch("javascript/exampleData/Bygg&Anlegg_f_klippa.geojson").then(function(response) {
     return response.json();
 }).then(function(data) {
-    layer_Bygg_f.addData(data);
+    Bygg_f.addData(data);
 })
 
 fetch("javascript/exampleData/Bygg&Anlegg_l_klippa.geojson").then(function(response) {
     return response.json();
 }).then(function(data) {
-    layer_Bygg_l.addData(data);
+    Bygg_l.addData(data);
 })
 
 fetch("javascript/exampleData/Samferdsel_klippa.geojson").then(function(response) {
     return response.json();
 }).then(function(data) {
-    layer_Samferdsel.addData(data);
+    Samferdsel.addData(data);
 })
-
-// Hvordan slå av og på et lag:
-
-/*
-map.on('click', function() {
-    if(map.hasLayer(layer1)) {
-      map.removeLayer(layer1);
-    } else {
-      map.addLayer(layer1);
-    }
-  });
-*/

javascript/leafletLayerControl.js

@@ -6,50 +6,33 @@ var baselayers = {
 }
 
 var overlayMaps = {
-    "Arealdekke": layer_Arealdekke,
-    "Byggning (f)": layer_Bygg_f,
-    "Byggning (l)": layer_Bygg_l,
-    "Samferdsel": layer_Samferdsel
+    "Arealdekke": Arealdekke,
+    "Bygg_f": Bygg_f,
+    "Bygg_l": Bygg_l,
+    "Samferdsel": Samferdsel,
+    "test1": test1,
+    "test2": test2
 }
 
-var controller = L.control.layers(baselayers, overlayMaps).addTo(map);
+var controller = L.control.layers(baselayers).addTo(map);
 
-// Test:
+// Til sidebaren:
 
-/*
-for (const i = 0; i < length(overlayMaps); i++) {
-    var checkbox = document.createElement("div");
-    checkbox.innerHTML += "<input type='checkbox' onchange='handleLayer(layer)' />";
+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(checkbox);
-
-    var t = overlayMaps[i]["properties"];
-
-    var label = document.createElement('label');
-    label.htmlFor = t;
-    label.appendChild(document.createTextNode(t));
-
-    container.appendChild(label);
+    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";
       }
 }
-*/
-
-/*var htmlObject = controller.getContainer();
-
-var a = document.getElementById("layers");
-
-function setParent(el, newParent) {
-    newParent.appendChild(el);
-}
-
-setParent(htmlObject, a);*/
\ No newline at end of file