#MapboxGL / Données personnelles (mise en forme et interactivité)

<!DOCTYPE html> 
<html>
<head>
    <meta charset='utf-8' />
    <title>MapboxGL</title>

</head>
    
<body>
<div id='map'></div>

// Configuration de la carte
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-1.68, 48.12], // lat/long
    zoom: 15, // zoom
    pitch: 50, // Inclinaison
    bearing: -10 // Rotation
});

// Ajout de données OSM
  
map.on('load', function () {
 
 // Config source
 map.addSource('mapbox-streets-v7', {
   type: 'vector',
   url: 'mapbox://mapbox.mapbox-streets-v7'});
  
  // Ajout routes
  map.addLayer({
        "id": "routes",
        "type": "line",
        "source": "mapbox-streets-v7",
        "layout": {'visibility': 'visible'},
        "source-layer": "road",
        "filter": ["all",  ["in", "class", "motorway", "trunk", "primary"]],        
        "paint": {"line-color": "#FF7F50", "line-width": 3}
    });  
    
  // Ajout hydrologie

map.addLayer({
        "id": "hydrologie",
        "type": "line", 
        "source": "mapbox-streets-v7",
        "source-layer": "waterway",
        "layout": {'visibility': 'visible'},
        "paint": {"line-color": "#4dd2ff",
            "line-width": 10}
    });

// Batiments

map.addLayer({
        "id": "batiments",
        "type": "fill", 
        "source": "mapbox-streets-v7",
        "source-layer": "building",
        "paint": {"fill-color": "#FFFFFF",
                     "fill-opacity": 0.8}
    });

map.addSource('Arrets', {
        type: 'vector',
        url: 'mapbox://ninanoun.7mtp5buo'});
   
  map.addLayer({
            "id": "Arrets",
            "type": "symbol",
            "source": "Arrets",
            "source-layer": "topologie-des-points-darret-d-9ya955",
            "layout": { "icon-image": "bus-15",
                        "icon-size": 1.5,

}
        });

});

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['Arrets'] // replace this with the name of the layer
  });
  if (!features.length) {
    return;
  }
  var feature = features[0];
  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.nom + '</h3><p>' + feature.properties.nom + '</p>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
</script>

</body>
</html>

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