<!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' />
  
  <title>v1.3.1 | 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.3.1</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 active'>API</a>
    <a href='/mapbox.js/example/v1.0.0/' class='col4 button '>Examples</a>
  
</nav>


<div class='col12 round box clearfix contain'>
  
  <div class='warning note keyline-bottom'>
    Viewing an older version of MapBox.js. Check out <a href='/mapbox.js/api/v1.5.0'>v1.5.0 for the latest</a>.
  </div>
  

  <div class='fill-white clearfix'>
    <div class='col3'>
      <div class='pad2 keyline-bottom'>
        <fieldset class='search with-icon'>
          <span class='icon search'></span>
          <input id='search-filter' type='text' class='stretch' placeholder='Filter methods'>
        </fieldset>
      </div>
      <nav class='anchors'>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-map'>Map</a>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.map'>L.mapbox.map</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#map.getTileJSON'>map.getTileJSON</a>
            
          </div>
          
        </div>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-layers'>Layers</a>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.tileLayer'>L.mapbox.tileLayer</a>
            
              <a class='col12 truncate quiet small' href='#tileLayer.getTileJSON'>tileLayer.getTileJSON</a>
            
              <a class='col12 truncate quiet small' href='#tileLayer.setFormat'>tileLayer.setFormat</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.gridLayer'>L.mapbox.gridLayer</a>
            
              <a class='col12 truncate quiet small' href='#gridLayer.getTileJSON'>gridLayer.getTileJSON</a>
            
              <a class='col12 truncate quiet small' href='#gridLayer.getData'>gridLayer.getData</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.markerLayer'>L.mapbox.markerLayer</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.loadURL'>markerLayer.loadURL</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.loadID'>markerLayer.loadID</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.setFilter'>markerLayer.setFilter</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.getFilter'>markerLayer.getFilter</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.setGeoJSON'>markerLayer.setGeoJSON</a>
            
              <a class='col12 truncate quiet small' href='#markerLayer.getGeoJSON'>markerLayer.getGeoJSON</a>
            
          </div>
          
        </div>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-geocoding'>Geocoding</a>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.geocoder'>L.mapbox.geocoder</a>
            
              <a class='col12 truncate quiet small' href='#geocoder.query'>geocoder.query</a>
            
              <a class='col12 truncate quiet small' href='#geocoder.reverseQuery'>geocoder.reverseQuery</a>
            
          </div>
          
        </div>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-controls'>Controls</a>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.legendControl'>L.mapbox.legendControl</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.gridControl'>L.mapbox.gridControl</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.geocoderControl'>L.mapbox.geocoderControl</a>
            
              <a class='col12 truncate quiet small' href='#geocoderControl.setURL'>geocoderControl.setURL</a>
            
              <a class='col12 truncate quiet small' href='#geocoderControl.setID'>geocoderControl.setID</a>
            
              <a class='col12 truncate quiet small' href='#geocoderControl.setTileJSON'>geocoderControl.setTileJSON</a>
            
              <a class='col12 truncate quiet small' href='#geocoderControl.setErrorHandler'>geocoderControl.setErrorHandler</a>
            
              <a class='col12 truncate quiet small' href='#geocoderControl.getErrorHandler'>geocoderControl.getErrorHandler</a>
            
          </div>
          
        </div>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-markers'>Markers</a>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.marker.icon'>L.mapbox.marker.icon</a>
            
          </div>
          
          <div class='pad1y'>
            <a class='col12 truncate' href='#L.mapbox.marker.style'>L.mapbox.marker.style</a>
            
          </div>
          
        </div>
        
        <div class='pad2 keyline-bottom'>
          <a class='heading col12 strong' href='#section-theming'>Theming</a>
          
        </div>
        
      </nav>
    </div>

    <div class='col9 keyline-left'>
      <div id='docs' class='doc-content prose'>
        <div class='pad2 doc'>
          <div class='space-bottom4'>
            <h2>Reading this Documentation</h2>
            <p>MapBox.js is built on top of <a href='http://leafletjs.com/'>Leaflet</a> and should be read in conjunction with the <a href='http://leafletjs.com/reference.html'>Leaflet API reference.</a></p>

            <p>The documentation is organized by <em>methods</em>. Each method
            is shown with potential arguments along with it&#39;s type and description in a table.
            When the API has a Javascript constructor function that returns an object, the constructor
            is documented with its full name and the methods on the object are named with just
            the type of the object. For instance, <code>L.mapbox.markerLayer</code> documents a function that
            returns a layer for markers. The methods on that object are then documented as
            <code>markerLayer.setFilter</code>, <code>markerLayer.getGeoJSON</code>, and so on.</p>

            <div class='note'>
              <p>To use this API, you&#39;ll need to understand basic Javascript and mapping concepts.
              If you&#39;d like to learn Javascript, start with <a href='http://www.codecademy.com/tracks/javascript'>an interactive course</a>, or
              <a href='http://eloquentjavascript.net/'>book</a>.
              If you&#39;d like to learn more about maps, <a href='http://mapbox.com/developers/guide/'>we&#39;ve provided a helpful article explaining how web maps work</a>.</p>
            </div>

            <h3 id='the-ready-event'>The `ready` event</h3>
            <p>MapBox.js is <a href='http://recurial.com/programming/understanding-callback-functions-in-javascript/'>asynchronous</a> - when you create a layer like <code>L.mapbox.tileLayer('examples.map-9ijuk24y')</code>, the layer doesn&#39;t immediately know which tiles to load and its attribution information. Instead, it loads the information in an <a href='http://en.wikipedia.org/wiki/AJAX'>AJAX</a> call.</p>

  <p>For most things you&#39;ll write, this isn&#39;t a problem, since MapBox.js does a good
  job of handling these on-the-fly updates. If you&#39;re writing code that needs
  to know when layers and other dynamically-loaded objects are ready, you can
  use the <code>ready</code> event to listen for their ready state. For instance:</p>

  <div class="highlight"><pre><code class="javascript">  <span class="kd">var</span> <span class="nx">layer</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">tileLayer</span><span class="p">(</span><span class="s1">&#39;examples.map-9ijuk24y&#39;</span><span class="p">);</span>
  <span class="nx">layer</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;ready&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// the layer has been fully loaded now, and you can</span>
      <span class="c1">// call .getTileJSON and investigate its properties</span>
  <span class="p">});</span>
  
