Listing markers in clusters
Show a list of clustered markers by their coordinates on a map with Mapbox.js.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Listing markers in clusters</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
<style>
pre.ui-coordinates {
background:rgba(0,0,0,0.5);
position:absolute;
bottom:10px;
left:10px;
padding:5px 10px;
color:#fff;
font-size:11px;
line-height:18px;
border-radius:3px;
max-height:240px;
overflow:auto;
width:100px;
}
</style>
<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>
<script src="/mapbox.js/assets/data/realworld.388.js"></script>
<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
.setView([-37.82, 175.215], 14)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
var markers = new L.MarkerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {
icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
function onmove() {
// Get the map bounds - the top-left and bottom-right locations.
var inBounds = [],
bounds = map.getBounds();
markers.eachLayer(function(marker) {
// For each marker, consider whether it is currently visible by comparing
// with the current map bounds.
if (bounds.contains(marker.getLatLng())) {
inBounds.push(marker.options.title);
}
});
// Display a list of markers.
document.getElementById('coordinates').innerHTML = inBounds.join('\n');
}
map.on('move', onmove);
// call onmove off the bat so that the list is populated.
// otherwise, there will be no markers listed until the map is moved.
onmove();
</script>
Get a free Mapbox account to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and
replacing the Map ID
with
one of your own from your projects.
Having trouble with JavaScript? Try out Codecademy
or contact our support team.