diff --git a/css/style.css b/css/style.css index 40595559d25ddc01927c7c182e10c14ca7c7ba9d..3f5bd77944aa64251c4f1906dc937651f3d97ee8 100644 --- a/css/style.css +++ b/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 diff --git a/index.html b/index.html index e63fb850eab32d07141fbbb5ccf691f659b0acc8..42975d5ff07c4a2e57b9a06e074d46cbbfbf4593 100644 --- a/index.html +++ b/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> diff --git a/javascript/geoJSON.js b/javascript/geoJSON.js index 79bc6679ee63fe19e7459cc96dbe53ba682a3156..688392304d8e368f57e75b1fec402d08da0faa01 100644 --- a/javascript/geoJSON.js +++ b/javascript/geoJSON.js @@ -1,4 +1,6 @@ -/* +// 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); - } - }); -*/ diff --git a/javascript/leafletLayerControl.js b/javascript/leafletLayerControl.js index 5358039d931a4bc13c9d2470bf476ec22a435159..30913cc92d7238aa9ed2be0bdc2acf6179bf9a95 100644 --- a/javascript/leafletLayerControl.js +++ b/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