#Mapbox - Paris en 3D

Licenses: Code application>CC BY-SA 2.0 FR / Datasets> ODbL // Built with blockbuilder.org

<!DOCTYPE html> 
<html>
<head>
    <title>Paris bati</title>
			<meta charset="utf-8" />

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 60px; border-style: dotted;
  border-color: white;     width: 300px;

}
.input-color .color-box {
    width: 40px;
    height: 22px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 5px;
}
 .map-overlay {
                           z-index: 1;
position: absolute;
            bottom: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.8);
            margin-right: 20px;
            font-family: Arial, sans-serif;
            overflow: auto;
            border-radius: 3px;
        }
  	  
.map-overlay-2 {
                           z-index: 1;
font: 15px/30px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 353px;
            top: 20px;
            left: 40px;
            padding: 1px;
			background-color: #FFFFFF;
			color: #000000;
			 opacity: 0.9;

}

.map-overlay-inner .categoryLabel {
            display: block;
	    color: #FFFFFF;
	    background-color: #4d4d4d;
            font-weight: bold;
			font-size: 21px;
            margin: 30 30 3px;
			
        }
 #features {
            z-index: 1;
			top: 0;
            padding: 10px;
			height: 320px;
            margin-top: 10px;
            width: 250px;
			background-color: #FFFFFF;
        }
       
		 #remover {              z-index: 1;

margin: 0 auto;
            background-color: #fb5b3f;
            color: #fff;
            font-weight: bold;
            padding: 0.5em;
         
            cursor: pointer;
            position: absolute;
            left: 60%;
            top: 9em;
        }
        #remover:hover {
            background-color: salmon;
        }

</style>
	
</head>
	
<body>

<div class='map-overlay-2 top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label class="categoryLabel">_Vues cartographiques</label>
			
			<div id="bouton" class="button">
 <button id="2D" class="btn btn-primary">Carto classique</button>
 <button id="3D" class="btn btn-primary">Carto en 3D</button>
<BR>
<BR>

<B>Nombres de planchers (359 884 parcelles)</b>
        <div class="input-color">
            <input type="text" value="0 et 1 planchers" />
            <div class="color-box" style="background-color: #2c7bb6;"></div>
            
        </div>
   
 
        <div class="input-color">
            <input type="text" value="2 à 4 planchers" />
            <div class="color-box" style="background-color: #abd9e9;"></div>
            
        </div>
   
  
        <div class="input-color">
            <input type="text" value="5 à 9 planchers" />
            <div class="color-box" style="background-color: #ffffbf;"></div>
            
        </div>
  
        <div class="input-color">
            <input type="text" value="10 à 15 planchers" />
            <div class="color-box" style="background-color: #fdae61;"></div>
            
        </div>
   
        <div class="input-color">
            <input type="text" value="Plus de 15 planchers" />
            <div class="color-box" style="background-color: #d7191c;"></div>
            
        </div>

</div><BR>
             <label class="categoryLabel">_ Lieux</label>
    <button id="PARIS" class="btn btn-primary">Nation</button>
   <button id="OLYMP" class="btn btn-primary">13eme Ardt</button>
  <button id="G" class="btn btn-primary">Grenelle</button>
  <button id="S" class="btn btn-primary">Stalingrad</button>

</div><BR>
		 
	Source : Mairie de Paris / Direction de l'Urbanisme <br>
	Dataset disponible sur le portail <a href="https://opendata.paris.fr/explore/dataset/volumesbatisparis/information/"  target="_blank" >Paris Data</a>
			 
        </fieldset> <BR>
   </div>
    </div>
     </div>

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

//Volumebati

map.addSource('bati', {
type: 'vector',
url: 'mapbox://ninanoun.0lg1dzof'});
  
