#MapboxGL - Tilevector SPD

<!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: 100%; height:800px; margin: auto;  border-width:2px;
 border-style:outset;
 border-color:black;}
		
 .map-overlay {
            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 {
            font: 11px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 320px;
            top: 60px;
            left: 50px;
            padding: 1px;
			background-color: #000000;
			color: #000000

}

.map-overlay-2 .map-overlay-inner {
            background-color: #FFFFFF;

padding: 0px;
            margin-bottom: 0px;
        }

.map-overlay-inner fieldset {
            border: none;
            padding: 0;
            margin: 0 0 10px;
        }

.map-overlay-inner .categoryLabel {
            display: block;
	    color: #FFFFFF;
	    background-color: #0074D9;
            font-weight: bold;
            margin: 0 0 5px;
        }

</style>
	
</head>
	
<body>
	
<div id="bouton">
 <button id="2D" class="btn btn-primary">Carto classique</button>
 <button id="3D" class="btn btn-primary">Carto 3D</button>
 </div>

<div class='map-overlay-2 top'>
    <div class='map-overlay-inner'>
        <fieldset>
            <label class="categoryLabel">Datasets du Service Public de la Donnée</label>
            <div>
                <input type="checkbox" id="RoutesCB" value="Routes" onchange="switchlayer('Routes')"checked/>
                <label for="RoutesCB">Axes routiers (IGN BDTOPO®)</label>
            </div>
            <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="HydroCB" value="Hydro" onchange="switchlayer('Hydro')" checked/>
                <label for="HydroCB">Hydrographie (IGN BDTOPO®)</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>
			 <div>
                <input type="checkbox" id="ADRESSECB" value="ADRESSE" onchange="switchlayer('ADRESSE')" />
                <label for="SIRENECB">Base Adresse Nationale (adresse.data.gouv.fr)</label>
            </div>
			<div>
                <input type="checkbox" id="SIRENECB" value="SIRENE" onchange="switchlayer('SIRENE')" />
                <label for="SIRENECB">Base SIRENE (INSEE / data.gouv.fr)</label>
            </div>
        </fieldset>
  
    </div>
</div>

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/ninanoun/cjp9mufdw193h2slo55pn5mwf', // stylesheet location
    center: [-1.738, 48.142], // starting position [lng, lat]
    zoom: 12,
	minZoom:12,
	maxZoom:20,
    pitch: 10, //Inclinaison
    bearing: -10 // Rotation
});
 
  map.on('load', function () {
  
   
	    // Hydrographie

map.addSource('Hydro', {
   type: 'vector',
   url: 'mapbox://mastersigat.55kllkvd'});
  
  map.addLayer({
        "id": "Hydro",
        "type": "fill",
        "source": "Hydro",
        "layout": {'visibility': 'visible'},
        "source-layer": "Hydro-bycjua",
        "paint": {"fill-color": "#7FDBFF"}
    }); 
	
	
  // VOIRIE

map.addSource('Routes', {
   type: 'vector',
   url: 'mapbox://mastersigat.7sap14lx'});
  
  map.addLayer({
        "id": "Routes",
        "type": "line",
        "source": "Routes",
        "layout": {'visibility': 'visible'},
        "source-layer": "Routes-dha8ut",
        "paint": {"line-color": "#FF851B", "line-width": {'base': 1.5,'stops': [[13,0.2], [22, 20]]}}
    });

// 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://mastersigat.a4h4ovrl'
    });

map.addLayer({
    'id': 'Batiments',
    'type': 'fill-extrusion',
    'source': 'Batiments',
    'source-layer': 'batiIGN-8zf03o',
    'layout': {'visibility': 'visible'},
	'paint': 
		{'fill-extrusion-color': '#A9A9A9', 
		 'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
		 'fill-extrusion-opacity': 0.90,
          'fill-extrusion-base': 0}
    });
  
  
  
             // ADRESSE
    
    
map.addSource('ADRESSE', {
        type: 'vector',
        url: 'mapbox://ninanoun.6amhjuoa'});
   
map.addLayer({
        'id': 'ADRESSE',
        'type': 'circle',
        'source': 'ADRESSE',
        'source-layer': 'Adresse-27ojfe',
        'layout': {'visibility': 'none'},
        'paint': {'circle-radius': {'base': 1.5,'stops': [[12,1 ], [22, 20]]}, 'circle-color': '#0074D9',}
    });
        
		
		
          // SIRENE
    
    
map.addSource('SIRENE', {
        type: 'vector',
        url: 'mapbox://ninanoun.5cn7hy60'});
   
map.addLayer({
        'id': 'SIRENE',
        'type': 'circle',
        'source': 'SIRENE',
        'source-layer': 'SIRENE-7asdkw',
        'layout': {'visibility': 'none'},
        'paint': {'circle-radius': {'base': 1.5,'stops': [[12,1.6 ], [22, 20]]}, 'circle-color': '#FF4136',}
    });
        
    //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": "#AAAAAA", "line-width": {'base': 1,'stops': [[12,0.1], [22, 1]]}}
});

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

});

// 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({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'}));
</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