#MapboxGL / Extrusion 3D données

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

#map {width: 100%; 
height:800px; 
margin-right: auto; 
margin-left: auto; 
border-width:2px; 
border-style:solid;
border-color:black;
position: absolute;
}
    </style>
	
	</head>
	
	
<body>

// Configuration carte

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

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

// Config data

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

// Ajout careaux 
   
map.addSource('Carro', {
        'type': 'vector', 
   url: 'mapbox://ninanoun.2n5gi217'});

// Extrusion 3D carreaux 	  
	    
  map.addLayer({
    'id': 'extrude',
    'type': 'fill-extrusion',
    'source': 'Carro',
    'source-layer': 'karook-dcnhdj',
    'layout': {
    'visibility': 'visible'},
    'paint': {
      'fill-extrusion-color': {
        'property': 'Individus',
        'stops': [
          [1, '#1a9850'],
          [10, '#91cf60'],
          [20, '#d9ef8b'],
		      [50, '#ffffbf'],
      	  [100, '#fee08b'],
		      [150, '#fc8d59'],
          [200, '#d73027']]
      },
      'fill-extrusion-height': {
        'property': 'Individus',
		     'stops': [[1, 0],
                   [10, 100],
		  						 [20, 200],
		               [50, 500],
		               [100, 1000],
		               [200, 2000],
		               [300, 3000],
		               [400, 4000],
		               [500, 5000],
		               [600, 6000],
		               [700, 7000]]},
      '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