map.addLayer({
        "id": "bati3D",
        "type": "fill-extrusion",
        "source": "bati",
        "layout": {'visibility': 'none'},
        "source-layer": "volumesbatisparis-an55g4",
        "paint": {'fill-extrusion-color': {'property': 'nb_pl',
         'stops': [
                         [0, '#2c7bb6'],
                       [3, '#abd9e9'],
                       [5, '#ffffbf'],
		               [10, '#fdae61'],
      	               [15, '#d7191c']]},		
		
		'fill-extrusion-height': {
        'property': 'nb_pl',
		     'stops': [[0, 3],
                       [2, 6],
		  			   [5, 15],
		               [10, 30],
		               [20, 60],
		               [30, 90],
		               [40, 120],
		               [50, 150],
		                 ]},
						 
						 
		 'fill-extrusion-opacity': 0.90,
         'fill-extrusion-base': 0,
		 'fill-extrusion-vertical-gradient':true}
    }); 
	
	
	map.addLayer({
        "id": "bati2D",
        "type": "fill",
        "source": "bati",
        "layout": {'visibility': 'visible'},
        "source-layer": "volumesbatisparis-an55g4",
        "paint": {'fill-color': {'property': 'nb_pl',
         'stops': [
                       [0, '#2c7bb6'],
                       [3, '#abd9e9'],
                       [5, '#ffffbf'],
		               [10, '#fdae61'],
      	               [15, '#d7191c']]},		
		'fill-opacity':1}
    }); 
	
	
	map.addLayer({
        "id": "bati",
        "type": "fill",
        "source": "bati",
        "layout": {'visibility': 'none'},
        "source-layer": "volumesbatisparis-an55g4",
        "paint": {'fill-color': '#fdae61'},		
		 'fill-opacity': 0.90
    });

//Volumenonbati
	
map.addSource('nonbati', {

type: 'vector',
 url: 'mapbox://ninanoun.0qqfdqbv'});
  
map.addLayer({
        "id": "nonbati",
        "type": "fill",
        "source": "nonbati",
        "layout": {'visibility': 'none'},
        "source-layer": "volumesnonbatisparis-6afrw6",
        "paint": {'fill-color': '#47d1d1', 'fill-opacity': 0.6} 
    });

//Arrondissement

map.addSource('arr', {
   type: 'vector',
   url: 'mapbox://ninanoun.4n2x4b38'});
  
  map.addLayer({
        "id": "arr",
        "type": "line",
        "source": "arr",
        "layout": {'visibility': 'visible'},
        "source-layer": "arrondissements-acjxwy",
        "paint": {"line-color": "#000000", "line-width": 1.5}    }); 
   
   
	//Configuration changement des couches

switchlayer = function (lname) {
            if (document.getElementById(lname + "CB").checked) {
                map.setLayoutProperty(lname, 'visibility', 'visible');
            } else {
                map.setLayoutProperty(lname, 'visibility', 'none');
           }
        }

}); 
    
       //Ajout échelle cartographique
	   
map.addControl(new mapboxgl.ScaleControl({
    maxWidth: 120,
    unit: 'metric'}));
	
	 //Ajout boutons de controle
	
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');

// Config affichage boutons 2D 3D

document.getElementById('3D').addEventListener('click', function () 
{ map.flyTo({
 pitch: 60,
 bearing: -10 });
  map.setLayoutProperty('bati3D', 'visibility', 'visible');
      map.setLayoutProperty('bati2D', 'visibility', 'none');

});

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

});

document.getElementById('PARIS').addEventListener('click', function () 
{ map.flyTo({
 pitch: 0,  center: [2.3959, 48.845], // starting position
    zoom: 15.1, pitch:60, 
 bearing: -10 });
});

document.getElementById('OLYMP').addEventListener('click', function () 
{ map.flyTo({
 pitch: 0,  center: [2.36, 48.822], // starting position
    zoom: 15,
 bearing: -10, pitch:60 });
});

document.getElementById('G').addEventListener('click', function () 
{ map.flyTo({
 pitch: 0,  center: [2.28, 48.85], // starting position
    zoom: 15.5,
 bearing: -10, pitch:60 });
});

document.getElementById('S').addEventListener('click', function () 
{ map.flyTo({
 pitch: 0,  center: [2.374, 48.89], // starting position
    zoom: 15.5,
 bearing: -20, pitch:60 });
});

</script>

</body>
</html>

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

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