<!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>mapbox.js  | 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' />

  <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_1Dy5fvoJB1pavBVrmrcbU1Gu' : 'pk_test_gmIyREg3sKzAiyMkAEeCsxUG');
  </script>

  
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet' >
  <![endif]-->
  

  <script src='https://122e4e-mapbox.global.ssl.fastly.net/api/session.js'></script>
  <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 '>
  <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=''>Tour</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/' class=''>Showcase</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/blog/' class=''>Blog</a><!--
      --><a href='https://122e4e-mapbox.global.ssl.fastly.net/help/' class=''>Help</a>

      <div class='authmenu contain col2 fr center keyline-all'><!--
        --><a href='#signin' class='col6 signin inline keyline-right'>Sign in</a><!--
        --><a href='#signup' class='col6 signup inline'>Sign up</a>
      </div>
    </div>

    <div class='show-mobile contain drop'>
      <a href='#' class='icon menu quiet droplink keyline-all'></a>
      <div class='dropdown strong fill-white keyline-all round-bottom 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/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 { %>
      <a class='mb-logo-thumb' href='https://122e4e-mapbox.global.ssl.fastly.net/editor/#app'><span style='background-image:url("<%=thumb%>")'></span></a>

      <div class='authmenu authed contain col2 fr keyline-all'>
        <a href='#dropdown' class='block fl droplink quiet avatar icon menu keyline-right' style='background-image:url("<%= user.avatar %>")'></a><!--
        --><a href='#dropdown' class='block droplink username strong small truncate hide-mobile'><%= _(user.name || user.id).escape()  %></a>
      <div class='dropdown strong fill-white keyline-all round-bottom animate'>
        <div class='plan contain'>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/account/billing/' class='plan-icon big <%= user.plan.id.replace('2', '').replace('-annual', '') %>'></a>
          <a href='https://122e4e-mapbox.global.ssl.fastly.net/plans/'>
            <strong><%= _(user.plan?user.plan.name:'').escape() %></strong>
          </a>
          <small class='quiet'><%= numeral(user.plan.views).format('0a') %> views</small>
        </div>
        <div class='show-mobile'>
          <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>
          <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>
          <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>
    <div class='hide-mobile strong fr'>
       <a href='https://122e4e-mapbox.global.ssl.fastly.net/dashboard/' class='quiet authed icon dashboard '>Dashboard</a><!--
    --><a href='https://122e4e-mapbox.global.ssl.fastly.net/projects/' class='quiet authed icon folder '>Projects</a><!--
    --><a href='https://122e4e-mapbox.global.ssl.fastly.net/data/' class='quiet authed icon book '>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='fill-white 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'>
    <h2 class='tag small'>
      <a href='https://122e4e-mapbox.global.ssl.fastly.net/developers' class='quiet'>developers</a>
    </h2>
    <h1>
      mapbox.js
      <a class='version' href='https://github.com/mapbox/mapbox.js/blob/master/CHANGELOG.md#v140'>
      
        <sup class='fill-grey small'>v1.4.0</sup>
      
      </a>
    </h1>
  </div>
</div>

<nav class='pill mobile-cols col12 clearfix space-bottom'>
    <a href='/mapbox.js/overview/' class='col4 button active'>Overview</a>
  
    <a href='/mapbox.js/api/v1.4.0/' class='col4 button '>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='clearfix'>
    <nav class='col3'>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#prerequisites'>Prerequisites</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#mapbox-and-leaflet'>MapBox.js & Leaflet</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#getting-started'>Getting started with the API</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#reading-the-documentation'>Reading this documentation</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#the-ready-event'>The ready event</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#tilejson-and-utfgrid'>Tilejson & UTFGrid</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#geojson'>GeoJSON</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#mobile'>Mobile</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#retina'>Retina</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#browser-compatibility'>Browser compatibility</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#viewport'>Viewport</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#scrolling'>Scrolling</a>
      
        <a class='heading col12 keyline-bottom pad1y pad2x truncate' href='#standalone-mapboxjs'>Standalone MapBox.js</a>
      
    </nav>

    <div class='col9 keyline-left'>
      <div id='docs' class='doc-content prose'>
        <div class='doc pad2'>

<h2>Getting started</h2>
<p>This API documentation covers the MapBox Javascript API, an API for adding
MapBox maps to webpages.</p>

<h3 id='prerequisites'>Prerequisites</h3>
<p>In order 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>,
<a href="http://eloquentjavascript.net/">a book</a> or <a href="http://www.amazon.com/dp/0596517742/?tag=stackoverfl08-20">a printed 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>

<h3 id='mapbox-and-leaflet'>MapBox.js &amp; Leaflet</h3>
<p>The Javascript API is implemented as a <a href="http://leafletjs.com/">Leaflet</a> plugin. Leaflet
is an open-source library that provides the basic ability to embed a map, like
a MapBox map or a map from OpenStreetMap, into a page. <a href="http://leafletjs.com/reference.html">The Leaflet API</a>
handles much of the fundamental operations of using maps, so this API documentation is
meant to be used in conjunction with the <a href="http://leafletjs.com/reference.html">Leaflet</a> API
reference.</p>

