D3 Examples - Programmatic marker opening

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    #show-c { position:absolute; right:10px; top:10px; z-index:999; font-size:30px; }
  </style>
</head>
<body>
<button id='show-c'>show c</button>
<div id='map'></div>
<script>
    // GeoJSON input features
    // The image and url properties of the features will be used in
    // the tooltips
    var features = [{
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
        "properties": { "id": "a", "title": "a marker" }
    }, {
        "geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
        "properties": { "id": "b", "title": "b marker" }
    }, {
        "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
        "properties": { "id": "c", "title": "c marker" }
    }];
​
    // Create map
    var map = mapbox.map('map');
    map.addLayer(mapbox.layer().id('examples.map-vyofok3q'));
​
    // Create and add marker layer
    var markerLayer = mapbox.markers.layer().features(features);
    var interaction = mapbox.markers.interaction(markerLayer);
    map.addLayer(markerLayer);
​
    document.getElementById('show-c').onclick = function() {
        var markers = markerLayer.markers();
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].data.properties && markers[i].data.properties.id === 'c') {
                markers[i].showTooltip();
            }
        }
    };
​
    // Set iniital center and zoom
    map.centerzoom({
        lat: 45.908,
        lon: -78.525
    }, 5);
</script>
</body>
</html>
​
    