Quantcast
Channel: Question and Answer » mapbox
Viewing all articles
Browse latest Browse all 20

How do you add a pop up to a Mapbox.js feature Layer

$
0
0

I am trying to get popups to work with a featureLayer in MapBox.js, to no avail. Here is my code:

var pliOptions = '<h2>A ferry ride!</h2>' +
    '<p>Test Data</p>';

        // Since featureLayer is an asynchronous method, we use the `.on('ready'`
        // call to only use its marker data once we know it is actually loaded.
        var pli = L.mapbox.featureLayer("TraxPatrol-pli", { popoupOptions: pliOptions })
            .loadURL('http://localhost:57806/units/location')
            .on('ready', function(e) {
                // create a new MarkerClusterGroup that will show special-colored
                // numbers to indicate the type of rail stations it contains
                function makeGroup(color) {
                    return new L.MarkerClusterGroup({
                        iconCreateFunction: function(cluster) {
                            return new L.DivIcon({
                                iconSize: [20, 20],
                                html: '<div style="text-align:center;color:#fff;background:' +
                                color + '">' + cluster.getChildCount() + '</div>'
                            });
                        }
                    }).addTo(map);
                }

                // create a marker cluster group for each type of rail station
                var groups = {
                    red: makeGroup('red'),
                    green: makeGroup('green'),
                    orange: makeGroup('orange'),
                    blue: makeGroup('blue'),
                    yellow: makeGroup('yellow')
                };
                e.target.eachLayer(function(layer) {
                    // add each rail station to its specific group.
                    groups[layer.feature.properties.line].addLayer(layer);
                });

            })
            .bindPopup()
            .on('mouseover', function (e) {
                e.layer.openPopup();
            })
            .on('mouseout', function (e) {
                e.layer.closePopup();
            });

The markers in the layer are displayed in the map, but there are no popups when I mouse over the markers. NOTE: I am using clustering, but I think the popups should still be showing up when I zoom into individual markers.

Thanks!


Viewing all articles
Browse latest Browse all 20

Trending Articles