<p>The MapBox API includes Leaflet and makes it easier to integrate Leaflet with MapBox&#39;s
maps and services.</p>

<h3 id='getting-started'>Getting started with the API</h3>
<p>Here&#39;s a simple page that you can set up with MapBox.js:</p>

<div class="highlight"><pre><code class="html"><span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&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;link</span> <span class="na">href=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css&#39;</span> <span class="na">rel=</span><span class="s">&#39;stylesheet&#39;</span> <span class="nt">/&gt;</span>
  <span class="c">&lt;!--[if lte IE 8]&gt;</span>
<span class="c">    &lt;link href=&#39;//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css&#39; rel=&#39;stylesheet&#39; /&gt;</span>
<span class="c">  &lt;![endif]--&gt;</span>
  <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js&#39;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;style&gt;</span>
  <span class="nf">#map</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span><span class="m">600px</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span><span class="m">400px</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>
  <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&#39;map&#39;</span> <span class="na">class=</span><span class="s">&#39;dark&#39;</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&#39;text/javascript&#39;</span><span class="nt">&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-y7l23tes&#39;</span><span class="p">)</span>
      <span class="p">.</span><span class="nx">setView</span><span class="p">([</span><span class="mf">37.9</span><span class="p">,</span> <span class="o">-</span><span class="mi">77</span><span class="p">],</span> <span class="mi">5</span><span class="p">);</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>

<p>The necessary Javascript and CSS files for the map are hosted on MapBox&#39;s servers, so they&#39;re
served from a worldwide content-distribution network. There&#39;s no API key required to include
the Javascript API - you&#39;ll identify with MapBox&#39;s services simply by using your own custom
maps.</p>

<h3 id='reading-the-documentation'>Reading this documentation</h3>
<p>This documentation is organized by <em>methods</em> in the Javascript API. Each method
is shown with potential arguments, and their types. For instance, the <code>setFilter</code>
method on <code>L.mapbox.markerLayer</code> is documented as:</p>

<p><div class="highlight"><pre><code class="javascript"><span class="nx">markerLayer</span><span class="p">.</span><span class="nx">setFilter</span><span class="p">(</span><span class="nx">filter</span><span class="o">:</span> <span class="kd">function</span><span class="p">)</span>
</code></pre></div>
</p>

<p>The format <code>filter: function</code> means that the single argument to <code>setFilter</code>, a filter
function, should be a Javascript function. Other kinds of arguments include
<code>object</code>, <code>string</code>, or <code>Element</code>.</p>

<p>When the API has a Javascript constructor function that returns an object, the constructor
is documented with its full name and the functions 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>

<h3 id='the-ready-event'>The ready event</h3>
<p>Like many other Javascript libraries, some of what the MapBox.js plugin does
is <a href="http://recurial.com/programming/understanding-callback-functions-in-javascript/">asynchronous</a> - when
you create a layer like <code>L.mapbox.tileLayer(&#39;examples.foo&#39;)</code>, the layer
doesn&#39;t immediately know which tiles to load and its attribution information.
Instead, it loads this information with 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-0l53fhk2&#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, like if the map ID you provide is a 404:</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-0l53fhk2&#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">// for some reason, this layer didn&#39;t load.</span>
    <span class="c1">// you can find out more with the &#39;err&#39; argument</span>
    <span class="c1">// passed to this function</span>
<span class="p">});</span>
</code></pre></div>

<h3 id='tilejson-and-utfgrid'>TileJSON &amp; UTFGrid</h3>
<p>This library takes advantage of several open specifications, including
<a href="http://mapbox.com/developers/tilejson/">TileJSON</a> and
<a href="http://mapbox.com/developers/utfgrid/">UTFGrid</a>.</p>

<p>For the purposes of this API, TileJSON is used as a way to <em>describe
maps and resources</em>, so it
is the configuration format given to layers, maps, and controls. UTFGrid
is <em>a fast way to interact with maps</em> with tooltips and customizable behaviors,
and is easy to define and produce in <a href="http://mapbox.com/tilemill/">TileMill</a>.</p>

<h3 id='geojson'>GeoJSON</h3>
<p>The MapBox marker API and the <code>L.mapbox.markers</code> interface use <a href="http://www.geojson.org/">GeoJSON</a>,
a simple, open standard for geo-data based on <a href="http://en.wikipedia.org/wiki/JSON">JSON</a>
and simple features, like Points and Polygons.</p>

<h3 id='mobile'>Mobile</h3>
<p>MapBox.js is optimized for mobile devices and small screens by default.
There are, however, best practices to make sure your map always looks its best.</p>

<h3 id='retina'>Retina</h3>
<p>Having the ability to use retina tiles when the device supports them is easy.
When creating the map, use the <code>detectRetina</code> to verify if retina is available
and <code>retinaVersion</code> to use a tilelayer which is designed for retina screens.</p>

