#MapboxGL PLU/Cadastre/Bati3D

<!DOCTYPE html> 
<html>
<head>
    <title>Tile vector SPD</title>
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet'/>
    <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>   
	
	<style>
  body { margin:0; padding:0; }
		
.map {width: 90%; height:800px; margin: auto;  border-width:2px;
 border-style:outset;
 border-color:black;  }
		
 .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: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 400px;
            top: 30px;
            left: 60px;
            padding: 5px;
			background-color: #FFFFFF;
			color: #000000

}

.map-overlay-inner .categoryLabel {
            display: block;
	    color: #FFFFFF;
	    background-color: #0074D9;
            font-weight: bold;
			font-size: 19px;
            margin: 0 0 12px;
        }
 #features {
            z-index: 1;
			top: 0;
             padding: 10px;
			height: 320px;
            margin-top: 10px;
            width: 280px;
			background-color: #FFFFFF;
        }
        #legend {
               z-index: 1;
			   padding: 7px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            line-height: 2Opx;
            height: 170px;
            margin-bottom: 50px;
            width: 230px;
			background-color: #FFFFFF;
			
        }
        .legend-key {
              z-index: 1;
			  display:inline-block;
           top: 5px;
		   border-radius: 20%;
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
		 #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' id='features'><h3>Explorer les bâtiments</h3><div id='pd'><p> <b>Survolez les batiments</b> </p></div></div>
<div class='map-overlay' id='legend'><b>Zonage du PLU (2015)</b> <BR> </div>
<div class='map-overlay-2 top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label class="categoryLabel">Couches de la carte</label>
                   <div>
                <input type="checkbox" id="BatimentsCB" value="Batiments" onchange="switchlayer('Batiments')"checked/>
                <label for="BatimentsCB">Bâtiments (IGN BDTOPO®)</label>
            </div>
			<div>
                <input type="checkbox" id="PLUCB" value="PLU" onchange="switchlayer('PLU')" />
                <label for="PLUCB">PLU (Rennes Métropole)</label>
            </div>
			   <div>
                <input type="checkbox" id="CadastreCB" value="Cadastre" onchange="switchlayer('Cadastre')" />
                <label for="CadastreCB">Plan Cadastral Informatisé (cadastre.data.gouv.fr)</label>
            </div>
        </fieldset>
  
    </div>

<div id="bouton">
 <button id="2D" class="btn btn-primary">Carto classique</button>
 <button id="3D" class="btn btn-primary">Carto 3D</button><div id='remover'>Satellite</div>
 </div>

</div>
</div>

map.on('load', function () {
  var switchy = document.getElementById('remover');
    switchy.addEventListener("click", function(){
        switchy = document.getElementById('remover');
        if (switchy.className === 'on') {
            switchy.setAttribute('class', 'off');
            map.setLayoutProperty('mapbox-mapbox-satellite', 'visibility', 'none');
            switchy.innerHTML = 'satellite';
        } else {
            switchy.setAttribute('class', 'on');
            map.setLayoutProperty('mapbox-mapbox-satellite', 'visibility', 'visible');
            switchy.innerHTML = 'Plan';
        }
    });
   
	  map.getCanvas().style.cursor = 'default';
    map.getCanvas().style.cursor = 'default';
    var layers = ['Zone naturelle', 'Zone agricole', 'Zone à urbaniser - ouverte','Zone à urbaniser - bloquée', 'Zone urbaine'];
    var colors = ['#56AA02', '#FFFF00', '#FECCBE', '#FF6565', '#e60000'];
    for (i=0; i<layers.length; i++) {
        var layer = layers[i] ;
        var color = colors[i];
        var item = document.createElement('div');
        var key = document.createElement('span');
        key.className = 'legend-key';
        key.style.backgroundColor = color;
        var value = document.createElement('span');
        value.innerHTML = layer;
        item.appendChild(key);
        item.appendChild(value);
        legend.appendChild(item);
    }

// Satellite

map.addSource('satellite', {
   type: 'raster',
   url: 'mapbox://mapbox.satellite'});

// PLU

map.addSource('PLU', {
   type: 'vector',
   url: 'mapbox://ninanoun.0jcgqeyv'});
  
  map.addLayer({
        "id": "PLU",
        "type": "fill",
        "source": "PLU",
        "layout": {'visibility': 'none'},
        "source-layer": "PLU-axtxt4",
        "paint": {'fill-color': ['match',['get', 'typezone'],
              'N', '#56AA02',
                'Nh', '#56AA02',
                'AUc', '#FECCBE',
                'A', '#FFFF00',
                'AUs', '#FF6565',
				'U', '#e60000', '#ccc'
				], 'fill-opacity': 0.5}
    });

//CADASTRE

map.addSource('Cadastre', {
        type: 'vector',
        url: 'mapbox://mastersigat.9yc1xho2'
    });

map.addLayer({
        'id': 'Cadastre',
        'type': 'line',
        'source': 'Cadastre',
        'source-layer': 'Cadastre-cz7x03',
        'layout': {'visibility': 'none',
        'line-join': 'round','line-cap': 'round'},
       "paint": {"line-color": "#FFFFFF", "line-width": {'base': 1,'stops': [[12,0.1], [22, 1]]}}
});

// CONTOURS RM

map.addSource('RM', {
   type: 'vector',
   url: 'mapbox://ninanoun.3nmwp9pz'});
  
  map.addLayer({
        "id": "Contours",
        "type": "line",
        "source": "RM",
        "layout": {'visibility': 'visible'},
        "source-layer": "RM-7zoiyr",
        "paint": {"line-color": "#000000", "line-width": 1}
    });

//BATIMENTS

map.addSource('Batiments', {
        type: 'vector',
        url: 'mapbox://ninanoun.dv8c33g9'
    });
  
  map.addLayer({
    'id': 'Batiments',
    'type': 'fill-extrusion',
    'source': 'Batiments',
    'source-layer': 'BatiPLU-d5t2q3',
    'layout': {'visibility': 'visible'},
	'paint': 
		{'fill-extrusion-color': ['match',['get', 'typezone'],
                'N', '#56AA02',
                'Nh', '#56AA02',
                'AUc', '#FECCBE',
                'A', '#FFFF00',
                'AUs', '#FF6565',
				'U', '#e60000', '#ccc'
				], 
		 'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
		 'fill-extrusion-opacity': 0.90,
          'fill-extrusion-base': 0}
    });
	
	
	
	//COnfiguration changement des couches

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

});

// Configuration fenêtre d'informations
    map.on('mousemove', function (e) {
        var states = map.queryRenderedFeatures(e.point, {
            layers: ['Batiments']
        });

if (states.length > 0) {
            document.getElementById('pd').innerHTML = "<h4>Hauteur : </strong><p><strong><em>"+ states[0].properties.HAUTEUR + "</strong> mètres </p>"
													 + "Superficie : </strong><p><strong><em>"+ states[0].properties.Shape_Area + "</strong> m2 </p>"
													 + "Zonage : </strong><p><strong><em>"+ states[0].properties.typezone + "</strong></p>"
													 + "Libellé du zonage : </strong><p><strong><em>"+ states[0].properties.libelle + "</strong></p>"
													 + "ID Zone</strong><p><strong><em>"+ states[0].properties.idzone + "</strong></p></h4>";
        } else {document.getElementById('pd').innerHTML = '<p>Données : IGN et Rennes Metropole / OSM</p>';}
    });

map.addControl(new mapboxgl.ScaleControl({
    maxWidth: 120,
    unit: 'metric'}));
	
	
	
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');

// Config affichage boutons

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

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

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

});

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