Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active May 16, 2019 09:11
Show Gist options
  • Save mastersigat/02576120fff70307c85ebb7eeef3d05e to your computer and use it in GitHub Desktop.
Save mastersigat/02576120fff70307c85ebb7eeef3d05e to your computer and use it in GitHub Desktop.
Download ZIP
#MapboxGL / Carte choroplèthe interactive
Raw
.block
license: mit
Raw
README.md

Carte choroplèthe interactive

Raw
index.html
<!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://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.0/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 {
padding: 7px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 2Opx;
height: 200px;
margin-bottom: 50px;
width: 200px;
background-color: #f0f0f5;
}
.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>Explorer les communes</h2><div id='pd'><p> <b>Survolez les communnes</b> </p></div></div>
<div class='map-overlay' id='legend'><b>Densité de population</b> <BR> </div>
<script>
// define access token
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
//Configuration de la carte
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // map style URL from Mapbox Studio
center: [2.6, 43.07],
zoom :9,
pitch: 40,
bearing: -20
});
// Configuration légende
map.on('load', function() {
map.getCanvas().style.cursor = 'default';
map.getCanvas().style.cursor = 'default';
var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
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);
}
// Ajout de la source
map.addSource('Communes', {
type: 'vector',
url: 'mapbox://ninanoun.b2hh3yr6'
});
// Configuration couche communes
map.addLayer({
'id': 'Communes',
'type': 'fill',
'source': 'Communes',
'source-layer': 'communes_aude-23xs3h',
'layout': {'visibility': 'visible'},
'paint': {'fill-outline-color': '#000000',
'fill-color': {
property: 'densite',
stops: [
[20, '#FFEDA0'],
[30, '#FED976'],
[50, '#FEB24C'],
[100, '#FD8D3C'],
[200, '#FC4E2A'],
[300, '#E31A1C'],
[500, '#BD0026'],
[1000, '#800026'],]},
'fill-opacity': 0.8}
});
// Configuration fenêtre d'informations
map.on('mousemove', function (e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['Communes']
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = "<h3><strong>" + states[0].properties.nom_com + "</strong></h3><p><strong><em>" + states[0].properties.densite + "</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>';
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment