3

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>

Improve this question

1 Answer 1

Reset to default
2

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>

Improve this answer
3
  • It's working. But when I add "closeButton: false, closeOnClick: false" to "var popup", the map is not displayed anymore...
    – Foaly
    Feb 1, 2020 at 9:32
  • Don't know how you are adding it. I've updated the code so that it shows how to do it.
    – pathmapper
    Feb 1, 2020 at 10:05
  • Well, the truth is I've forgotten a comma ! Thank you for your help. PS: I think the "map.on('load', function() {" is not necessary in your updated code.
    – Foaly
    Feb 1, 2020 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.