geovisualisierung/projects/project-2/index.html

170 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="html">
<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>
</head>
<body>
<div id="map"></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 getColor = population => {
switch (true) {
case population > 100_000_000:
return {color: '#800026', name: '100 Mio'}
case population > 80_000_000:
return {color: '#BD0026', name: '80 Mio'}
case population > 50_000_000:
return {color: '#E31A1C', name: '50 Mio'}
case population > 30_000_000:
return {color: '#FC4E2A', name: '30 Mio'}
case population > 20_000_000:
return {color: '#FD8D3C', name: '20 Mio'}
case population > 10_000_000:
return {color: '#FEB24C', name: '10 Mio'}
case population > 5_000_000:
return {color: '#FED976', name: '5 Mio'}
case population > 1_000_000:
return {color: '#ffdb83', name: '1 Mio'}
default:
return {color: '#ffdea1', name: ''}
}
}
let map = L.map('map').setView([53.0, 14.0], 4)
let geojson;
// Add the legend to the map
const legend = L.control({position: 'bottomright'})
legend.onAdd = () => {
const legend = L.DomUtil.create('div', 'info legend')
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
]
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 ? '&ndash;' + 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>
</body>
</html>