#MapboxGL / Menu de gestion des couches

Ajouter des données OSM, des données hébérgées dans le Studio de Mapbox Personnaliser un menu de gestion des couches

<!DOCTYPE html> 
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      #menu {
    width: 15%; margin-right: auto; margin-left: auto; 
    Z-index: 1; top: 10px; right: 10px; position: absolute;
    border-color: #FFFFFF; background-color: #808080 ;
    font-size: 12px; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; }

#menu a {
    display: block; color: #FFFFFF; padding: 8px 16px;
    text-align: center;  font-weight: bold;
    border-style: solid; border-color: #000000;}

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

#menu a:hover:not(.active) {
    background-color:  #CC6600;
    color: #FFFFFF;}

</style>
</head>
<body>

<div id='map'><div id="menu"></div> 
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
  
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/ninanoun/ciyo7h3mc001q2rpngdsa9zwh', // stylesheet location
    center: [-1.68, 48.12], // starting position [lng, lat]
    zoom: 15,
    pitch: 50, //Inclinaison
    bearing: -10 // Rotation
});
 
  map.on('load', function () {

map.addSource('mapbox-streets-v7', {
   type: 'vector',
   url: 'mapbox://mapbox.mapbox-streets-v7'});
  
  map.addLayer({
        "id": "Routes",
        "type": "line",
        "source": "mapbox-streets-v7",
        "layout": {'visibility': 'none'},
        "source-layer": "road",
        "paint": {"line-color": "#ff8533", "line-width": 0.5}
    }); 
    
map.addLayer({
        "id": "Hydrologie",
        "type": "line", 
        "source": "mapbox-streets-v7",
        "source-layer": "waterway",
        "layout": {'visibility': 'none'},
        "paint": {"line-color": "#4dd2ff",
            "line-width": 3}
    });
    
    // Ajout arbres 
    
    
map.addSource('Arbres', {
        type: 'vector',
        url: 'mapbox://ninanoun.dx1cg9bg'});
   
map.addLayer({
        'id': 'Arbres',
        'type': 'circle',
        'source': 'Arbres',
        'source-layer': 'arbres-d-alignement-rennes-a5jtaq',
        'layout': {'visibility': 'none'},
        'paint': {'circle-radius': 3, 'circle-color': '#0df634',}
    });

map.addLayer({
        "id": "Batiments",
        "type": "fill", 
        "source": "mapbox-streets-v7",
        "source-layer": "building",
        "layout": {'visibility': 'visible'},
        "paint": {"fill-color": "#d1e0e0"}
    });
      
      
    //Proprietes

map.addSource('Proprietes', {
        type: 'vector',
        url: 'mapbox://ninanoun.a4kdgiot'
    });

map.addLayer({
        'id': 'Proprietes',
        'type': 'line',
        'source': 'Proprietes',
        'source-layer': 'limites_proprietes',
        'layout': {'visibility': 'none',
        'line-join': 'round','line-cap': 'round'},
        'paint': {'line-color': '#FFFFFF', 'line-width': 1.5}
});

// Ajouts bartiments 3D 
      
 // Ajout batiments 3D

map.addLayer({
        'id': 'Batimenst_3D',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {'fill-extrusion-color': '#FFFFFF', 'fill-extrusion-height': 
        {'type': 'identity','property': 'height'},
        'fill-extrusion-base': {'type': 'identity','property': 'min_height'},
        'fill-extrusion-opacity': 0.9
        }
    });

});
  //Interactivité HOVER

var popup = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false });

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['Arrets'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

if (!features.length) {
        popup.remove();
        return;
    }

var feature = features[0];

popup.setLngLat(feature.geometry.coordinates)
        .setHTML(feature.properties.nom)
        .addTo(map);

});

// Sélecteur de couches
  
  
var toggleableLayerIds = [ 'Routes', 'Hydrologie', 'Proprietes', 'Arbres'];

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

var link = document.createElement('a');
    link.href = '#';
    link.className = 'inactive';
    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>
</html>

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