Mapbox – How to Create Popups on Hover

javascriptmapboxmapbox-gl-js

I'm not very used to JavaScript, and I don't understand how to adapt my code to this tutorial : https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/

Indeed, in my code, the text information is from a layer made in Mapbox studio :

<body>
    <style>
        .mapboxgl-popup {
        max-width: 400px;
        }
    </style>

    <div id='map' style='width: 100%; height: 100%;'></div>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiZm9hbHkiLCJhIjoiY2sydzNrbDdhMDMwNDNibGdreHZ3cDl///////';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles///////ck2xjgdxh2kxk1cp5s//////',
            center: [1.85, 50.9575],
            zoom: 14
        });

        map.on('click', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
        layers: ['test'] 
         });

        if (!features.length) {
        return;
          }

        var feature = features[0];

        var popup = new mapboxgl.Popup({ offset: [0, -7] })
        .setLngLat(feature.geometry.coordinates)
        .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>' + '<h3>' + feature.properties.title2 + '</h3><p>' + feature.properties.description2 + '</p>' )
        .addTo(map);
        });

        map.on('mouseenter', 'test', function() {
        map.getCanvas().style.cursor = 'pointer';
        });

        map.on('mouseleave', 'test', function() {
        map.getCanvas().style.cursor = '';
        });

    </script>
</body>

Best Answer

The main issue in your code is using the click event:

map.on('click', function(e) {

For displaying the popup on hover you need to use the mouseenter event on the desired layer.

Here is the working code based on https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/:

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZm9hbHkiLCJhIjoiY2sydzNrbDdhMDMwNDNibGdreHZ3cDl///////';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles///////ck2xjgdxh2kxk1cp5s//////',
        center: [1.85, 50.9575],
        zoom: 14
    });

    // Create a popup, but don't add it to the map yet.
      var popup = new mapboxgl.Popup({
        offset: [0, -7],
        closeButton: false,
        closeOnClick: false
      });

  map.on('load', function() {
    map.on('mouseenter', 'test', function(e) {
      map.getCanvas().style.cursor = 'pointer';

      var coordinates = e.features[0].geometry.coordinates.slice();
      var title = e.features[0].properties.title;
      var description = e.features[0].properties.description;
      var title2 = e.features[0].properties.title2;
      var description2 = e.features[0].properties.description2;

      // Ensure that if the map is zoomed out such that multiple
      // copies of the feature are visible, the popup appears
      // over the copy being pointed to.
      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
      }

      // Populate the popup and set its coordinates
      // based on the feature found.
      popup
      .setLngLat(coordinates)
      .setHTML('<h3>' + title + '</h3><p>' + description + '</p>' + '<h3>' + title2 + '</h3><p>' + description2 + '</p>' )
      .addTo(map);
      });

    map.on('mouseleave', 'test', function() {
      map.getCanvas().style.cursor = '';
      popup.remove();
    });
  });

</script>

Related Question