Old school D3 from simpler times

All examples By author By category About

mastersigat

Full window Github gist

#MapboxGL / Carte choroplèthe interactive

Carte choroplèthe interactive

<!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>

https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js