<div class="highlight"><pre><code class="javascript"><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-y7l23tes&#39;</span><span class="p">,</span> <span class="p">{</span>
  <span class="nx">detectRetina</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
  <span class="nx">retinaVersion</span><span class="o">:</span> <span class="s1">&#39;examples.map-zswgei2n&#39;</span>
<span class="p">}).</span><span class="nx">setView</span><span class="p">([</span><span class="mi">40</span><span class="p">,</span> <span class="o">-</span><span class="mf">74.50</span><span class="p">],</span> <span class="mi">9</span><span class="p">);</span>
</code></pre></div>

<p>Some MapBox maps support switching to retina scale automatically: if you're using
one of these maps, you can simply set `detectRetina` and the higher-scale
tiles will be used when retina is detected.</p>

<div class="highlight"><pre><code class="javascript"><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-y7l23tes&#39;</span><span class="p">,</span> <span class="p">{</span>
  <span class="nx">detectRetina</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">}).</span><span class="nx">setView</span><span class="p">([</span><span class="mi">40</span><span class="p">,</span> <span class="o">-</span><span class="mf">74.50</span><span class="p">],</span> <span class="mi">9</span><span class="p">);</span>
</code></pre></div>

<h3 id='browser-compatibility'>Browser compatibility</h3>
<p>MapBox.js aims to be compatible with <strong>IE8+, Chrome, Safari, Firefox, Opera,
Mobile Safari, and other <a href="http://browsehappy.com/">modern browsers</a></strong>. Browser-specific
issues should be reported <a href="https://github.com/mapbox/mapbox.js/issues?state=open">in the issue tracker</a>.</p>

<p>The fragility of Internet Explorer and programming in general makes it simple
to break code with subtle changes. We recommend checking code in <a href="http://jshint.com/">jshint</a>
as a first-line measure and <a href="http://debugbrowser.com">enabling browser debug tools</a>
to obtain precise error reports and debugging information that you should share
as part of your debugging.</p>

<h3 id='viewport'>Viewport</h3>
<p>Modern mobile browsers now support scaling of webpages by leveraging the meta tag <code>viewport</code>. This enlarges the window making your map look better on a mobile device. Simply include this in the head of your document:</p>

<div class="highlight"><pre><code class="html"><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>
</code></pre></div>

<h3 id='scrolling'>Scrolling</h3>
<p>If you&#39;re planning on having a page that has large amounts of scrolling, try to avoid a large map height. Having a &#39;tall&#39; map can cause the user to get stuck on the map while scrolling. Another way around this is to disable <code>dragging</code> for mobile devices: <code>map.dragging.disable();</code></p>

<h3 id='standalone-mapboxjs'>Standalone MapBox.js</h3>
<p>By default, MapBox.js includes a bundled version of Leaflet that MapBox has ensured
is compatible. However, a standalone version of MapBox.js is also available without
Leaflet included, which you can use if you would like to supply your own version of
Leaflet. You will need to include Leaflet&#39;s JavaScript and CSS files, and Leaflet 0.6
or greater is required.</p>

<p>Here&#39;s an example of using standalone MapBox.js:</p>

<div class="highlight"><pre><code class="html"><span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&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;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;http://cdn.leafletjs.com/leaflet-0.6/leaflet.css&quot;</span> <span class="nt">/&gt;</span>
  <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.2.0/mapbox.standalone.css&#39;</span> <span class="na">rel=</span><span class="s">&#39;stylesheet&#39;</span> <span class="nt">/&gt;</span>
  <span class="c">&lt;!--[if lte IE 8]&gt;</span>
<span class="c">    &lt;link rel=&quot;stylesheet&quot; href=&quot;http://cdn.leafletjs.com/leaflet-0.6/leaflet.ie.css&quot; /&gt;</span>
<span class="c">  &lt;![endif]--&gt;</span>
  <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://cdn.leafletjs.com/leaflet-0.6/leaflet.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&#39;//api.tiles.mapbox.com/mapbox.js/v1.2.0/mapbox.standalone.js&#39;</span><span class="nt">&gt;&lt;/script&gt;</span>
  <span class="nt">&lt;style&gt;</span>
  <span class="nf">#map</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span><span class="m">600px</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span><span class="m">400px</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>
  <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&#39;map&#39;</span> <span class="na">class=</span><span class="s">&#39;dark&#39;</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&#39;text/javascript&#39;</span><span class="nt">&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-y7l23tes&#39;</span><span class="p">)</span>
      <span class="p">.</span><span class="nx">setView</span><span class="p">([</span><span class="mf">37.9</span><span class="p">,</span> <span class="o">-</span><span class="mi">77</span><span class="p">],</span> <span class="mi">5</span><span class="p">);</span>
  <span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</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>


</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'>
      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>
      <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='pad1y validate' target='_blank'>
        <fieldset class='pill mobile-cols col12 with-icon clearfix'>
          <span class='icon mail'></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>
    </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)).reduce(function(msg, val, key) {
        msg.push(val.toString());
        return msg;
      }, []).join(' '));
    } 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>
<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'></span></a>
</script>
</body>
</html>