</code></pre></div>

  <p>Similarly, dynamically-loaded objects produce an `error` event if something
  goes wrong:</p>

  <div class="highlight"><pre><code class="javascript">  <span class="kd">var</span> <span class="nx">layer</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">tileLayer</span><span class="p">(</span><span class="s1">&#39;examples.map-9ijuk24y&#39;</span><span class="p">);</span>
  <span class="nx">layer</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;error&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// Handle error });</span>
  
</code></pre></div>
          </div>
          
<div></div><h1 id="section-map">Map</h1>
<div class="space-bottom api-group-content depth-1"></div><h2 id="L.mapbox.map">L.mapbox.map<span class="bracket">(</span><span class="args">element, id|url|tilejson, options</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>Create and automatically configure a map with layers, markers, and
interactivity.</p>
<p><span class='leaflet'><em>Extends</em>: <a href="http://leafletjs.com/reference.html#map-options">L.Map</a></span></p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>element <em>required</em></td>
<td>string</td>
<td>Must be the id of an element, or a DOM element reference.</td>
</tr>
<tr>
<td>url</td>
<td>string</td>
<td>url can be <ul><li>a map <code>id</code> string <code>examples.map-foo</code></li><li> a URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li><li>a <a href="http://mapbox.com/wax/tilejson.html">TileJSON</a> object, from your own Javascript code</li></ul></td>
</tr>
<tr>
<td>options</td>
<td>object</td>
<td>If provided, it is the same options as provided to <a href="http://leafletjs.com/reference.html#map-options">L.Map</a> with the following additions: <ul><li><code>tileLayer</code> (boolean). Whether or not to add a <code>L.mapbox.tileLayer</code> based on the TileJSON. Default: <code>true</code></li><li><code>markerLayer</code> (boolean). Whether or not to add a <code>L.mapbox.markerLayer</code> based on the TileJSON. Default: <code>true</code>.</li><li><code>gridLayer</code> (boolean). Whether or not to add a <code>L.mapbox.gridLayer</code> based on the TileJSON. Default: <code>true</code>.</li><li><code>legendControl</code> (boolean). Whether or not to add a <code>L.mapbox.legendControl</code>. Default: <code>true</code>.</li></td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>// map refers to a &lt;div&gt; element with the ID map
// examples.map-4l7djmvo is the ID of a map on MapBox.com
var map = L.mapbox.map(&#39;map&#39;, &#39;examples.map-4l7djmvo&#39;);

// map refers to a &lt;div&gt; element with the ID map
// This map will have no layers initially
var map = L.mapbox.map(&#39;map&#39;);</code></pre>
<p><em>Returns</em>: a map object</p>
</div><h2 id="map.getTileJSON">map.getTileJSON<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>Returns this map&#39;s TileJSON object which determines its tile source,
zoom bounds and other metadata.</p>
<p><em>Returns</em>: the TileJSON object</p>
</div><h1 id="section-layers">Layers</h1>
<div class="space-bottom api-group-content depth-1"></div><h2 id="L.mapbox.tileLayer">L.mapbox.tileLayer<span class="bracket">(</span><span class="args">id|url|tilejson, options</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>You can add a tiled layer to your map with <code>L.mapbox.tileLayer()</code>, a simple
interface to layers from MapBox and elsewhere.</p>
<p><span class='leaflet'><em>Extends</em>: <a href="http://leafletjs.com/reference.html#tilelayer">L.TileLayer</a></span></p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id <em>required</em></td>
<td>string</td>
<td>Value must be <ul><li>An <code>id</code> string <code>examples.map-foo</code></li><li>A URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li><li>A TileJSON object, from your own Javascript code</li></ul></td>
</tr>
<tr>
<td>options</td>
<td>object</td>
<td>The second argument is optional. If provided, it is the same options as provided to <a href="http://leafletjs.com/reference.html#tilelayer">L.TileLayer</a> with one addition: <ul><li><code>retinaVersion</code>, if provided, is an alternative value for the first argument to <code>L.mapbox.tileLayer</code> which, if retina is detected, is used instead.</li></ul></td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>// the second argument is optional
var layer = L.mapbox.tileLayer(&#39;examples.map-20v6611k&#39;);

// you can also provide a full url to a tilejson resource
var layer = L.mapbox.tileLayer(&#39;http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json&#39;);

// if provided,you can support retina tiles
var layer = L.mapbox.tileLayer(&#39;examples.map-20v6611k&#39;, {
    detectRetina: true,
    // if retina is detected, this layer is used instead
    retinaVersion: &#39;examples.map-zswgei2n&#39;
});</code></pre>
<p><em>Returns</em> a <code>L.mapbox.tileLayer</code> object.</p>
</div><h3 id="tileLayer.getTileJSON">tileLayer.getTileJSON<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Returns this layer&#39;s TileJSON object which determines its tile source,
zoom bounds and other metadata.</p>
<p><em>Example</em>:</p>
<pre><code>var layer = L.mapbox.tileLayer(&#39;examples.map-20v6611k&#39;)
    // since layers load asynchronously through AJAX, use the
    // `.on` function to listen for them to be loaded before
    // calling `getTileJSON()`
    .on(&#39;load&#39;, function() {
    // get TileJSON data from the loaded layer
    var TileJSON = layer.getTileJSON();
});</code></pre>
<p><em>Returns</em>: the TileJSON object</p>
</div><h3 id="tileLayer.setFormat">tileLayer.setFormat<span class="bracket">(</span><span class="args">format</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the image format of tiles in this layer. You can use lower-quality tiles
in order to load maps faster</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>string</td>
<td><code>string</code> an image format. valid options are: &#39;png&#39;, &#39;png32&#39;, &#39;png64&#39;, &#39;png128&#39;, &#39;png256&#39;, &#39;jpg70&#39;, &#39;jpg80&#39;, &#39;jpg90&#39;</td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>// Downsample tiles for faster loading times on slow
// internet connections
var layer = L.mapbox.tileLayer(&#39;examples.map-20v6611k&#39;, {
    format: &#39;jpg70&#39;
});</code></pre>
<p><em>Returns</em>: the layer object</p>
</div><h2 id="L.mapbox.gridLayer">L.mapbox.gridLayer<span class="bracket">(</span><span class="args">id|url|tilejson, options</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>An <code>L.mapbox.gridLayer</code> loads <a href="http://mapbox.com/developers/utfgrid/">UTFGrid</a> tiles of
interactivity into your map, which you can easily access with <code>L.mapbox.gridControl</code>.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id <em>required</em></td>
<td>string</td>
<td><ul><li>An <code>id</code> string <code>examples.map-foo</code></li><li>A URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li><li>A TileJSON object, from your own Javascript code</li></ul></td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>// the second argument is optional
var layer = L.mapbox.gridLayer(&#39;examples.map-20v6611k&#39;);</code></pre>
<p><em>Returns</em> a <code>L.mapbox.gridLayer</code> object.</p>
</div><h3 id="gridLayer.getTileJSON">gridLayer.getTileJSON<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Returns this layer&#39;s TileJSON object which determines its tile source,
zoom bounds and other metadata.</p>
<p><em>Example</em>:</p>
<pre><code>var layer = L.mapbox.gridLayer(&#39;examples.map-20v6611k&#39;)
    // since layers load asynchronously through AJAX, use the
    // `.on` function to listen for them to be loaded before
    // calling `getTileJSON()`
    .on(&#39;load&#39;, function() {
    // get TileJSON data from the loaded layer
    var TileJSON = layer.getTileJSON();
});</code></pre>
<p><em>Returns</em>: the TileJSON object</p>
</div><h3 id="gridLayer.getData">gridLayer.getData<span class="bracket">(</span><span class="args">latlng, callback</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Load data for a given latitude, longitude point on the map, and call the callback
function with that data, if any.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>latlng</td>
<td>object</td>
<td><code>latlng</code> a [<a href="http://leafletjs.com/reference.html#latlng](L.LatLng">http://leafletjs.com/reference.html#latlng](L.LatLng</a> object)</td>
</tr>
<tr>
<td>callback</td>
<td>function</td>
<td><code>callback</code> a function that is called with the grid data as an argument</td>
</tr>
</tbody>
</table>
<p><em>Returns</em>: the L.mapbox.gridLayer object</p>
</div><h2 id="L.mapbox.markerLayer">L.mapbox.markerLayer<span class="bracket">(</span><span class="args">id|url|tilejson, options</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p><code>L.mapbox.markerLayer</code> provides an easy way to integrate <a href="http://www.geojson.org/">GeoJSON</a>
from MapBox and elsewhere into your map.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id, url, tilejson</td>
<td>string</td>
<td>Must be either <ul><li>An id string examples.map-foo</li><li>A URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li><li>A GeoJSON object, from your own Javascript code</li><li><code>null</code>, if you wish to only provide <code>options</code> and not initial data.</li></ul></td>
</tr>
<tr>
<td>options</td>
<td>object</td>
<td>If provided, it is the same options as provided to <a href="L.FeatureGroup"><a href="http://leafletjs.com/reference.html#featuregroup">http://leafletjs.com/reference.html#featuregroup</a></a>, as well as: <ul><li><code>filter</code>: A function that accepts a feature object and returns <code>true</code> or <code>false</code> to indicate whether it should be displayed on the map. This can be changed later using <code>setFilter</code>.</li><li><code>sanitizer</code>: A function that accepts a string containing tooltip data, and returns a sanitized result for HTML display. The default will remove dangerous script content, and is recommended.</li></ul></td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    .addTo(map);</code></pre>
<p><em>Returns</em> a <code>L.mapbox.markerLayer</code> object.</p>
</div><h3 id="markerLayer.loadURL">markerLayer.loadURL<span class="bracket">(</span><span class="args">url</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Load GeoJSON data for this layer from the URL given by <code>url</code>.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>url <em>required</em></td>
<td>string</td>
<td>A map id</td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    .addTo(map);

markerLayer.loadURL(&#39;my_local_markers.geojson&#39;);</code></pre>
<p><em>Returns</em>: the layer object</p>
</div><h3 id="markerLayer.loadID">markerLayer.loadID<span class="bracket">(</span><span class="args">id</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Load tiles from a map with the given <code>id</code> on MapBox.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>url <em>required</em></td>
<td>string</td>
<td>A map id</td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    .addTo(map);

// loads markers from the map `examples.map-0l53fhk2` on MapBox,
// if that map has markers
markerLayer.loadID(&#39;examples.map-0l53fhk2&#39;);</code></pre>
<p><em>Returns</em>: the layer object</p>
</div><h3 id="markerLayer.setFilter">markerLayer.setFilter<span class="bracket">(</span><span class="args">filter</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Sets the filter function for this data layer.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>filter <em>required</em></td>
<td>function</td>
<td>a function that takes GeoJSON features and returns true to show and false to hide features.</td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    // hide all markers
    .setFilter(function() { return false; })
    .addTo(map);</code></pre>
<p><em>Returns</em> the markerLayer object.</p>
</div><h3 id="markerLayer.getFilter">markerLayer.getFilter<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Gets the filter function for this data layer.</p>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    // hide all markers
    .setFilter(function() { return false; })
    .addTo(map);

// get the filter function
var fn = markerLayer.getFilter()</code></pre>
<p><em>Returns</em> the filter function.</p>
</div><h3 id="markerLayer.setGeoJSON">markerLayer.setGeoJSON<span class="bracket">(</span><span class="args">geojson</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the contents of a markers layer: run the provided
features through the filter function and then through the factory function to create elements
for the map. If the layer already has features, they are replaced with the new features.
An empty array will clear the layer of all features.</p>
<table>
<thead>
<tr>
<th>Options</th>
<th>Value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>geojson <em>required</em></td>
<td>object</td>
<td><code>features</code>, an array of <a href="http://geojson.org/geojson-spec.html#feature-objects">GeoJSON feature objects</a>, or omitted to get the current value.</td>
</tr>
</tbody>
</table>
<p><em>Example</em>:</p>
<pre><code>var markerLayer = L.mapbox.markerLayer(geojson)
    .addTo(map);
// a simple GeoJSON featureset with a single point
// with no properties
markerLayer.setGeoJSON({
    type: &quot;FeatureCollection&quot;,
    features: [{
        type: &quot;Feature&quot;,
        geometry: {
            type: &quot;Point&quot;,
            coordinates: [102.0, 0.5]
        },
        properties: { }
    }]
});</code></pre>
<p><em>Returns</em> the markerLayer object</p>
</div><h3 id="markerLayer.getGeoJSON">markerLayer.getGeoJSON<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Get the contents of this layer as GeoJSON data.</p>
<p><em>Returns</em> the GeoJSON represented by this layer</p>
</div><h1 id="section-geocoding">Geocoding</h1>
<div class="space-bottom api-group-content depth-1"></div><h2 id="L.mapbox.geocoder">L.mapbox.geocoder<span class="bracket">(</span><span class="args">id: string | url: string</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>A low-level interface to geocoding, useful for more complex uses and reverse-geocoding.</p>
<ol>
<li><p>(required) must be:</p>
</li>
<li><p>An <code>id</code> string <code>examples.map-foo</code></p>
</li>
<li>A URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li>
</ol>
<p><em>Returns</em> a <code>L.mapbox.geocoder</code> object.</p>
</div><h3 id="geocoder.query">geocoder.query<span class="bracket">(</span><span class="args">queryString: string, callback: function</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Queries the geocoder with a query string, and returns its result, if any.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>(required) a query, expressed as a string, like &#39;Arkansas&#39;</li>
<li>(required) a callback</li>
</ol>
<p>The callback is called with arguments</p>
<ol>
<li>An error, if any</li>
<li><p>The result. This is an object with the following members:</p>
<pre><code> { results: // raw results
 latlng: // a map-friendly latlng array
 bounds: // geojson-style bounds of the first result
 lbounds: // leaflet-style bounds of the first result
 }</code></pre>
</li>
</ol>
<p><em>Returns</em>: the geocoder object. The return value of this function is not useful - you must use a callback to get results.</p>
</div><h3 id="geocoder.reverseQuery">geocoder.reverseQuery<span class="bracket">(</span><span class="args">location: object, callback: function</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Queries the geocoder with a location, and returns its result, if any.</p>
<p><em>Arguments</em>:</p>
<ol>
<li><p>(required) a query, expressed as an object:</p>
<pre><code>  [lon, lat] // an array of lon, lat
  { lat: 0, lon: 0 } // a lon, lat object
  { lat: 0, lng: 0 } // a lng, lat object</code></pre>
</li>
</ol>
<p>The first argument can also be an array of objects in that
form to geocode more than one item.</p>
<ol>
<li>(required) a callback</li>
</ol>
<p>The callback is called with arguments</p>
<ol>
<li>An error, if any</li>
<li>The result. This is an object of the raw result from MapBox.</li>
</ol>
<p><em>Returns</em>: the geocoder object. The return value of this function is not useful - you must use a callback to get results.</p>
</div><h1 id="section-controls">Controls</h1>
<div class="space-bottom api-group-content depth-1"></div><h2 id="L.mapbox.legendControl">L.mapbox.legendControl<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>A map control that shows legends added to maps in MapBox. Legends are auto-detected from active layers.</p>
<p><em>Arguments</em>:</p>
<ol>
<li><p>(optional) an options object. Beyond the default options for map controls,
this object has one special parameter:</p>
</li>
<li><p><code>sanitizer</code>: A function that accepts a string containing legend data, and returns a
sanitized result for HTML display. The default will remove dangerous script content,
and is recommended.</p>
</li>
</ol>
<p><em>Example</em>:</p>
<pre><code>var map = L.mapbox.map(&#39;map&#39;).setView([38, -77], 5);
map.addControl(L.mapbox.legendControl());</code></pre>
<p><em>Returns</em>: a <code>L.mapbox.legendControl</code> object.</p>
</div><h2 id="L.mapbox.gridControl">L.mapbox.gridControl<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>Interaction is what we call interactive parts of maps that are created with
the powerful <a href="http://mapbox.com/tilemill/docs/crashcourse/tooltips/">tooltips &amp; regions system</a>
in TileMill. Under the hood, it&#39;s powered by
the <a href="https://github.com/mapbox/utfgrid-spec">open UTFGrid specification.</a>.</p>
<p><em>Arguments</em>:</p>
<ul>
<li>The first argument must be a layer created with <code>L.mapbox.gridLayer()</code></li>
<li><p>The second argument can be an options object. Valid options are:</p>
</li>
<li><p><code>sanitizer</code>: A function that accepts a string containing interactivity data, and returns a
sanitized result for HTML display. The default will remove dangerous script content,
and is recommended.</p>
</li>
<li><code>template</code>: A string in the <a href="http://mustache.github.io/">Mustache</a> template
language that will be evaluated with data from the grid to produce HTML for the
interaction.</li>
<li><code>follow</code>: Whether the tooltip should follow the mouse in a constant
relative position, or should be fixed in the top-right side of the map.
By default, this is <code>false</code> and the tooltip is stationary.</li>
<li><code>pinnable</code>: Whether clicking will &#39;pin&#39; the tooltip open and expose a
&#39;close&#39; button for the user to close the tooltip. By default, this is <code>true</code>.</li>
</ul>
<p><em>Example</em>:</p>
<pre><code>var map = L.mapbox.map(&#39;map&#39;).setView([38, -77], 5);
var gridLayer = L.mapbox.gridLayer(&#39;examples.map-8ced9urs&#39;);
map.addLayer(L.mapbox.tileLayer(&#39;examples.map-8ced9urs&#39;));
map.addLayer(gridLayer);
map.addControl(L.mapbox.gridControl(gridLayer));</code></pre>
<p><em>Returns</em>: a <code>L.mapbox.gridControl</code> object.</p>
</div><h2 id="L.mapbox.geocoderControl">L.mapbox.geocoderControl<span class="bracket">(</span><span class="args">id: string | url: string</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>Adds geocoder functionality as well as a UI element to a map. This uses
the <a href="http://mapbox.com/developers/api/#geocoding">MapBox Geocoding API</a>.</p>
<p>This function is currently in private beta:
<a href="http://mapbox.com/about/contact/">contact MapBox</a> before using this functionality.</p>
<p><em>Arguments</em>:</p>
<ol>
<li><p>(required) either:</p>
</li>
<li><p>An <code>id</code> string <code>examples.map-foo</code></p>
</li>
<li>A URL to TileJSON, like <code>http://a.tiles.mapbox.com/v3/examples.map-0l53fhk2.json</code></li>
</ol>
<p><em>Example</em></p>
<pre><code>var map = L.map(&#39;map&#39;)
    .setView([37, -77], 5)
    .addControl( L.mapbox.geocoder(&#39;examples.map-vyofok3q&#39;));</code></pre>
<p><em>Returns</em> a <code>L.mapbox.geocoderControl</code> object.</p>
</div><h3 id="geocoderControl.setURL">geocoderControl.setURL<span class="bracket">(</span><span class="args">url: string</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the url used for geocoding.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>a geocoding url</li>
</ol>
<p><em>Returns</em>: the geocoder control object</p>
</div><h3 id="geocoderControl.setID">geocoderControl.setID<span class="bracket">(</span><span class="args">id: string</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the map id used for geocoding.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>a map id to geocode from</li>
</ol>
<p><em>Returns</em>: the geocoder control object</p>
</div><h3 id="geocoderControl.setTileJSON">geocoderControl.setTileJSON<span class="bracket">(</span><span class="args">tilejson: object</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the TileJSON used for geocoding.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>A TileJSON object</li>
</ol>
<p><em>Returns</em>: the geocoder object</p>
</div><h3 id="geocoderControl.setErrorHandler">geocoderControl.setErrorHandler<span class="bracket">(</span><span class="args">errorhandler: function</span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Set the function called if a geocoding request returns an error.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>a function that takes an error object - typically an XMLHttpRequest, and
handles it.</li>
</ol>
<p><em>Returns</em>: the geocoder control object</p>
</div><h3 id="geocoderControl.getErrorHandler">geocoderControl.getErrorHandler<span class="bracket">(</span><span class="args"></span><span class="bracket">)</span></h3>
<div class="space-bottom api-group-content depth-3"><p>Returns the current function used by this geocoderControl for error handling.</p>
<p><em>Arguments</em>: none</p>
<p><em>Returns</em>: the geocoder control&#39;s error handler</p>
</div><h1 id="section-markers">Markers</h1>
<div class="space-bottom api-group-content depth-1"></div><h2 id="L.mapbox.marker.icon">L.mapbox.marker.icon<span class="bracket">(</span><span class="args">feature: object</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>A core icon generator used in <code>L.mapbox.marker.style</code></p>
<p><em>Arguments</em>:</p>
<ol>
<li>A GeoJSON feature object</li>
</ol>
<p><em>Returns</em>:</p>
<p>A <code>L.Icon</code> object with custom settings for <code>iconUrl</code>, <code>iconSize</code>, <code>iconAnchor</code>,
and <code>popupAnchor</code>.</p>
</div><h2 id="L.mapbox.marker.style">L.mapbox.marker.style<span class="bracket">(</span><span class="args">feature: object | latlon: object</span><span class="bracket">)</span></h2>
<div class="space-bottom api-group-content depth-2"><p>An icon generator for use in conjunction with <code>pointToLayer</code> to generate
markers from the <a href="http://mapbox.com/developers/api/#markers">MapBox Markers API</a>
and support the <a href="https://github.com/mapbox/simplestyle-spec">simplestyle-spec</a> for
features.</p>
<p><em>Arguments</em>:</p>
<ol>
<li>A GeoJSON feature object</li>
<li>The latitude, longitude position of the marker</li>
</ol>
<p><em>Examples</em>:</p>
<pre><code>L.geoJson(geoJson, {
    pointToLayer: L.mapbox.marker.style,
});</code></pre>
<p><em>Returns</em>:</p>
<p>A <code>L.Marker</code> object with the latitude, longitude position and a styled marker</p>
</div><h1 id="section-theming">Theming</h1>
<div class="space-bottom api-group-content depth-1"></div><h2>Dark theme</h2>
<div class="space-bottom api-group-content depth-2"><p>Mapbox.js implements a simple, light style on all interaction elements. A dark theme
is available by applying <code>class=&quot;dark&quot;</code> to the map div.</p>
<p><em>Example</em>:</p>
<pre><code>&lt;div id=&quot;map&quot; class=&quot;dark&quot;&gt;&lt;/div&gt;</code></pre>
</div>


        </div>
        <div class='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>
  </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>
  $(function() {
    var docs = new Docs();
    docs.colorCode();
    docs.bindSearch($('.search input'), $('nav'));
    docs.bindInlineCode();
  });
</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>
