D3 Examples - symobologie mapbox

xxxxxxxxxx
 
<!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' />
​
  <style>
  
body { margin:0; padding:0; background-color:#000000; }
        
#bandeau {
width:100%;
height:100px;
background-color:#000000;}
​
​
#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>
​
 <div id="map">  <div id="menu"></div> </div>   
​
</div>      
​
​
​
<script>
​
// 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');
​
});
​
​
document.getElementById('4').addEventListener('click', function () 
{ map.flyTo({zoom: 8,
 center: [-2.55523, 48.1294],
 pitch: 0,
 bearing: 0
});
      map.setLayoutProperty('Choroplete', 'visibility', 'visible');
      map.setLayoutProperty('extrudecommunes', 'visibility', 'none');
      map.setLayoutProperty('extrudecommunescentros', 'visibility', 'none');
      map.setLayoutProperty('propcircle', 'visibility', 'none');
      map.setLayoutProperty('contourcarro', 'visibility', 'none');
});   
      
      
document.getElementById('5').addEventListener('click', function () 
{ map.flyTo({zoom: 8,
 center: [-2.55523, 48.1294],
 pitch: 0,
 bearing: 0
});
      map.setLayoutProperty('propcircle', 'visibility', 'visible');
      map.setLayoutProperty('extrudecommunes', 'visibility', 'none');
      map.setLayoutProperty('extrudecommunescentros', 'visibility', 'none');
      map.setLayoutProperty('Choroplete', 'visibility', 'none');
      map.setLayoutProperty('contourcarro', 'visibility', 'none');
});   
          
map.addControl(new mapboxgl.ScaleControl({
    maxWidth: 120,
    unit: 'metric'}));
      
 
 // Ajout des boutons de couches
 
   var toggleableLayerIds1 = ['Routes principales', 'hydrologie' ];
​
    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>
    