Viewing an older version of MapBox.js. Check out v1.5.0 for the latest.

Centering markers on click

Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centering markers on click</title>
  
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<div id='map'></div>
<script>
  // Create map
  mapbox.auto('map', 'examples.map-zr0njcqy', function(map, tiledata) {

    // Replace marker factory function with our version
    tiledata.markers.factory(function(m) {

        // Create a marker using the simplestyle factory
        var elem = mapbox.markers.simplestyle_factory(m);

        // Add function that centers marker on click
        MM.addEvent(elem, 'click', function(e) {
            map.ease.location({
              lat: m.geometry.coordinates[1],
              lon: m.geometry.coordinates[0]
            }).zoom(map.zoom()).optimal();
        });

        return elem;
    });
  });
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.