From 8562f9939fbaf1ff2f93c73b8336b1ee9157640f Mon Sep 17 00:00:00 2001 From: Marcel Schwarz Date: Sat, 28 Nov 2020 01:21:11 +0100 Subject: [PATCH] Add new layer control for project 2 aufgabe 3 --- projects/project-2/aufgabe3.js | 47 +++++++++++++++++++++++++++------- projects/project-2/index.html | 15 ++++++----- 2 files changed, 46 insertions(+), 16 deletions(-) diff --git a/projects/project-2/aufgabe3.js b/projects/project-2/aufgabe3.js index d7952f5..c1748d7 100644 --- a/projects/project-2/aufgabe3.js +++ b/projects/project-2/aufgabe3.js @@ -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 OpenStreetMap 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 = `
` + for (let elem of values) { + outer += ` + ` + } + outer += `
` + 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("
") + 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() diff --git a/projects/project-2/index.html b/projects/project-2/index.html index 0f9c8fc..00bd494 100644 --- a/projects/project-2/index.html +++ b/projects/project-2/index.html @@ -1,7 +1,7 @@ - Leaflet GeoJSON - Population Europe + Geo Visualisierung - Projekt 2 @@ -13,12 +13,12 @@ -
+
@@ -44,14 +44,15 @@
-