Skip to content
Snippets Groups Projects
Commit 85c88065 authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Upload New File

parent 56220b7d
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 178 additions and 0 deletions
ChoroplethMap.html 0 → 100644
+ 178
− 0
View file @ 85c88065
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin:0; padding:0; }
h2, h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#map {
position:absolute;
top:0;
bottom:0;
width:100%;
}
#features {
top: 0;
height: 150px;
margin-top: 20px;
width: 250px;
}
#legend {
left : 1%;
padding: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 2Opx;
height: 180px;
margin-bottom: 50px;
width:200px;
background-color: #DDDDDD;
opacity: 0.9;
font-size: 15;
}
.legend-key {
display:inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id='map'></div>
<div class='map-overlay' id='features'><h2>Explore the cities</h2><div id='pd'><p> <b>Hover the municipalities of Brittany</b> </p></div></div>
<div class='map-overlay' id='legend'><b>Poulation density (2018)</b> <hR> </div>
<script>
//Configuration de la carte
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
center: [-2.802, 48.1],
zoom :7.7,
pitch : 15
});
map.on('style.load', function() {
// Configuration légende
map.getCanvas().style.cursor = 'default';
map.getCanvas().style.cursor = 'default';
var layers = ['-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#4d9221', '#a1d76a', '#e6f5d0', '#fde0ef', '#e9a3c9', '#c51b7d'];
for (i=0; i<layers.length; i++) {
var layer = layers[i] + " hab./km";
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
// Add data
map.addSource('Municipalities', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/mastersigat/data/main/communesBZH.geojson'
});
// Municipalities layer
map.addLayer({
'id': 'Municipalities',
'type': 'fill',
'source': 'Municipalities',
'layout': {'visibility': 'visible'},
'paint': {'fill-outline-color': '#000000',
'fill-color': {
property: 'density',
stops: [
[20, '#4d9221'],
[50, '#a1d76a'],
[100, '#e6f5d0'],
[200, '#fde0ef'],
[500, '#e9a3c9'],
[1000, '#c51b7d'],]},
'fill-opacity': 0.9}
});
// Add Departments
map.addSource('lignes', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/mastersigat/data/main/Departements.geojson'
});
map.addLayer({
'id': 'Lignes',
'type': 'line',
'source': 'lignes',
'paint': {'line-width': 2.5,
'line-color': '#111111'}
});
// Configuration fenêtre d'informations
map.on('mousemove', function (e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['Municipalities']
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = "<h3><strong>" + states[0].properties.NOM_COM_M + "</strong></h3><p><strong><em>" + states[0].properties.density + "</strong> hab./km2</em></p>"
+ "</strong></h3><p><strong><em>" + states[0].properties.POPULATION + "</strong> habitants </p>";
} else {
document.getElementById('pd').innerHTML = '<p>Données : INSEE 2013 / OSM</p>';
}
});
});
// Ajout controle de navigation et echelle
map.addControl(new mapboxgl.NavigationControl({position: 'top-right'}));
map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment