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!