<!DOCTYPE html >
<html>
<head>
  <meta charset='UTF-8'/>
  <meta name='robots' content='index'/>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <meta name='description' content='A Moving tooltip'/>
  <title>Movetip | MapBox</title>

  

  <link href='//www.mapbox.com/base/latest/base.css' rel='stylesheet' />
  <link href='https://122e4e-mapbox.global.ssl.fastly.net/css/site.css' rel='stylesheet' />
  <!--[if IE 9]><link href='https://122e4e-mapbox.global.ssl.fastly.net/css/site-ie9.css' rel='stylesheet' /><![endif]-->
  <link rel='shortcut icon' href='https://122e4e-mapbox.global.ssl.fastly.net/img/favicon.ico' type='image/x-icon' />
  <link rel='alternate' type='application/rss+xml' title='RSS' href='https://122e4e-mapbox.global.ssl.fastly.net/blog/blog.rss' />

  <!--[if lt IE 9 ]><script src='https://122e4e-mapbox.global.ssl.fastly.net/js/redirect-ie.js'></script><![endif]-->
  <script src='https://122e4e-mapbox.global.ssl.fastly.net/api/session.js'></script>
  <script src="//cdn.optimizely.com/js/429140220.js"></script>
  <script>
  var analytics=analytics||[];(function(){var e=['identify','track','trackLink','trackForm','trackClick','trackSubmit','page','pageview','ab','alias','ready','group'],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement('script');t.type='text/javascript',t.async=!0,t.src=('https:'===document.location.protocol?'https://':"http://")+'d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/'+e+'/analytics.min.js';var n=document.getElementsByTagName('script')[0];n.parentNode.insertBefore(t,n)};
  analytics.load(window.location.hostname.indexOf('mapbox.com') !== -1 ? 'fl0c8p240n' : '0biiejpgfj');
  </script>
  <script src='https://js.stripe.com/v2/'></script>
  <script>
  Stripe.setPublishableKey(window.location.hostname.indexOf('mapbox.com') !== -1 ?
    'pk_live_hI6mmOTIg7KkywK6vo3vJvpk' : 'pk_test_gmIyREg3sKzAiyMkAEeCsxUG');
  </script>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet' />
  <script src='https://122e4e-mapbox.global.ssl.fastly.net/js/site.js'></script>
  

</head>
<body class=''>


<div class='masthead fill-white keyline-bottom col12 animate clearfix row2'>
  <script type='text/template' id='nav-template'>
    <% if (!user.id) { %>
    <a class='mb-logo' href='https://122e4e-mapbox.global.ssl.fastly.net/'></a>

    <div class='strong hide-mobile'>
      <a href='https://122e4e-mapbox.global.ssl.fastly.net/tour/' class=' animate inline pad1 round quiet truncate'>Tour</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/' class=' animate inline pad1 round quiet truncate'>Showcase</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/blog/' class=' animate inline pad1 round quiet truncate'>Blog</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/plans/' class=' animate inline pad1 round quiet truncate'>Plans</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/help/' class=' animate inline pad1 round quiet truncate'>Help</a>
      <div class='authmenu contain fr center keyline-all'><!--
        --><a href='#signin' class='action signin inline animate keyline-right pad1 quiet truncate'>Sign in</a><!--
        --><a href='#signup' class='action signup inline animate pad1 quiet truncate'>Sign up</a>
      </div>
    </div>

    <div class='show-mobile contain drop'>
      <a href='#' class='icon menu round quiet droplink keyline-all'></a>
      <div class='dropdown strong fill-white keyline-all round animate'>
        <div>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/tour/'>Tour</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/'>Showcase</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/blog/'>Blog</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/plans/'>Plans</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/help/'>Help</a>
        </div>
        <div>
          <a href='#signin' class='signin'>Sign in</a>
          <a href='#signup' class='signup'>Sign up</a>
        </div>
      </div>
    </div>

    <% } else { %>
    <div id='authed-logo'>
      <!-- Back button -->  
      <% if (obj._type === 'tileset' || App.param('from') === 'data') { %>
        <a class='mb-logo' href='https://122e4e-mapbox.global.ssl.fastly.net/data'> </a>
        <a href='https://122e4e-mapbox.global.ssl.fastly.net/data' class='return-to-previous icon return quiet animate small hide-mobile'>Return to data</a>
      <% } else if (App.param('from') === 'projects') { %>
        <a class='mb-logo' href='https://122e4e-mapbox.global.ssl.fastly.net/projects'> </a>
        <a href='https://122e4e-mapbox.global.ssl.fastly.net/projects' class='return-to-previous icon return quiet animate small hide-mobile'>Return to projects</a>
      <% } else { %>      
        <a class='mb-logo' href='https://122e4e-mapbox.global.ssl.fastly.net/editor/#app'> </a>
        <a href='https://122e4e-mapbox.global.ssl.fastly.net/editor/#app' class='return-to-previous icon return quiet animate small hide-mobile'>Return to editor</a>
      <% } %>
    </div>

    
      <a href='#dropdown' class='block authmenu droplink quiet avatar icon menu round animate fr' style='background-image:url("<%= user.avatar %>")'></a>
      <div class='dropdown fill-white keyline-all round animate'>
        <div class='plan contain'>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/plans/' class='plan-icon big <%= user.plan.id.replace('2', '').replace('-annual', '') %>'>
          </a>
          <small class='quiet truncate'><%= _(user.name || user.id).escape() %></small>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/plans/' class='truncate strong'>
            <%= _(user.plan?user.plan.name:'').escape() %> 
            <span class='quiet'>(<%= numeral(user.plan.views).format('0a') %> views)</span>
          </a>
        </div>
        <div class='show-mobile strong'>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/dashboard/' class='authed '>Dashboard</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/projects/' class='authed '>Projects</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/data/' class='authed '>Data</a>
        </div>
        <div class='strong'>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/account/'>Account</a>
          <% if (App.user.group === 'admin') { %><a href='https://122e4e-mapbox.global.ssl.fastly.net/admin/'>Admin</a><% } %>
          <a href='#signout' id='signout'>Sign out</a>
        </div>
        <div class='strong'>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/tour/'>Tour</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/'>Showcase</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/blog/'>Blog</a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/help/'>Help</a>
        </div>
      </div>
      <div class='hide-mobile strong fr'>
         <a href='https://122e4e-mapbox.global.ssl.fastly.net/dashboard/' class='quiet authed icon dashboard animate round pad1 truncate inline '>Dashboard</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/projects/' class='quiet authed icon folder animate round pad1 truncate inline '>Projects</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/data/' class='quiet authed icon book animate round pad1 truncate inline '>Data</a>
      </div>
    
  <% } %>
  </script>

  <div class='limiter clearfix'>
    <nav id='nav' class='col12 text-right pad2y contain clearfix noprint '>
      <script>document.write(App.nav());</script>
    </nav>
  </div>
</div>

<div class='clearfix limiter'><link href='/mapbox.js/assets/css/site.css' rel='stylesheet' />
<script src='/mapbox.js/assets/js/prettify.js'></script>
<script src='/mapbox.js/assets/js/site.js'></script>

<div class='pad4y col12 clearfix'>
  <div class='col6'>
    <h3 class='tag small'>
      <a href='https://122e4e-mapbox.global.ssl.fastly.net/developers' class='quiet'>developers</a>
    </h3>
    <h2>
      MapBox.js
      <a class='version' href='https://github.com/mapbox/mapbox.js/blob/master/CHANGELOG.md#v150'>
      
        <sup class='fill-grey small'>v1.0.0</sup>
      
      </a>
    </h2>
  </div>
</div>

<nav class='pill mobile-cols col12 clearfix space-bottom'>
    <a href='/mapbox.js/' class='col4 button '>Overview</a>
  
    <a href='/mapbox.js/api/v1.5.0/' class='col4 button '>API</a>
    <a href='/mapbox.js/example/v1.0.0/' class='col4 button active'>Examples</a>
  
</nav>


<div class='col12 round box clearfix contain'>
  <div class='clearfix'>
    

    <div class='clearfix'>
      <!-- Navigation -->
      <div class='col3 keyline-right'>
        <div class='doc-search pad2 keyline-bottom'>
          <fieldset class='with-icon'>
            <span class='icon search'></span>
            <input id='search-filter' type='text' class='stretch' placeholder='Filter'>
          </fieldset>
        </div>

        <div class='doc-nav'>
          
          <div class='section'>
            <strong class='heading col12 pad2 '>Animation</strong>
            <div id='animation' class='examples examples-animation'>
            
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/dynamically-drawing-a-line' class='col12 pad1y pad2x keyline-top '>Dynamically Drawing a Line</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/centering-markers' class='col12 pad1y pad2x keyline-top '>Centering Markers</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/animate-marker-along-line' class='col12 pad1y pad2x keyline-top '>Move Marker Along Line</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Geocoding</strong>
            <div id='geocoding' class='examples examples-geocoding'>
            
              
                <a href='/mapbox.js/example/v1.0.0/map-center-geocoding' class='col12 pad1y pad2x keyline-top '>Initially Position Map With Geocode</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/geocoding' class='col12 pad1y pad2x keyline-top '>Geocoding</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/geocoder-keep-open' class='col12 pad1y pad2x keyline-top '>Geocoder keepOpen</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Handlers</strong>
            <div id='handlers' class='examples examples-handlers'>
            
              
                <a href='/mapbox.js/example/v1.0.0/zoom-to-double-click' class='col12 pad1y pad2x keyline-top '>Zoom to Double Click</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/external-layers' class='col12 pad1y pad2x keyline-top '>External Layers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/disable-zooming-panning' class='col12 pad1y pad2x keyline-top '>Disable Zooming and Panning</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Layers</strong>
            <div id='layers' class='examples examples-layers'>
            
              
                <a href='/mapbox.js/example/v1.0.0/zoom-lens' class='col12 pad1y pad2x keyline-top '>Zoom Lens</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/wms' class='col12 pad1y pad2x keyline-top '>WMS</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/theme' class='col12 pad1y pad2x keyline-top '>Theme</a>
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/markers-as-links' class='col12 pad1y pad2x keyline-top '>Markers As Links</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/linking-to-external-data' class='col12 pad1y pad2x keyline-top '>Linking to external data</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/layers-control' class='col12 pad1y pad2x keyline-top '>Layers Control</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/layers' class='col12 pad1y pad2x keyline-top '>Layers</a>
              
            
              
            
              
            
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/custom-popup' class='col12 pad1y pad2x keyline-top '>Custom Popup</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/compositing' class='col12 pad1y pad2x keyline-top '>Compositing</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Legend</strong>
            <div id='legend' class='examples examples-legend'>
            
              
                <a href='/mapbox.js/example/v1.0.0/legend-position' class='col12 pad1y pad2x keyline-top '>Legend in a Custom Position</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/legend' class='col12 pad1y pad2x keyline-top '>Legend</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/custom-legend' class='col12 pad1y pad2x keyline-top '>Custom Legend</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Markers</strong>
            <div id='markers' class='examples examples-markers'>
            
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/single-marker' class='col12 pad1y pad2x keyline-top '>Single Marker</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/show-tooltips-on-hover' class='col12 pad1y pad2x keyline-top '>Show Tooltips on Hover</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/retina' class='col12 pad1y pad2x keyline-top '>Retina</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/point-in-polygon' class='col12 pad1y pad2x keyline-top '>Point in Polygon</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/open-popup-externally' class='col12 pad1y pad2x keyline-top '>Open Popup Programmatically</a>
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/markers-with-image-slideshow' class='col12 pad1y pad2x keyline-top '>Marker Tooltips with Image Slideshow</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/markers-from-csv' class='col12 pad1y pad2x keyline-top '>Loading CSV into Markers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/marker-tooltips-outside-map' class='col12 pad1y pad2x keyline-top '>Marker Tooltips Outside the Map</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/marker-movement' class='col12 pad1y pad2x keyline-top '>Marker Movement</a>
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/geojson-marker-from-url' class='col12 pad1y pad2x keyline-top '>GeoJSON Marker from URL</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/filtering-markers' class='col12 pad1y pad2x keyline-top '>Filtering Markers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/filtering' class='col12 pad1y pad2x keyline-top '>Searching for Points</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/draggable-marker' class='col12 pad1y pad2x keyline-top '>Draggable Marker</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/divicon' class='col12 pad1y pad2x keyline-top '>Using L.divIcon to create markers with HTML</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/cycle-markers' class='col12 pad1y pad2x keyline-top '>Cycling Through Markers</a>
              
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/change-marker-color-click' class='col12 pad1y pad2x keyline-top '>Change Marker Color on Click</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/centering-markers' class='col12 pad1y pad2x keyline-top '>Centering Markers</a>
              
            
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Plugins</strong>
            <div id='plugins' class='examples examples-plugins'>
            
              
                <a href='/mapbox.js/example/v1.0.0/leaflet-markercluster' class='col12 pad1y pad2x keyline-top '>Leaflet.markercluster</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/leaflet-draw' class='col12 pad1y pad2x keyline-top '>Leaflet.draw</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Tooltips</strong>
            <div id='tooltips' class='examples examples-tooltips'>
            
              
                <a href='/mapbox.js/example/v1.0.0/show-tooltips-on-hover' class='col12 pad1y pad2x keyline-top '>Show Tooltips on Hover</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/markers-with-image-slideshow' class='col12 pad1y pad2x keyline-top '>Marker Tooltips with Image Slideshow</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>User Interface</strong>
            <div id='ui' class='examples examples-ui'>
            
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/zoom-control-position' class='col12 pad1y pad2x keyline-top '>Zoom Control Position</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/zoom-bar' class='col12 pad1y pad2x keyline-top '>Zoom Bar</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/youtube' class='col12 pad1y pad2x keyline-top '>YouTube</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/toggling-ui' class='col12 pad1y pad2x keyline-top '>Toggling UI</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/' class='col12 pad1y pad2x keyline-top '>A Simple Map</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/scale-control' class='col12 pad1y pad2x keyline-top '>Scale Control</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/pan-vertical-zoom' class='col12 pad1y pad2x keyline-top '>Pan and Vertical Zoom</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/opacity' class='col12 pad1y pad2x keyline-top '>Opacity control</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/movetip' class='col12 pad1y pad2x keyline-top  active'>Movetip</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/mouse-position' class='col12 pad1y pad2x keyline-top '>Mouse Position</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/markers-only-at-zoom-level' class='col12 pad1y pad2x keyline-top '>Markers Only At One Zoom Level</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/map-navigation' class='col12 pad1y pad2x keyline-top '>Map Navigation to Places</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/listing-markers' class='col12 pad1y pad2x keyline-top '>Listing Markers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/interactivity-outside-map-layer' class='col12 pad1y pad2x keyline-top '>Interactivity Outside of Map</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/geolocation' class='col12 pad1y pad2x keyline-top '>Geolocation</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/geocoding' class='col12 pad1y pad2x keyline-top '>Geocoding</a>
              
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/custom-marker-tooltip' class='col12 pad1y pad2x keyline-top '>Custom Marker Tooltips</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/custom-marker' class='col12 pad1y pad2x keyline-top '>Custom Marker Icons</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Vector Overlays</strong>
            <div id='vector' class='examples examples-vector'>
            
              
                <a href='/mapbox.js/example/v1.0.0/polyline' class='col12 pad1y pad2x keyline-top '>Polylines</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/non-exclusive-markers' class='col12 pad1y pad2x keyline-top '>Non-Exclusive Markers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/line-marker' class='col12 pad1y pad2x keyline-top '>Line from Markers</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/dynamically-drawing-a-line' class='col12 pad1y pad2x keyline-top '>Dynamically Drawing a Line</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/cross-date-line' class='col12 pad1y pad2x keyline-top '>Line Crossing the Date Line</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/animate-marker-along-line' class='col12 pad1y pad2x keyline-top '>Move Marker Along Line</a>
              
            
            </div>
          </div>
          
          <div class='section'>
            <strong class='heading col12 pad2 keyline-top'>Zoom</strong>
            <div id='zoom' class='examples examples-zoom'>
            
              
            
              
                <a href='/mapbox.js/example/v1.0.0/paddingtopleft' class='col12 pad1y pad2x keyline-top '>paddingTopLeft - Reserve space on the map for content</a>
              
            
              
                <a href='/mapbox.js/example/v1.0.0/change-zoom-control-location' class='col12 pad1y pad2x keyline-top '>Change Zoom Control Location</a>
              
            
            </div>
          </div>
          
        </div>
      </div>

      <!-- Map + code sample -->
      <div class='col9'>
        <div class='pad2 doc example-header'>
          <h3>Movetip</h3>
          <span class='description'>A Moving tooltip</span>
        </div>
        <div id='demo' class='doc'><div id='map'></div>
<script>
var map = L.mapbox.map('map', 'examples.map-8ced9urs');
map.gridControl.options.follow = true;
</script>
</div>
        <div id='snippet' class='doc space-bottom keyline-bottom'>
        <a class='button icon clipboard' href='#' id='copy'>Select all</a>
        <div id='code' class='doc'>

<div class='code-header quiet'>
<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">utf-8</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;title&gt;</span>Movetip<span class="nt">&lt;/title&gt;</span>
  
  <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&#39;viewport&#39;</span> <span class="na">content=</span><span class="s">&#39;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&#39;</span> <span class="nt">/&gt;</span>
  <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js&#39;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css&#39;</span> <span class="na">rel=</span><span class="s">&#39;stylesheet&#39;</span> <span class="nt">/&gt;</span>
  
  <span class="nt">&lt;style&gt;</span>
    <span class="nt">body</span> <span class="p">{</span> <span class="k">margin</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="p">}</span>
    <span class="nf">#map</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span><span class="k">absolute</span><span class="p">;</span> <span class="k">top</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="k">bottom</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span><span class="m">100</span><span class="o">%</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
</code></pre></div>
</div>

<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&#39;map&#39;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="nx">L</span><span class="p">.</span><span class="nx">mapbox</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="s1">&#39;map&#39;</span><span class="p">,</span> <span class="s1">&#39;examples.map-8ced9urs&#39;</span><span class="p">);</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">gridControl</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">follow</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div>

<div class='code-footer'>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
</div>
  </div><!-- end #code -->
</div>
      </div>
    </div>
  </div>
  <div class='col12 keyline-top center small'>
    <div class='pad2'>
      The code and documentation to <a href='http://github.com/mapbox/mapbox.js'>mapbox.js is hosted on GitHub</a> where you can contribute changes and improvements.
    </div>
  </div>
</div>

<div class='footer clearfix space-bottom'>
  <div class='col-section footer-label col6 pad4y'>
    <h3>Developer Tools</h3>
    <small>Documentation for all our projects.</small>
  </div>
  <div class='col2 pad4y strong small'>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/developers/api/'>Core API</a>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/mapbox.js/api/'>mapbox.js</a>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/map-sites/'>Map site templates</a>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/mapbox-ios-sdk/'>MapBox iOS SDK</a>
  </div>
  <div class='col2 pad4y strong small'>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/mbxmapkit/'>MBXMapKit for iOS &amp; OS X</a>
    <a class='col12' href='https://122e4e-mapbox.global.ssl.fastly.net/geo-for-google-docs/'>Geo for Google Docs</a>
    <a class='col12' href='https://github.com/mapbox/clustr'>Clustr</a>
  </div>
</div>

<script src='/mapbox.js/assets/js/site.js'></script>

<script>
  $(function () {
    var example = new Docs();
    $(example.copyCode);
    
    example.bindSearch($('.doc-search input'), $('.doc-nav'), function() {
      $('.section').each(function(){
          if($(this).find('.filtered').length !== 0) {
              $(this).parent('.section').show();
          } else {
              $(this).parent('.section').hide();
          }
      });
    });
  });
</script>
</div>


<div class='footer keyline-top pad4y fill-white clearfix small'>
  <div class='limiter'>
    <div class='col6'>
      <div class='col4'>
        
        <a id='footer-tour' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/tour/'>Tour</a>
        
        <a id='footer-showcase' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/'>Showcase</a>
        
        <a id='footer-about' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/about/'>About</a>
        
        <a id='footer-plans' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/plans/'>Plans</a>
        
      </div>
      <div class='col4'>
        
        <a id='footer-help' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/help/'>Help</a>
        
        <a id='footer-blog' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/blog/'>Blog</a>
        
        <a id='footer-developers' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/developers/'>Developers</a>
        
        <a id='footer-contact' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/contact/'>Contact</a>
        
      </div>
      <div class='col4'>
        
        <a id='footer-tilemill' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/tilemill/'><strong>TileMill</strong></a>
        
        <a id='footer-maki' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/maki/'><strong>Maki</strong></a>
        
        <a id='footer-status' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/status/'><strong>Status</strong></a>
        
        <a id='footer-jobs' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/jobs/'><strong>Jobs</strong></a>
        
      </div>
    </div>
    <div class='col6 newsletter'>
      <form action='http://mapbox.us2.list-manage1.com/subscribe/post?u=1b29ad842d113cece02035883&amp;id=6cbe531fd0' method='post' id='mc-embedded-subscribe-form' name='mc-embedded-subscribe-form' class='space-bottom validate' target='_blank'>
        <fieldset class='pill mobile-cols col12 with-icon clearfix'>
          <span class='icon mail quiet'></span>
          <input type='text' value='' placeholder='Subscribe to our newsletter' name='EMAIL' class='col9 required email' id='mce-EMAIL'>
          <input type='submit' value='Submit' name='subscribe' id='mc-embedded-subscribe' class='col3'>
        </fieldset>
      </form>
      Follow MapBox on <a href='https://twitter.com/mapbox' class='strong'>Twitter</a> or <a href='https://www.facebook.com/MapBoxMaps' class='strong'>Facebook</a>
    </div>
  </div>
</div>

<div class='footer-copyright fill-white pad2y small center noprint'>
  <a href='https://122e4e-mapbox.global.ssl.fastly.net/tos'>Terms of service</a> +
  <a href='https://122e4e-mapbox.global.ssl.fastly.net/privacy'>Privacy policy</a>
  &copy; MapBox
</div>



<div id='modal'>
  <div class='modal-mask fill-darken2 modal animate'></div>
  <div id='modal-content' class='contain modal modal-content animate'></div>
</div>

<script type='text/html' id='template-modal-auth'>
<div class='col12 modal-popup modal-auth'>
  <div class='clip sliding h active2'>
    <form id='auth-reset' class='animate' method='post'>
      <div class='col6 margin3 modal-body fill-white contain'>
        <% if (obj.close) { %>
        <a href='#close' class='quiet big icon fr close'></a>
        <% } else { %>
        <a href='/' class='quiet big icon fr close escape'></a>
        <% } %>
        <div class='pad2y pad4x center keyline-bottom top-illustration'>
          <span class='inline icon big mail'></span>
        </div>
        <div class='pad2y pad4x keyline-bottom'>
          <fieldset>
            <label>Email</label>
            <input type='text' name='email' class='stretch' />
          </fieldset>
        </div>
        <div class='pad2y pad2x clearfix'>
          <div class='col8 pad2x'>
            <input class='col12' type='submit' value='Send reset instructions' />
          </div>
          <small class='col4 pad1y text-right'>
            <a class='rcon next slide' href='#active2'>Sign in</a>
          </small>
        </div>
      </div>
    </form>
    <form id='auth-signin' class='animate' method='post'>
      <div class='col6 margin3 modal-body fill-white contain'>
        <% if (obj.close) { %>
        <a href='#close' class='quiet big icon fr close'></a>
        <% } else { %>
        <a href='/' class='quiet big icon fr close escape'></a>
        <% } %>
        <div class='pad2y pad4x center keyline-bottom top-illustration'>
          <span class='inline icon big lock'></span>
        </div>
        <div class='pad2y pad4x keyline-bottom'>
          <fieldset>
            <label>Username or email</label>
            <% if (obj.username) { %>
            <input type='text' name='username' autocapitalize='off' class='stretch' tabindex='1' value='<%= obj.username %>' readonly />
            <% } else { %>
            <input type='text' name='username' autocapitalize='off' class='stretch' tabindex='1' />
            <% } %>
          </fieldset>
          <fieldset>
            <label>Password <small class='inline'><a href='#active1' class='slide' tabindex='3'>Forgot it?</a></small></label>
            <input type='password' name='password' class='stretch' tabindex='2' />
          </fieldset>
        </div>
        <div class='pad2y pad4x clearfix'>
          <div class='col6'>
            <input class='col12' type='submit' value='Sign in' />
          </div>
          <% if (!obj.username) { %>
          <small class='col6 pad1y text-right'>
            Need an account? <a class='rcon next slide' href='#active3'>Sign up</a>
          </small>
          <% } %>
        </div>
      </div>
    </form>
    <form id='auth-signup' class='animate' method='post'>
      <div class='col6 margin3 modal-body fill-navy-dark fill-stars dark contain'>
        <% if (obj.close) { %>
        <a href='#close' class='big icon fr close'></a>
        <% } else { %>
        <a href='/' class='big icon fr close escape'></a>
        <% } %>
        <div class='pad2y pad4x keyline-bottom center'>
          <span class='inline icon dot big account'></span>
        </div>
        <div class='pad2y pad2x keyline-bottom'>
          <fieldset class='col12 pad2x'>
            <label>Username</label>
            <input type='text' name='username' autocapitalize='off' class='stretch'/>
          </fieldset>
          <fieldset class='col6 pad2x'>
            <label>First name</label>
            <input type='text' name='firstname' class='stretch'/>
          </fieldset>
          <fieldset class='col6 pad2x'>
            <label>Last name</label>
            <input type='text' name='lastname' class='stretch' />
          </fieldset>
          <fieldset class='col6 pad2x'>
            <label>Email</label>
            <input type='text' name='email' class='stretch' />
          </fieldset>
          <fieldset class='pad2x'>
            <label>Password</label>
            <input type='password' name='password' class='stretch' />
          </fieldset>
          <div class='pad2x'>
            <small>You agree to the MapBox <a href='http://mapbox.com/tos/'>Terms of Service</a> and <a href='http://mapbox.com/privacy/'>Privacy Policy</a>.</small>
          </div>
        </div>
        <div class='pad2y pad2x clearfix'>
          <small class='col6 pad2x pad1y'>
            <a class='icon prev slide' href='#active2'>Sign in</a>
          </small>
          <div class='col6 pad2x text-right'>
            <input class='col12' type='submit' value='Sign up for MapBox' />
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
</script>

<script type='text/html' id='template-modal-payment'>
<div class='col12 modal-popup modal-payment'>
    <form id='payment' class='round animate'>
      <div class='margin3 col6 modal-body fill-white contain'>
        <% if (obj.close) { %><a href='#close' class='quiet big icon fr close'></a><% } %>
        <div class='pad2y pad4x center keyline-bottom top-illustration'>
          <span class='inline icon big cart'></span>
        </div>
        <div class='pad4y pad2x keyline-bottom clearfix'>
          <fieldset class='pad2x col12'>
            <label>Card number</label>
            <input type='text' name='number' class='stretch' />
          </fieldset>
          <div class='credit-cards pad2 center space fill-light round space-bottom'>
            <span class='credit-card visa'></span>
            <span class='credit-card mastercard'></span>
            <span class='credit-card american-express'></span>
            <span class='credit-card jcb'></span>
            <span class='credit-card discover'></span>
            <span class='credit-card diners-club'></span>
          </div>
          <fieldset class='pad2x col4'>
            <label>Expiration</label>
            <input type='text' name='exp' class='stretch' placeholder='MM/YYYY' />
          </fieldset>
          <fieldset class='pad2x col4'>
            <label>CVC</label>
            <input type='text' name='cvc' class='stretch' />
          </fieldset>
          <fieldset class='pad2x col4'>
            <label>Postal code</label>
            <input type='text' name='address_zip' class='stretch' />
          </fieldset>
          <fieldset class='pad2x col12'>
            <label>Coupon code</label>
            <input type='text' name='coupon' class='stretch' />
          </fieldset>
        </div>
        <div class='pad2 clearfix'>
          <div class='col12 text-right pad2x'>
            <input class='' type='submit' value='Done' />
          </div>
        </div>
      </div>
    </form>
</div>
</script>

<script type='text/html' id='template-modal-err'>
<% if (!(obj instanceof Error)) {
  if ('responseText' in obj) {
    try {
      obj = new Error(JSON.parse(obj.responseText).message);
    } catch (err) {
      obj = new Error(obj.responseText);
    }
  } else if ('message' in obj) {
    obj = new Error(obj.message);
  } else if ('status' in obj && typeof obj.status === 'number') {
    obj = new Error('HTTP ' + obj.status);
  } else {
    obj = new Error('Unknown error occurred');
  }
} %>
<div id='modal-err' class='col12 modal-popup'>
  <div class='margin3 col6 modal-body fill-white'>
    <div class='pad2y pad4x keyline-bottom center'>
      <%= obj %>
    </div>
    <div class='pad2y pad4x center'>
      <a href='#close' class='button quiet close'>Close</a>
    </div>
  </div>
</div>
</script>

<script type='text/html' id='template-modal-confirm'>
<div id='modal-confirm' class='col12 modal-popup'>
  <div class='margin3 col6 modal-body fill-white'>
    <% if (obj.html) { %>
    <div class='pad2y pad4x keyline-bottom'><%= obj.html %></div>
    <% } else { %>
    <div class='pad2y pad4x keyline-bottom center'><%= obj.text || obj %></div>
    <% } %>
    <div class='pad2y pad4x clearfix center'><!--
    --><% if (obj.callback && obj.cancel !== false) { %><a href='#cancel' class='pad1y small col6 quiet icon strong close cancel'>Cancel</a><% } %><!--
    --><a href='#ok' class='button <% if (obj.callback && obj.cancel !== false) { %>col6<% } %> icon check ok'>Okay</a><!--
  --></div>
  </div>
</div>
</script>

<script type='text/html' id='template-plan-confirm'>
<% if (obj.plan.isUpgrade()) { %>
<h2 class='center'><%= plan.get('name') %> for $<%= plan.get('price') %>/<%= plan.get('period') %></h2>
<% if (obj.reason && obj.reason === 'satellite') { %>
<p class='center'>To use <strong>MapBox Satellite</strong> upgrade to the <strong><%= plan.get('name') %></strong> plan.</p>
<% } else { %>
<p class='center'>You're about to upgrade to the <strong><%= plan.get('name') %></strong> plan.</p>
<% } %>
<div class='center small'>
  <a href='https://122e4e-mapbox.global.ssl.fastly.net/help/#changing-plans' target='_blank'>What happens when I change plans?</a>
</div>
<% } else { %>
<h2 class='center'>Downgrade to <%= plan.get('name') %></h2>
<p class='center'>Before you do that, can we help you get the most out of MapBox?<br/><a href='http://support.mapbox.com/' target='_blank'>Ask our support team for help</a>.</p>
<% if (!obj.plan.get('price')) { %>
<h3 class='space-bottom'>What is the main reason for downgrading your subscription?</h3>
<form id='downgrade-survey' class='small space-bottom' method='post'>
  <div>
    <input type='radio' name='answer' id='answer0' value='Missing a crucial feature' />
    <label for='answer0'>Missing a crucial feature</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer1' value='Not using it' />
    <label for='answer1'>Not using it</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer2' value='Free plan is enough for my needs' />
    <label for='answer2'>Free plan is enough for my needs</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer3' value='Needs better documentation' />
    <label for='answer3'>Needs better documentation</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer4' value='Not satisfied with support' />
    <label for='answer4'>Not satisfied with support</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer5' value='Went with a different tool' />
    <label for='answer5'>Went with a different tool</label>
  </div>
  <div>
    <input type='radio' name='answer' id='answer6' value='Other' />
    <label for='answer6'>Other</label>
  </div>
</form>
<% } %>
<div class='center small'>
  <a href='https://122e4e-mapbox.global.ssl.fastly.net/help/#changing-plans' target='_blank'>What happens when I change plans?</a>
</div>
<% } %>
</script>

<script type='text/html' id='template-alert'>
<a href='#alert' id='alert' class='fill-yellow block'><span class='icon big alert quiet'></span></a>
</script>

</body>
</html>
