Fit Mapbox map to boundaries of dynamic markers - mapbox

Question

I try to create a map with mapbox, that features dynamic markers. I want the map to automatically fit to the markers, as described here: https://www.mapbox.com/mapbox.js/example/v1.0.0/fit-map-to-markers/. Unfortunately I can't get it working.
The code also contains the feature markers as links (https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-as-links/), which works great – but as JS- and Mapbox-Noob, I can't figure out how to combine both.
The code right now is this:
<div class='start-map'>
<div id='map'></div>
<script>
var map = L.mapbox.map('map', 'XXX', {zoomControl: false})
.setView([-20.1908, -67.5893], 3);
var geoJson = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-67.5893, -20.1908]
},
properties: {
title: 'Salar de Uyuni',
'marker-size': 'small',
'marker-color': '#fff',
url: 'http://localhost'
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [170.2, -43.4764]
},
properties: {
title: 'Franz Josef Glacier',
'marker-size': 'small',
'marker-color': '#fff',
url: 'http://localhost'
}
}
]
};
map.featureLayer.setGeoJSON(geoJson);
map.featureLayer.on('click', function(e) {
e.layer.unbindPopup();
window.open(e.layer.feature.properties.url);
});
geoJson.on('ready', function() {
// featureLayer.getBounds() returns the corners of the furthest-out markers,
// and map.fitBounds() makes sure that the map contains these.
map.fitBounds(geoJson.getBounds());
});
</script>
</div>

Answer 1

Here's corrected code: https://gist.github.com/tmcw/10203442
Issues in this example:
geoJson is a simple JavaScript object, not a layer, so you can't call methods on it.
If you're adding custom data to a map, create a new L.mapbox.featureLayer rather than using map.featureLayer
If you're calling .setGeoJSON() you do not have to wait for the .on('ready' event.