Listing Markers

Showing a list of markers on screen


Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Listing Markers</title>
  
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<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>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.