Markercluster with Mapbox marker data

Cluster markers from a Mapbox featureLayer using MarkerClusterGroup.

<!DOCTYPE html>
<meta charset=utf-8 />
<title>Markercluster with Mapbox marker data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src=''></script>
<link href='' rel='stylesheet' />
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
<script src=''></script>
<link href='' rel='stylesheet' />
<link href='' rel='stylesheet' />

<div id='map'></div>

L.mapbox.accessToken = '<your access token here>';
// Here we don't use the second argument to map, since that would automatically
// load in non-clustered markers from the layer. Instead we add just the
// backing styleLayer, and then use the featureLayer only for its data.
var map ='map')
    .setView([40.73, -74.011], 13)

// 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.
L.mapbox.featureLayer('').on('ready', function(e) {
    // The clusterGroup gets each marker in the group added to it
    // once loaded, and then is added to the map
    var clusterGroup = new L.MarkerClusterGroup(); {
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.
Copy example