Tabs in marker tooltips

Display simple CSS tabs in marker tooltips populated by marker property data.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Tabs in marker tooltips</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.map .tabs-ui {
  position:relative;
  min-height:200px;
  width:240px;    
  clear:both;
  margin:25px 0;
  }
.map .tab {
  float:left;
  }
.map .tab label {
  background:#eee;
  padding:10px;
  border:1px solid #ccc;
  margin-left:-1px;
  position:relative;
  left:1px;
  top:1px;
  cursor:pointer;
  }
.map .tab label:hover {
  background:#f8f8f8;
  }
.map .tab [type=radio] {
  display:none;
  }
.map .tab .content {
  background:white;
  position:absolute;
  top:28px;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
  border:1px solid #ccc;
  }
.map .tab [type=radio]:checked ~ label {
  background:white;
  border-bottom:1px solid white;
  z-index:2;
  }
.map .tab [type=radio]:checked ~ label ~ .content {
  z-index:1;
  }
</style>

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

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.streets').setView([37.9, -77], 7);
var markers = L.mapbox.featureLayer().addTo(map);

markers.setGeoJSON({
  type: 'FeatureCollection',
  features: [{
      type: 'Feature',
      geometry: {
          type: 'Point',
          coordinates: [-77, 37.9]
      },
      properties: {
          title: 'Marker one',
          description: 'This marker has a description about Marker One.'
      }
  }, {
      type: 'Feature',
      geometry: {
          type: 'Point',
          coordinates: [-78, 36.5]
      },
      properties: {
          title: 'Marker two',
          description: 'This marker has a description about Marker Two.'
      }
  }]
});

var info = document.getElementById('info');

// Iterate through each feature layer item,
// and create a custom HTML group for each. In this example
// we create a tabs menu and put each property in a respective tab.
markers.eachLayer(function(m) {
    // Shorten m.feature.properties to p for convenience.
    var p = m.feature.properties;

    var tabs = document.createElement('div');
    tabs.className = 'tabs-ui';

    for (var key in p) {
        var tab = document.createElement('div');
        tab.className = 'tab';

        var input = document.createElement('input');
        input.type = 'radio';
        input.id = idify(key);
        input.name = 'tab-group'; // For your own needs, you might want this to be unique.
        if (key === 'title') input.setAttribute('checked', true);

        tab.appendChild(input);

        tab.innerHTML += '<label for=' + idify(key) + '>' + key + '</label>' +
        '<div class="content">' +
            p[key] +
        '</div>';

        tabs.appendChild(tab);
    }

    m.bindPopup(tabs);
});

function idify(str) { return str.replace(/\s+/g, '-').toLowerCase(); }
</script>
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