hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add new layer control for project 2 aufgabe 3

Browse Source
This commit is contained in:
Marcel Schwarz 2020-11-28 01:21:11 +01:00
parent dc53a38df7
commit 8562f9939f
2 changed files with 46 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
projects/project-2/aufgabe3.js
View File

@ -2,8 +2,8 @@ const aufgabe3 = async () => {
const wantedYears = [2015, 2016, 2017] const wantedYears = [2015, 2016, 2017]
const wantedSeries = [ const wantedSeries = [
{code: "SH_H2O_SAFE", displayName: "drinking water services"}, {code: "SH_H2O_SAFE", displayName: "drinking water"},
{code: "SH_SAN_SAFE", displayName: "sanitation services"} {code: "SH_SAN_SAFE", displayName: "sanitation"}
] ]
const levels = [0, 50.0, 80.0, 85.0, 90.0, 95.0, 99.0, 99.9] const levels = [0, 50.0, 80.0, 85.0, 90.0, 95.0, 99.0, 99.9]
@ -26,11 +26,9 @@ const aufgabe3 = async () => {
let dataArrays = (await Promise.all(requests)).map(arr => arr.data.data) let dataArrays = (await Promise.all(requests)).map(arr => arr.data.data)
const values = [].concat(...dataArrays) const values = [].concat(...dataArrays)
return values.filter(elem => elem.dimensions.Location === "ALLAREA") return values.filter(elem => elem.dimensions.Location === "ALLAREA")
} }
const apiData = await Promise.all(wantedSeries.map(loadSeries)) const apiData = await Promise.all(wantedSeries.map(loadSeries))
return [].concat(...apiData) return [].concat(...apiData)
} }
const getColor = percentage => { const getColor = percentage => {
@ -55,12 +53,12 @@ const aufgabe3 = async () => {
} }
const map = L.map('suiMap', {zoomControl: false}).setView([53.0, 14.0], 4) const map = L.map('suiMap', {zoomControl: false}).setView([53.0, 14.0], 4)
L.control.zoom({position: 'bottomleft'}).addTo(map)
map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors', attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
minZoom: 0, minZoom: 0,
maxZoom: 18 maxZoom: 18
})) }))
const [geojsonData, apiData] = await Promise.all([ const [geojsonData, apiData] = await Promise.all([
$.getJSON('europe.geo.json'), $.getJSON('europe.geo.json'),
loadData() loadData()
@ -116,8 +114,8 @@ const aufgabe3 = async () => {
info.addTo(map) info.addTo(map)
// Create datalayer instances for series and year
let layers = {} let layers = {}
for (let currSeries of wantedSeries) { for (let currSeries of wantedSeries) {
for (let currYear of wantedYears) { for (let currYear of wantedYears) {
let fullSeriesName = `${currSeries.code}_${currYear}` let fullSeriesName = `${currSeries.code}_${currYear}`
@ -155,13 +153,44 @@ const aufgabe3 = async () => {
}) })
} }
}) })
layers[`${currSeries.displayName} ${currYear}`] = geoJsonLayer layers[`${currSeries.code}_${currYear}`] = geoJsonLayer
} }
} }
map.addLayer(Object.values(layers)[0]) // Create button layer selector
const layerSelector = L.control({position: "topright"})
layerSelector._div = L.DomUtil.create("div", "info text-center")
layerSelector._div.id = "layerSelector"
layerSelector.onAdd = () => {
const createButtonGroup = (values, groupName) => {
let outer = `<div class="btn-group btn-group-sm btn-group-toggle my-1 w-100" data-toggle="buttons">`
for (let elem of values) {
outer += `
<label class="btn btn-primary">
<input type="radio" name="${groupName}" value="${elem.value}">${elem.name}
</label>`
}
outer += `</div>`
return outer
}
let seriesDiv = createButtonGroup(wantedSeries.map(ele => ({value: ele.code, name: ele.displayName})), "series")
let yearDiv = createButtonGroup(wantedYears.map(ele => ({value: ele, name: ele})), "year")
L.control.layers(layers, null).addTo(map) layerSelector._div.innerHTML = [seriesDiv, yearDiv].join("<br>")
return layerSelector._div
}
layerSelector.addTo(map)
// Create layerGroup for data layer (to keep the base osm layer when changing the data layer)
const dataLayerGroup = L.layerGroup().addTo(map)
$("#layerSelector input:radio").change(() => {
let selectedSeries = $("#layerSelector input:radio[name='series']:checked")[0]?.value
let selectedYear = $("#layerSelector input:radio[name='year']:checked")[0]?.value
if (selectedSeries && selectedYear) {
dataLayerGroup.clearLayers()
dataLayerGroup.addLayer(layers[selectedSeries + "_" + selectedYear])
}
})
} }
aufgabe3() aufgabe3()

13
projects/project-2/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="html"> <html lang="html">
<head> <head>
<title>Leaflet GeoJSON - Population Europe</title> <title>Geo Visualisierung - Projekt 2</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
@ -13,12 +13,12 @@
<body class="bg-dark"> <body class="bg-dark">
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light">
<h5 class="navbar-text text-dark"> <h5 class="navbar-text text-dark py-1 m-0">
Geo Visualisierung - Projekt 2 - Tim Herbst & Marcel Schwarz Geo Visualisierung - Projekt 2 - Tim Herbst & Marcel Schwarz
</h5> </h5>
</nav> </nav>
<div class="mx-5 my-2"> <div class="mx-4 my-2">
<div class="row my-3"> <div class="row my-3">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
@ -44,14 +44,15 @@
</div> </div>
</div> </div>
</div> </div>
<footer class="mt-5 text-center" style="background-color: #f5f5f5; height: 2rem"> <footer class="mt-3 d-flex align-items-center justify-content-center" style="background-color: #f5f5f5; height: 2rem">
<div class="container">
<span class="text-muted">&copy;2020 - Tim Herbst & Marcel Schwarz </span> <span class="text-muted">&copy;2020 - Tim Herbst & Marcel Schwarz </span>
</div>
</footer> </footer>
<script defer src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script defer src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script defer src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script> <script defer src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script defer src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script> <script defer src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script> <script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script>