New Mapbox UI Styles

README.md

Fiddling with Tristen's UI theme ideas for a revamped mapbox.js, repo'd here

controls.css

.marker-tooltip {
  z-index:999999;
  position:absolute;
  }
.marker-popup {
  position:relative;
  left:-50%;
  max-width:400px;
  background:#fff;
  border:2px solid #4D4D4D;
  color:#202020;
  padding:10px;
  -webkit-user-select:auto;
     -moz-user-select:auto;
          user-select:auto;
  -webkit-box-shadow:2px 2px 5px -2px black;
          box-shadow:2px 2px 5px -2px black;
  -webkit-border-radius:3px;
          border-radius:3px;
  }
  .marker-popup:after,
  .marker-popup:before {
    top:100%;
    border:solid transparent;
    content:'';
    height:0;
    width:0;
    left:50%;
    position:absolute;
    pointer-events:none;
    }
  .marker-popup:after {
    border-top-color:#fff;
    border-width:15px;
    margin-left:-15px;
    }
  .marker-popup:before {
    border-top-color:#4d4d4d;
    border-width:18px;
    margin-left:-18px;
    }
.zoomer,
.map-legends,
.map-tooltip,
.map-fullscreen {
  position:absolute;
  border:1px solid #222;
  box-sizing:border-box;
  color:#fefefe;
  background:#4d4d4d;
  -webkit-border-radius:3px;
          border-radius:3px;
  }
.map-legends,
.map-tooltip {
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);
          box-shadow:0 1px 2px rgba(0,0,0,0.15);
  }

.zoomer,
.map-fullscreen,
.map-tooltip .close {
  text-indent:-999em;
  background: #4d4d4d url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAeCAYAAADnydqVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAF3SURBVGiB7ZlNboMwEEa/Qd3bPgEchZuVdNFz5SjkAjEcIJpucGqRVsKEJGT0vRUg2R7xND8COZ/PIHapXh0AeSwUbBwKNg4FG4eCjUPBxqFg41CwcSjYOB+vDqAU730PAMMwNK+N5Hk45zoR+cyfDcMgS9YWCU4vV0TaGGMPACGERlWP06FNyX4rqZ9wxq4Yx7FzzmEueQlrMrhW1WMIoQWASW4N4LRiL/JgigSLSJuEpqzFJFdE2m1DI4lUolX1UFXVRVW/lq4tEhxj7EMIbZa1wCQ3leytmdrCTVn23mt2e9q6Pfx37ozNz52Tyx3HsQOAEMJl6XpO0TvDOdfl13O5ABBj/F66n5T8D84GqrznXkv0o7I4J2Xu0iny3fDeq6oeAOAvuaUUlehcbuq5s57crA2E/JKm5XvlAutK9DVbY4z9JJoT9E4pKtF7wPqHjtnweHcWv51gUganaONQsHEo2DgUbBwKNg4FG4eCjUPBxqFg4/wAqTqvwsGZjK4AAAAASUVORK5CYII=) no-repeat 0 0;
  overflow:hidden;
  display:block;
  }
  .map-tooltip .close:active,
  .zoomer:active,
  .map-fullscreen:active {
    border-color:#101010;
    background-color:#404040;
    -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
            box-shadow:inset 0 1px 3px rgba(0,0,0,0.15);
    }

.map-tooltip .close {
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  background-position:-6px -6px;
  }

.zoomer {
  width:30px;
  height:30px;
  top:10px;
  left:10px;
  z-index:2;
  }

.zoomin {
  background-position:-31px -1px;
  left:39px;
  -webkit-border-radius:0 3px 3px 0;
          border-radius:0 3px 3px 0;
  }

.zoomout {
  background-position:-61px -1px;
  -webkit-border-radius:3px 0 0 3px;
          border-radius:3px 0 0 3px;
  }

.zoomdisabled {
  background-color:#707070;
  }

.map-fullscreen {
  width:30px;
  height:30px;
  background-position:-91px -1px;
  position:absolute;
  top:10px;
  left:74px;
  z-index:2;
  }

.map-fullscreen-map {
  position:fixed!important;
  width:auto!important;
  height:auto!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:99999999999;
  }

.map-legends {
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:999999;
  }
  .map-legends .map-legend {
    padding:10px;
    }

.map-tooltip {
  z-index:999999;
  padding:10px;
  top:10px;
  right:10px;
  max-width:350px;
  opacity:1;
  -webkit-transition:opacity 150ms;
     -moz-transition:opacity 150ms;
      -ms-transition:opacity 150ms;
       -o-transition:opacity 150ms;
          transition:opacity 150ms;
  -webkit-user-select:auto;
     -moz-user-select:auto;
          user-select:auto;
  }

