#MapboxGL / Extrusion carreaux

<!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' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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-overlay2 {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    position: absolute;
    right: 10%;
	  top: 2%;  
  width: 500px; 
}

.map-overlay2 .map-overlay-inner {
    font-size: 16px;
  	color: #000000;
}

.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: #FFFFFF;
    position: absolute;
    width: 30%;
    left: 1%;
	bottom : 2%;
	background-color: #FFFFFF;
}

.map-overlay .map-overlay-inner {
    background-color: #34335;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
	color: #000000;
}

.map-overlay .legend .bar {
    height: 10px;
    width: 100%;
    background: linear-gradient(to right, #1a9850, #ffffbf, #d73027);
}

</style>
	
	</head>
	
	
<body>

<div class="btn-group">
 <button id="2D" class="btn btn-primary">Carto classique</button>
 <button id="3D" class="btn btn-primary">Carto 3D</button>
 </div>

<div>
	<button id='Toulouse'>Toulouse</button>
	<button id='Montpellier'>Montpellier</button>
	<button id='Carca'>Carcassonne/Narbonne</button>
    <button id='Perpignan'>Perpignan</button>
</div>
    </div>

</div>

<div id='legend' class='legend'>
            <div class='bar'></div>
            <div> <b>Nombre d'individus par carreaux</b> (1-1495)<i> <br> INSEE 2012</i></div>
        </div>
    </div>

</div>

// Configuration carte

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

var map = new mapboxgl.Map({
  container: 'map',
    style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
    center: [3.80, 43.574], // starting position [lng, lat]
    zoom: 10,
pitch : 0	
});

map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());

// Ajout routes

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

map.on('load', function () {
 
 map.addSource('mapbox-streets-v7', {
   type: 'vector',
   url: 'mapbox://mapbox.mapbox-streets-v7'});
  
  map.addLayer({
        "id": "routes",
        "type": "line",
        "source": "mapbox-streets-v7",
		        "filter": ["all",  ["in", "class", "motorway", "trunk", "primary"]],

"layout": {'visibility': 'visible'},
        "source-layer": "road",
        "paint": {"line-color": " #0033cc", "line-width": 1.5}
    });

});

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

// Remplissage carreaux
 
 map.addLayer({
    'id': 'classique',
    'type': 'fill',
    'source': 'Carro',
	    'source-layer': 'karo-dq4lp6',

'layout': {
    'visibility': 'visible'
    },
	
    'paint': {
	 'fill-color': {
        'property': 'ind_c',
        'stops': [
          [1, '#1a9850'],
          [10, '#91cf60'],
          [20, '#d9ef8b'],
		  [50, '#ffffbf'],
     	  [100, '#fee08b'],
		  [150, '#fc8d59'],
          [200, '#d73027']
        ]
      }, 'fill-opacity': 0.6} });

// Extrusion 3D carreaux 	  
	    
  map.addLayer({
    'id': 'extrude',
    'type': 'fill-extrusion',
    'source': 'Carro',
    'source-layer': 'karo-dq4lp6',
    'layout': {
    'visibility': 'none'},
    'paint': {
      'fill-extrusion-color': {
        'property': 'ind_c',
        'stops': [
          [1, '#1a9850'],
          [50, '#91cf60'],
          [100, '#d9ef8b'],
		  [200, '#ffffbf'],
      	  [300, '#fee08b'],
		  [500, '#fc8d59'],
          [1000, '#d73027']]
      },
      'fill-extrusion-height': {
        'property': 'ind_c',
		     'stops': [[10, 0],
                       [50, 200],
		  			   [100, 400],
		               [200, 800],
		               [300, 1200],
		               [500, 1500],
		               [1000, 4000],
		               [1500, 12000],
		                 ]},
      'fill-extrusion-opacity': 0.95,
      'fill-extrusion-base': 0
    }
  });
  
 // Ajout couche communes

map.addSource('Communes', {
        'type': 'geojson', 
		'data': './epci.geojson'
    });
 
 
map.addLayer({
        'id': 'communesRM',
        'type': 'line',
        'source': 'Communes',
        'layout': {
        'visibility': 'visible', "line-cap": "round",
        "line-join": "round"},
		    "paint": {
        "line-color": "#999999",
        "line-width": 1
      }
         });

});
	
	
	
	
// Config affichage boutons

document.getElementById('3D').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
 pitch: 50,
 bearing: -30 });
  map.setLayoutProperty('extrude', 'visibility', 'visible');
});

document.getElementById('2D').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
 pitch: 0,
 bearing: 0
});
  map.setLayoutProperty('classique', 'visibility', 'visible');
    map.setLayoutProperty('extrude', 'visibility', 'none');

});

map.addControl(new mapboxgl.ScaleControl({
    maxWidth: 120,
    unit: 'metric'}));

// Configuration onglets géographiques

document.getElementById('Toulouse').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
                    center: [1.42, 43.6043],
	   });
});
// Configuration onglets géographiques

document.getElementById('Montpellier').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
                    center: [3.80, 43.574],
	  });
});
// Configuration onglets géographiques

document.getElementById('Carca').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
                    center: [2.630, 43.174],
	      });
});
// Configuration onglets géographiques

document.getElementById('Perpignan').addEventListener('click', function () 
{ map.flyTo({zoom: 10,
                    center: [2.804, 42.607],
	     });
});

</script>

</body>

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

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