Mapbox - adding 'on click' event to a line layer

Question

TLDR; How do I add a popup to a mapbox "line" type layer?

I have a function loading a mapbox map and adding a layer of lines to it.

My goal is to add a popup on clicking on that line. I followed the examples and added an on click event. But this gives me an error. Any pointers on what I am doing wrong?

   function renderLineLayer(layerName,data) {
        map.on('load', function() {
            map.addLayer({
                "id": layerName,
                "type": "line",
                "source": {
                    "type": "geojson",
                    "data": data

                },
                "layout": {
                    "line-join": "round",
                    "line-cap": "round",
                    "visibility":"visible"
                },
                "paint": {
                    "line-color": "blue",
                    "line-width": 8
                }
            });

            console.log(map.getLayer(layerName));        

            map.on('click', layerName, function (e) {
                console.log('click');                
                new mapboxgl.Popup()
                  .setLngLat(e.lngLat)
                  .setHTML(e.features[0].properties.name)
                  .addTo(map);

            });
        });

    }

The error I get is.

TypeError: listeners[i].call is not a function[Learn More]  mapbox-gl-dev.js:29779:13

Steve Bennett Steve Bennett · Accepted Answer · 2017-04-24T01:09:04

This is a bit of a guess, but the on('click') event API changed recently. Previously it didn't have the layer argument (IIRC). If you're using an older version of the Mapbox-GL-JS library, it would be trying to call your second argument (the layer name) as if it were a function and it would give that error message.

Solution: update to the latest Mapbox-GL-JS library version (0.36).

(I don't think the process for responding to mouse clicks on line features is any different than for points or polygons.)

Mapbox - adding 'on click' event to a line layer

1 Answers