.map-legends,
.map-tooltip {
  min-width:180px;
  max-width:330px;
  max-height:400px;
  width:220px\8; /*< IE 9*/
  }

.map-movetip {
  position:absolute;
  z-index:999999;
  background:#4d4d4d;
  padding:10px;
  max-width:300px;
  }

.map-fade { opacity:0; }

.map-tooltip .close {
  display:block;
  position:absolute;
  top:0;
  right:0;
  }

.map-mobile-body .map-tooltip {
  position:absolute;
  top:50px;
  }

.zoombox-box,
.boxselector-box {
  margin:0;
  padding:0;
  border:1px dashed #888;
  background:rgba(255,255,255,0.25);
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  display:none;
  }

.map-point-div {
  width:10px;
  height:10px;
  margin-left:-5px;
  margin-top:-5px;
  background:#4d4d4d;
  border:1px solid #333;
  -webkit-border-radius:5px;
          border-radius:5px;
  }

.map-attribution {
  position:absolute;
  background-color:rgba(255,255,255,0.7);
  color:#333;
  font-size:11px;
  line-height:20px;
  z-index:99999;
  text-align:center;
  padding:0 5px;
  bottom:0;
  left:0;
  text-decoration:none;
  }

.map-attribution.map-g {
  left:65px;
  bottom:4px;
  background:transparent;
  }

@media
  only screen and (-webkit-min-device-pixel-ratio : 2),
  only screen and (min-device-pixel-ratio : 2) {
    .zoomer,
    .map-fullscreen,
    .map-tooltip .close {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAA8CAYAAABYfzddAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAbrwAAG68BXhqRHAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKJSURBVHic7d1BcptAEEbhaSpH0SkozTq5ldCtovWouIR9l8kmpJSxBCihB35430oLbIGlZ1APZVvOOQDQ1Ky9AwD+HQEDwggYEEbAgDACBoQRMCCMgAFhBAwII2BAGAEDwggYEEbAgDACBoQRMCCMgAFhBAwII2BAGAEDwggYEPZt7R3Yuxjjz5zz9xBCMLNbSunH2vuE5cUYu5zzZWq7+/1uSz6v6xm4bdtT27Ynr+0VDPGWj7EvKaXOzK61n9ct4Bhj1zTNR9M0HzHGbuntga1ZI2KXgNu2PT1eTuScL2NRlpcfOefL3s7EOIbaEVcbYr2KeO5nBwBfuQTc9/3ns99CZcSv4jWza9/3nx77BniqfUJym0KnlLoYYygP5nfEfx6XX2dm15RS57VfgJcy3uEk5hm06zLSWMTPtideqHoW7/BeftbAUqzG/0aac1mhGu/jOu//UlgnPtrxzjEWb7mN1DrwYGoypxpvCMuu7SqsEx/teKfMiTcEv+k0t1ICI95Z/pw6EXmcpKoEPHUJPbVOvGVmdtvi9/JytOOdu/y51lWk+2fgd8bqypfSr5zP579+wEt/BoKv4fUrhlKbiDcE5yn02DpvCF+n0cMS094ihr5Xy59rn3TcAh6Ld2y8TsTYqvK9una8IVS6F3pQHvCryRz3QmPrthBvCBWn0LXH68ARVLkXes54vdyee6GxZVtZOXGdQg+XwXNjfHd7BUyhtZWvX2ntS2nXKfS7Ie4p3IGZ3R7/pM7a+4NlrT10rXIvNAAf3EoJCCNgQBgBA8IIGBBGwIAwAgaEETAgjIABYQQMCCNgQBgBA8IIGBBGwIAwAgaEETAgjIABYQQMCCNgQBgBA8J+AdGSp6T2TOLKAAAAAElFTkSuQmCC);
      background-size: 150px 30px;
      }
  }

index.html

<!DOCTYPE html>
<html>
<head>
  <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' />
  <!--New UI stylesheet override below-->
  <link href='controls.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>
    mapbox.load('landplanner.map-b31zy3ud,landplanner.enstrat_dni_101111b,landplanner.map-gaqnw8oj', function(o) {
        var map = mapbox.map('map');
        map.addLayer(o.layer).zoom(4).center({ lat: 40, lon: -100 });
        map.interaction.auto();

        // Attribute map
        map.ui.attribution.add()
            .content('<a href="http://mapbox.com/about/maps">Terms &amp; Feedback</a>');
        map.ui.legend.add();
        map.ui.zoomer.add();
        map.ui.fullscreen.add(); 
        mapbox.share().add();
    });
</script>
</body>
</html>