<style>
#onscreen {
position: absolute;
top: 10px;
right: 10px;
width: 300px;
height: 100px;
background: #fff;
z-index: 100;
overflow-y: scroll;
}
</style>
<div id='map'></div>
<pre id='onscreen'></pre>
<script>
var map = L.mapbox.map('map', 'examples.map-20v6611k');
var features = [];
for (var x = -120; x < 120; x += 20) {
for (var y = -80; y < 80; y += 10) {
features.push({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [x, y]
},
properties: {
'marker-color': '#000',
'marker-symbol': 'star-stroked',
title: [x, y].join(',')
}
});
}
}
map.markerLayer.setGeoJSON({
type: 'FeatureCollection',
features: features
});
map.on('move', function() {
// construct an empty list to fill with onscreen markers
var inBounds = [],
// get the map bounds - the top-left and bottom-right locations
bounds = map.getBounds();
// for each marker, consider whether it is currently visible by comparing
// with the current map bounds
map.markerLayer.eachLayer(function(marker) {
if (bounds.contains(marker.getLatLng())) {
inBounds.push(marker.options.title);
}
});
// display a list of markers.
document.getElementById('onscreen').innerHTML = inBounds.join('\n');
});
map.setView([37, -77], 5);
</script>