#MapboxGL / Hover + Click (personnalisation PopUp)

<!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: 17, // zoom
    pitch: 50, // Inclinaison
    bearing: -10 // Rotation
});

map.on('load', function () {
 
 // Ajout routes OSM
 
 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': 'visible'},
        "source-layer": "road",
        "paint": {"line-color": "#FF7F50", "line-width": 1}
    });

// Ajout arrets de bus

map.addSource('Arrets', {
        type: 'vector',
        url: 'mapbox://ninanoun.58widelk'});
   
map.addLayer({
        'id': 'Arrets',
        'type': 'circle',
        'source': 'Arrets',
        'source-layer': 'Bus-5ypx1k',
        'layout': {'visibility': 'visible'},
        'paint': {'circle-radius': 7, 'circle-color': '#f5f60d'}
    });

// Ajout couche équipements

map.addSource('Equipements', {
        type: 'vector',
        url: 'mapbox://ninanoun.4xcn5ude'});
   
map.addLayer({
        'id': 'Equipements',
        'type': 'circle',
        'source': 'Equipements',
        'source-layer': 'base-orga-var-6k0zky',
        'layout': {'visibility': 'visible'},
        'paint': {'circle-radius': 6, 'circle-color': '#3399ff'}
    });
    
    
 //Limites de proprietes

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

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

// 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: ['Equipements'] });
// 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('<h3>' + feature.properties.organom + '</h3>')
.addTo(map);
});

//Interactivité CLICK
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['Arrets'] });
if (!features.length) {
return;
}
var feature = features[0];
var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h1> <font color="blue">'  + feature.properties.nom + '</h1><font color="black"> <img src="https://cdn2.telephone.city/200/star-metro.png"  style="width:30%"> <h2>'
+"Mobilier : " + feature.properties.mobilier + '</h2><p>'
+"Accessibilité PMR : " + feature.properties.estaccessiblepmr + '</p>' )
.addTo(map);
});
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['Arrets'] });
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});

</script>

</body>
</html>

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