symobologie mapbox

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Extrusion MapboxGL</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' />

#cadre  
{width: 100%; height:800px; 
margin-right: auto; 
margin-left: auto; 
background-color:#252830;
}

#encart {width: 20%; 
height:100%; 
float: left;}

#map {width: 80%; 
          height:100%;}

#menu {
    position: absolute;
    z-index: 1;
	opacity: 0.7;
    bottom: 200px;
    right: 30px;
    font-family: 'Open Sans', sans-serif;

}
#menu a {
    font-size: 12px;
	color: #000000;
	    background-color: #FFFFFF;

border-radius: 10px;
    border-color: #00000;
    font-weight: 400;
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 2px solid #000000;
    text-align: left;
}

#menu a:hover {
    background-color: #000000;
    color: #FFFFFF;
}
#menu a.active {
    background-color: #000000;
    color: #FFFFFF;
}

#titre1 {
color: #FFFFFF;
font-size: 26px;
font-weight: bold;
position: absolute;
left: 30px;
top : 30px;
 font-family: Verdana, sans-serif}
  
#titre2 {
color: #FFFFFF;
font-size: 26px;
font-weight: bold;
position: absolute;
left: 340px;
top : 30px;
 font-family:Verdana, sans-serif}

.map-overlay {
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: #FFFFFF;
    position: relative;
    width: 20%;
    right: 10px;
    padding: 10px;
}

.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;
}

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

</style>
	
	</head>
	
	
<body>

<div id="bandeau"> 
<div id="titre1">Mettre du</div> 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/WebGL_Logo.svg/1200px-WebGL_Logo.svg.png" style="width:150px;height:50px; position: absolute; left: 180px; top: 20px;"> 
<div id="titre2">dans ses cartes avec Mapbox</div>  
</div>

<div id="cadre">
 
  <div id="encart">
  
Mode de visualisation proposés par MapboxGL
  
     <div class="btn-group">
    <button id="1" class="btn btn-secondary  btn-lg btn-block">Classique</button>
	<button id="4" class="btn btn-secondary  btn-lg btn-block">Carte choroplèthe</button>
    <button id="5" class="btn btn-secondary  btn-lg btn-block">Cercles graddués</button>
    <button id="2" class="btn btn-secondary  btn-lg btn-block">Communes extrudées</button>
    <button id="3" class="btn btn-secondary  btn-lg btn-block">Centroide extrudés</button>

</div>

</div>

// Configuration carte

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

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

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

// Config data

map.on('style.load', function() {
   
// Ajout Communes / classique

map.addSource('communes', {
        type: 'vector',
        url: 'mapbox://ninanoun.86qngnnd'});
   
map.addLayer({
        'id': 'Arrets',
        'type': 'line',
        'source': 'communes',
        'source-layer': 'TD1_Data-3kid81',
        'layout': {'visibility': 'visible'},
        'paint': {'line-color': '#ffffff', 'line-width': 1}
             });

// Ajout communes  // choroplèthe
   
map.addLayer({
    'id': 'Choroplete',
    'type': 'fill',
    'source': 'communes',
    'source-layer': 'TD1_Data-3kid81',
    'layout': {
      'visibility': 'none'
    },
	
    'paint': {
	 'fill-color': {
        'property': 'popOK',
        'stops': [
          [100, '#1a9850'],
          [500, '#91cf60'],
          [1000, '#d9ef8b'],
		      [2000, '#ffffbf'],
     	    [10000, '#fee08b'],
          [3000000, '#d73027']
        ]
      }, 'fill-opacity': 0.9} });

// Ajout communes // Mise en forme extrusion 3D
  
  map.addLayer({
    'id': 'extrudecommunes',
    'type': 'fill-extrusion',
    'source': 'communes',
    'source-layer': 'TD1_Data-3kid81',
    'layout': {'visibility': 'none'},
    'paint': {
      'fill-extrusion-color': {
        'property': 'popOK',
        'stops': [
          [100, '#1a9850'],
          [500, '#91cf60'],
          [1000, '#d9ef8b'],
		      [2000, '#ffffbf'],
     	    [10000, '#fee08b'],
          [3000000, '#d73027']
        ]
      },
      'fill-extrusion-height': {
        'property': 'popOK',
		"stops": [
          [100, 10],
          [100, 100],
		      [200000, 100000]
        ]
        
      },
      'fill-extrusion-opacity': 0.95,
      'fill-extrusion-base': 0
    }
  });
  
    
map.addSource('Centros', {
        type: 'vector',
        url: 'mapbox://ninanoun.34ic1kb9'});

// Cercle gradués
   
    map.addLayer({
    id: 'propcircle',
    type: 'circle',
    source: 'Centros',
   'source-layer': 'communecentrobzh-3kg5bc',
	 'layout': {'visibility': 'none'},
    
    paint: {
      'circle-color': '#D49A66',
      'circle-radius': {
        property: 'popOK',
       
        stops: [
          [1, 0.1],
          [10000, 20],
          [217000, 50]

]
      },
      'circle-opacity': 0.8
    }
  }); 
	});

// Config affichage boutons

document.getElementById('1').addEventListener('click', function () 
{ map.flyTo({zoom: 8,
 center: [-2.55523, 48.1294],
 pitch: 0,
 bearing: 0
});
  map.setLayoutProperty('contourcarro', 'visibility', 'visible');
  map.setLayoutProperty('Choroplete', 'visibility', 'none');
  map.setLayoutProperty('extrudecommunescentros', 'visibility', 'none');
  map.setLayoutProperty('classique', 'visibility', 'none');
  map.setLayoutProperty('propcircle', 'visibility', 'none');
    map.setLayoutProperty('extrudecommunes', 'visibility', 'none');

});

document.getElementById('2').addEventListener('click', function () 
{ map.flyTo({zoom: 8,
 center: [-2.55523, 48.1294],
 pitch: 40,
 bearing: 20
 });
  map.setLayoutProperty('extrudecommunes', 'visibility', 'visible');
  map.setLayoutProperty('Choroplete', 'visibility', 'none');
  map.setLayoutProperty('extrudecommunescentros', 'visibility', 'none');
  map.setLayoutProperty('classique', 'visibility', 'none');
  map.setLayoutProperty('propcircle', 'visibility', 'none');
  map.setLayoutProperty('contourcarro', 'visibility', 'none');

});

document.getElementById('3').addEventListener('click', function () 
{ map.flyTo({zoom: 8,
 center: [-2.55523, 48.1294],
 pitch: 40,
 bearing: 20
});
  map.setLayoutProperty('extrudecommunescentros', 'visibility', 'visible');
  map.setLayoutProperty('Choroplete', 'visibility', 'none');
  map.setLayoutProperty('extrudecommunes', 'visibility', 'none');
  map.setLayoutProperty('classique', 'visibility', 'none');
  map.setLayoutProperty('propcircle', 'visibility', 'none');

});

for (var i = 0; i < toggleableLayerIds1.length; i++) {
        var id = toggleableLayerIds1[i];

var link = document.createElement('a');
        link.href = '#';
        link.className = 'none';
        link.textContent = id;

link.onclick = function (e) {
            var clickedLayer = this.textContent;
            e.preventDefault();
            e.stopPropagation();

var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

if (visibility === 'visible') {
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');

}
        };

var layers = document.getElementById('menu');
        layers.appendChild(link);
}

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