Add new layer control for project 2 aufgabe 3
This commit is contained in:
parent
dc53a38df7
commit
8562f9939f
@ -2,8 +2,8 @@ const aufgabe3 = async () => {
|
||||
|
||||
const wantedYears = [2015, 2016, 2017]
|
||||
const wantedSeries = [
|
||||
{code: "SH_H2O_SAFE", displayName: "drinking water services"},
|
||||
{code: "SH_SAN_SAFE", displayName: "sanitation services"}
|
||||
{code: "SH_H2O_SAFE", displayName: "drinking water"},
|
||||
{code: "SH_SAN_SAFE", displayName: "sanitation"}
|
||||
]
|
||||
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)
|
||||
const values = [].concat(...dataArrays)
|
||||
return values.filter(elem => elem.dimensions.Location === "ALLAREA")
|
||||
|
||||
}
|
||||
const apiData = await Promise.all(wantedSeries.map(loadSeries))
|
||||
return [].concat(...apiData)
|
||||
|
||||
}
|
||||
|
||||
const getColor = percentage => {
|
||||
@ -55,12 +53,12 @@ const aufgabe3 = async () => {
|
||||
}
|
||||
|
||||
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', {
|
||||
attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
|
||||
minZoom: 0,
|
||||
maxZoom: 18
|
||||
}))
|
||||
|
||||
const [geojsonData, apiData] = await Promise.all([
|
||||
$.getJSON('europe.geo.json'),
|
||||
loadData()
|
||||
@ -116,8 +114,8 @@ const aufgabe3 = async () => {
|
||||
|
||||
info.addTo(map)
|
||||
|
||||
// Create datalayer instances for series and year
|
||||
let layers = {}
|
||||
|
||||
for (let currSeries of wantedSeries) {
|
||||
for (let currYear of wantedYears) {
|
||||
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()
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="html">
|
||||
<head>
|
||||
<title>Leaflet GeoJSON - Population Europe</title>
|
||||
<title>Geo Visualisierung - Projekt 2</title>
|
||||
<meta charset="utf-8"/>
|
||||
<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"/>
|
||||
@ -13,12 +13,12 @@
|
||||
<body class="bg-dark">
|
||||
|
||||
<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
|
||||
</h5>
|
||||
</nav>
|
||||
|
||||
<div class="mx-5 my-2">
|
||||
<div class="mx-4 my-2">
|
||||
<div class="row my-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
@ -44,14 +44,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mt-5 text-center" style="background-color: #f5f5f5; height: 2rem">
|
||||
<div class="container">
|
||||
<footer class="mt-3 d-flex align-items-center justify-content-center" style="background-color: #f5f5f5; height: 2rem">
|
||||
<span class="text-muted">©2020 - Tim Herbst & Marcel Schwarz </span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<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-control-geocoder/dist/Control.Geocoder.js"></script>
|
||||
<script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user