Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 106 lines (83 sloc) 2.403 kb

Zoom Controls

Class Name: .zoomer

Markup

<a href="#" class="zoomer zoomin">+</a>
<a href="#" class="zoomer zoomout">-</a>

.zoomer {
  display:block;
  position:absolute;
  border:1px solid #ccc;
  background:#fff;
  border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0 1px 3px;
  -webkit-box-shadow:rgba(0,0,0,0.1) 0 1px 3px;
  text-indent:-999em;
  background-image:url(map-controls.png);
  background-repeat:no-repeat;
  overflow:hidden;
  width:28px;
  height:28px;
  top:10px;
  left:10px;
  z-index:2;
}

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

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

Tooltips

Class Name: .map-tooltip

<div class="map-tooltip map-tooltip-0">
    <!-- Tooltip content -->
</div>

.map-tooltip {
  background:#333;
  color:#fff;
  display:block;
  position:absolute;
  z-index:999999;
  left:10px;
  top:10px;
  max-width:300px;
  padding:10px;
  border:1px solid #ccc;
  border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:rgba(0,0,0,0.1) 0 1px 3px;
  -webkit-box-shadow:rgba(0,0,0,0.1) 0 1px 3px;
  -webkit-user-select:auto;
}

An optional classname of .map-fade is added to .map-tooltip when you initially mouse over/out on an element. This is added when animation is set to true. This additional class provides an easy way to apply fading animation using css. The default styling look like this:

.map-tooltip {
  opacity:1;
  -webkit-transition:opacity 150ms;
  -moz-transition:opacity 150ms;
}
.map-fade { opacity:0; }

Legend

Class Names: .map-legends, .map-legend

<div class="map-legends">
    <div class="map-legend">
        <!-- Legend content -->
    </div>
</div>

Fullscreen

Class Name: .map-fullscreen

Markup

<a class="map-fullscreen" href="#fullscreen">fullscreen</a>

Attribution

Class Name: .map-attribution

Markup

<div class="map-attribution map-mm"></div>
Something went wrong with that request. Please try again.