#MapboxGL / Symbologie deux variables (graduation et extrusion 3D)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />

// Configuration carte

mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';

var map = new mapboxgl.Map({
  container: 'map',
    style: 'mapbox://styles/ninanoun/cj975wxdj108c2rnxsem0rbfd', // stylesheet location
    center: [-2.95523, 47.7], // starting position [lng, lat]
    zoom: 7.5,
    pitch : 30	
});

// Config data

map.on('style.load', function() {

// Ajout communes  // choroplèthe
 
map.addSource('communes', {
        type: 'vector',
        url: 'mapbox://ninanoun.86qngnnd'});
  
  
  // Ajout communes // Mise en forme extrusion 3D
  
  map.addLayer({
    'id': 'extrudecommunes',
    'type': 'fill-extrusion',
    'source': 'communes',
    'source-layer': 'TD1_Data-3kid81',
    'layout': {'visibility': 'visible'},
    'paint': {
      'fill-extrusion-color': {
        'property': 'densite',
        'stops': [
          [20, '#1a9850'],
          [50, '#91cf60'],
          [100, '#d9ef8b'],
		      [200, '#ffffbf'],
     	    [500, '#fee08b'],
          [1000, '#d73027']]},
      'fill-extrusion-height': {
        'property': 'popOK',
		    'stops': [
          [100, 10],
          [100, 100],
		      [200000, 100000]] },
      'fill-extrusion-opacity': 0.95,
      'fill-extrusion-base': 0
    }
  });
 
});

</script>

</body>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js