Finish project 2 aufgabe 1
This commit is contained in:
parent
ca151488ac
commit
96ce6011f5
113
projects/project-2/aufgabe1.js
Normal file
113
projects/project-2/aufgabe1.js
Normal file
@ -0,0 +1,113 @@
|
||||
const aufgabe1 = () => {
|
||||
const map = L.map('map').setView([53.0, 14.0], 4)
|
||||
const levels = [
|
||||
1_000_000, 5_000_000, 10_000_000, 20_000_000,
|
||||
30_000_000, 50_000_000, 80_000_000, 100_000_000
|
||||
]
|
||||
let geojson;
|
||||
|
||||
const getColor = population => {
|
||||
switch (true) {
|
||||
case population > levels[7]:
|
||||
return {color: '#800026', name: '100 Mio'}
|
||||
case population > levels[6]:
|
||||
return {color: '#BD0026', name: '80 Mio'}
|
||||
case population > levels[5]:
|
||||
return {color: '#E31A1C', name: '50 Mio'}
|
||||
case population > levels[4]:
|
||||
return {color: '#FC4E2A', name: '30 Mio'}
|
||||
case population > levels[3]:
|
||||
return {color: '#FD8D3C', name: '20 Mio'}
|
||||
case population > levels[2]:
|
||||
return {color: '#FEB24C', name: '10 Mio'}
|
||||
case population > levels[1]:
|
||||
return {color: '#FED976', name: '5 Mio'}
|
||||
case population > levels[0]:
|
||||
return {color: '#ffdb83', name: '1 Mio'}
|
||||
default:
|
||||
return {color: '#ffdea1', name: ''}
|
||||
}
|
||||
}
|
||||
|
||||
// Add the legend to the map
|
||||
const legend = L.control({position: 'bottomright'})
|
||||
|
||||
legend.onAdd = () => {
|
||||
const legend = L.DomUtil.create('div', 'info legend')
|
||||
const labels = []
|
||||
|
||||
for (let i = 0; i < levels.length; i++) {
|
||||
let from = getColor(levels[i] + 1).name
|
||||
let to = getColor(levels[i + 1] + 1).name
|
||||
labels.push('<i style="background:' + getColor(levels[i] + 1).color + '"></i> ' + from + (to ? '–' + to : '+'))
|
||||
}
|
||||
|
||||
legend.innerHTML = labels.join('<br>')
|
||||
return legend
|
||||
}
|
||||
|
||||
legend.addTo(map)
|
||||
|
||||
// Control that shows state info on hover
|
||||
const info = L.control()
|
||||
|
||||
info.onAdd = () => {
|
||||
info._div = L.DomUtil.create('div', 'info')
|
||||
info.update()
|
||||
return info._div
|
||||
}
|
||||
|
||||
info.update = props => {
|
||||
info._div.innerHTML = '<h4>European Population</h4>'
|
||||
if (props) {
|
||||
let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
|
||||
info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
|
||||
} else {
|
||||
info._div.innerHTML += 'Hover over a country'
|
||||
}
|
||||
}
|
||||
|
||||
info.addTo(map);
|
||||
|
||||
// Hover over feature
|
||||
const onEachFeature = (feature, layer) => {
|
||||
layer.on({
|
||||
mouseover: event => {
|
||||
event.target.setStyle({
|
||||
weight: 5,
|
||||
color: '#666',
|
||||
dashArray: '',
|
||||
fillOpacity: 0.7
|
||||
})
|
||||
|
||||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||||
event.target.bringToFront()
|
||||
}
|
||||
info.update(event.target.feature.properties)
|
||||
},
|
||||
mouseout: event => {
|
||||
geojson.resetStyle(event.target)
|
||||
info.update()
|
||||
},
|
||||
click: event => map.fitBounds(event.target.getBounds())
|
||||
})
|
||||
}
|
||||
|
||||
// Default style for each feature
|
||||
const getStyle = feature => ({
|
||||
stroke: true,
|
||||
fill: true,
|
||||
fillColor: getColor(feature.properties.pop_est).color,
|
||||
fillOpacity: 1,
|
||||
dashArray: '3',
|
||||
weight: 2,
|
||||
color: 'black'
|
||||
})
|
||||
|
||||
// Load data in
|
||||
$.getJSON('europe.geo.json', data => {
|
||||
geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
|
||||
})
|
||||
}
|
||||
|
||||
aufgabe1()
|
||||
@ -3,167 +3,39 @@
|
||||
<head>
|
||||
<title>Leaflet GeoJSON - Population Europe</title>
|
||||
<meta charset="utf-8"/>
|
||||
<link crossorigin="" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
rel="stylesheet"/>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 95vw;
|
||||
height: 95vh;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
background-color: #c5e8ff;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 6px 8px;
|
||||
font: 14px/16px Arial, Helvetica, sans-serif;
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info h4 {
|
||||
margin: 0 0 5px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.legend {
|
||||
line-height: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.legend i {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
<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 crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
|
||||
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<div class="mx-5 my-2">
|
||||
<div class="row">
|
||||
<h1 class="col text-center">Aufgabe 1</h1>
|
||||
</div>
|
||||
<div class="row mb-5">
|
||||
<div class="col">
|
||||
<div id="map" style="height: 40rem" class="w-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h1 class="col text-center">Aufgabe 2</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="poiMap" style="height: 50rem" class="w-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script crossorigin=""
|
||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script>
|
||||
const map = L.map('map').setView([53.0, 14.0], 4)
|
||||
const levels = [
|
||||
1_000_000, 5_000_000, 10_000_000, 20_000_000,
|
||||
30_000_000, 50_000_000, 80_000_000, 100_000_000
|
||||
]
|
||||
let geojson;
|
||||
|
||||
const getColor = population => {
|
||||
switch (true) {
|
||||
case population > levels[7]:
|
||||
return {color: '#800026', name: '100 Mio'}
|
||||
case population > levels[6]:
|
||||
return {color: '#BD0026', name: '80 Mio'}
|
||||
case population > levels[5]:
|
||||
return {color: '#E31A1C', name: '50 Mio'}
|
||||
case population > levels[4]:
|
||||
return {color: '#FC4E2A', name: '30 Mio'}
|
||||
case population > levels[3]:
|
||||
return {color: '#FD8D3C', name: '20 Mio'}
|
||||
case population > levels[2]:
|
||||
return {color: '#FEB24C', name: '10 Mio'}
|
||||
case population > levels[1]:
|
||||
return {color: '#FED976', name: '5 Mio'}
|
||||
case population > levels[0]:
|
||||
return {color: '#ffdb83', name: '1 Mio'}
|
||||
default:
|
||||
return {color: '#ffdea1', name: ''}
|
||||
}
|
||||
}
|
||||
|
||||
// Add the legend to the map
|
||||
const legend = L.control({position: 'bottomright'})
|
||||
|
||||
legend.onAdd = () => {
|
||||
const legend = L.DomUtil.create('div', 'info legend')
|
||||
const labels = []
|
||||
|
||||
for (let i = 0; i < levels.length; i++) {
|
||||
let from = getColor(levels[i] + 1).name
|
||||
let to = getColor(levels[i + 1] + 1).name
|
||||
console.log(from, to)
|
||||
labels.push('<i style="background:' + getColor(levels[i] + 1).color + '"></i> ' + from + (to ? '–' + to : '+'))
|
||||
}
|
||||
|
||||
legend.innerHTML = labels.join('<br>')
|
||||
return legend
|
||||
}
|
||||
|
||||
legend.addTo(map)
|
||||
|
||||
// Control that shows state info on hover
|
||||
const info = L.control()
|
||||
|
||||
info.onAdd = () => {
|
||||
info._div = L.DomUtil.create('div', 'info')
|
||||
info.update()
|
||||
return info._div
|
||||
}
|
||||
|
||||
info.update = props => {
|
||||
info._div.innerHTML = '<h4>European Population</h4>'
|
||||
if (props) {
|
||||
let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
|
||||
info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
|
||||
} else {
|
||||
info._div.innerHTML += 'Hover over a country'
|
||||
}
|
||||
}
|
||||
|
||||
info.addTo(map);
|
||||
|
||||
// Hover over feature
|
||||
const onEachFeature = (feature, layer) => {
|
||||
layer.on({
|
||||
mouseover: event => {
|
||||
event.target.setStyle({
|
||||
weight: 5,
|
||||
color: '#666',
|
||||
dashArray: '',
|
||||
fillOpacity: 0.7
|
||||
})
|
||||
|
||||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||||
event.target.bringToFront()
|
||||
}
|
||||
info.update(event.target.feature.properties)
|
||||
},
|
||||
mouseout: event => {
|
||||
geojson.resetStyle(event.target)
|
||||
info.update()
|
||||
},
|
||||
click: event => map.fitBounds(event.target.getBounds())
|
||||
})
|
||||
}
|
||||
|
||||
// Default style for each feature
|
||||
const getStyle = feature => ({
|
||||
stroke: true,
|
||||
fill: true,
|
||||
fillColor: getColor(feature.properties.pop_est).color,
|
||||
fillOpacity: 1,
|
||||
dashArray: '3',
|
||||
weight: 2,
|
||||
color: 'black'
|
||||
})
|
||||
|
||||
// Load data in
|
||||
$.getJSON('europe.geo.json', data => {
|
||||
geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
|
||||
})
|
||||
</script>
|
||||
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
||||
<script src="aufgabe1.js"></script>
|
||||
<script src="aufgabe2.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
30
projects/project-2/style.css
Normal file
30
projects/project-2/style.css
Normal file
@ -0,0 +1,30 @@
|
||||
.leaflet-container {
|
||||
background-color: #c5e8ff;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 6px 8px;
|
||||
font: 14px/16px Arial, Helvetica, sans-serif;
|
||||
background: white;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info h4 {
|
||||
margin: 0 0 5px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.legend {
|
||||
line-height: 18px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.legend i {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user