#MapboxGL / Carte choroplèthe

<!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; }
       
        #map {
            position:absolute;
            top:0;
            bottom:0;
            width:100%;
        }
           </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>

// define access token
mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA';

//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() {
   
	// 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}
});

});

</script>

</body>
</html>

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