Display popup on circle hover in mapbox

Question

I'm currently using mapbox in my angular application. On the addSource I used type: geojson since the data.features are populated from an API. On the addLayer I used the type: circle and used paint for the circle-color conditions.

I followed the docs but it seems like it doesn't recognize the circles. The following code is from the MapService.

this.map.addSource('cases', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [123, 123]
          },
          properties: {
            caseId: '200',
            status: 'IDENTIFIED',
            address: {
              barangay: 'ABCD',
              municipality: 'EFGH',
              province: 'IJKL'
            }
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [456, 456]
          },
          properties: {
            caseId: '201',
            status: 'CONFIRMED',
            address: {
              barangay: 'DCBA',
              municipality: 'HGFE',
              province: 'LKJI'
            }
          }
        }
      ]
    }
  });

  this.map.addLayer({
    id: 'population',
    type: 'circle',
    source: 'cases',
    paint: {
      'circle-radius': {
        base: 1.75,
        stops: [
          [10, 4],
          [12, 4]
        ]
      },
      'circle-color': [
        'match',
        ['get', 'status'],
        'IDENTIFIED',
        '#6c757d',
        'CLOSED',
        '#343a40',
        '#ccc'
      ]
    }
  });

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

  // tslint:disable-next-line: space-before-function-paren
  this.map.on('mouseenter', 'population', function (e) {
    this.map.getCanvas().style.cursor = 'pointer';

    const coordinates = e.features[0].geometry.coordinates.slice();
    const caseId = e.features[0].properties.caseId;

    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

    popup.setLngLat(coordinates).setText(caseId).addTo(this.map);
  });

  // tslint:disable-next-line: space-before-function-paren
  this.map.on('mouseleave', 'population', function () {
    this.map.getCanvas().style.cursor = '';
    popup.remove();
  });

UPDATE The mouseenter and mouseleave is now working but I got error of Cannot read property getCanvas of undefined

jscastro jscastro · Accepted Answer · 2020-07-10T09:54:11

Without a fiddle is hard to repro the issue you have with the circle layer, at a first sight your coordinates defined for the geojson geometries are not lnglat valid values. I changed them and it works.

For the error on mouseenter and mouseleave within the scope of the Mapbox events "this" is the map itself... just try this

    var map = (window.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 18,
        center: [-122.3512, 47.6202],
        pitch: 60,
        antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
    }));

    map.on('style.load', function () {
        map.addSource('cases', {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-122.3512, 47.6202]
                        },
                        properties: {
                            caseId: '200',
                            status: 'IDENTIFIED',
                            address: {
                                barangay: 'ABCD',
                                municipality: 'EFGH',
                                province: 'IJKL'
                            }
                        }
                    },
                    {
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [-122.3513, 47.6202]
                        },
                        properties: {
                            caseId: '201',
                            status: 'CONFIRMED',
                            address: {
                                barangay: 'DCBA',
                                municipality: 'HGFE',
                                province: 'LKJI'
                            }
                        }
                    }
                ]
            }
        });

        map.addLayer({
            id: 'population',
            type: 'circle',
            source: 'cases',
            paint: {
                'circle-radius': {
                    base: 1.75,
                    stops: [
                        [10, 4],
                        [12, 4]
                    ]
                },
                'circle-color': [
                    'match',
                    ['get', 'status'],
                    'IDENTIFIED',
                    '#6c757d',
                    'CLOSED',
                    '#343a40',
                    '#ccc'
                ]
            }
        });

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

        // tslint:disable-next-line: space-before-function-paren
        map.on('mouseenter', 'population', function (e) {
            this.getCanvas().style.cursor = 'pointer';

            const coordinates = e.features[0].geometry.coordinates.slice();
            const caseId = e.features[0].properties.caseId;

            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            popup.setLngLat(coordinates).setText(caseId).addTo(this);
        });

        // tslint:disable-next-line: space-before-function-paren
        map.on('mouseleave', 'population', function () {
            this.getCanvas().style.cursor = '';
            popup.remove();
        });

    });

Display popup on circle hover in mapbox

1 Answers