<!DOCTYPE html >
<html>
<head>
  <meta charset='UTF-8'/>
  <meta name='robots' content='index'/>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <meta name='description' content='Changing the appearance of a map'/>
  <title>mapbox.js Theme | 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.0.0</sup>
      
      </a>
    </h1>
  </div>
</div>

<nav class='pill mobile-cols col12 clearfix space-bottom'>
    <a href='/mapbox.js/overview/' class='col4 button '>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 active'>Examples</a>
  
</nav>


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

    <div class='clearfix'>
      <!-- Map + code sample -->
      <div class='col12'>
        <div class='pad2 doc example-header'>
          <h3>Theme</h3>
          <span class='description'>Changing the appearance of a map</span>
        </div>
        <div id='demo' class='doc'><div id='map' class='dark'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'examples.map-y7l23tes')
    .addControl(L.mapbox.geocoderControl('examples.map-y7l23tes'))
    .setView([37.9, -77], 5);

var feature = {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: {
        title: 'Example Marker',
        description: 'This is a single marker.'
    }
};

map.markerLayer.setGeoJSON(feature);
</script>
</div>
        <div id='snippet' class='doc contain space-bottom keyline-bottom'>
          <div class='pin-right pill pad2 col4'>
            <a class='col6 button icon clipboard' href='#' id='copy'>Select all</a>
            <a class='col6 button icon pencil' href='#' id='edit'>Edit</a>
          </div>
          <div id='code' class='doc'>

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

<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&#39;map&#39;</span> <span class="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">addControl</span><span class="p">(</span><span class="nx">L</span><span class="p">.</span><span class="nx">mapbox</span><span class="p">.</span><span class="nx">geocoderControl</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="kd">var</span> <span class="nx">feature</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;Feature&#39;</span><span class="p">,</span>
    <span class="nx">geometry</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;Point&#39;</span><span class="p">,</span>
        <span class="nx">coordinates</span><span class="o">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">77</span><span class="p">,</span> <span class="mf">37.9</span><span class="p">]</span>
    <span class="p">},</span>
    <span class="nx">properties</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Example Marker&#39;</span><span class="p">,</span>
        <span class="nx">description</span><span class="o">:</span> <span class="s1">&#39;This is a single marker.&#39;</span>
    <span class="p">}</span>
<span class="p">};</span>

<span class="nx">map</span><span class="p">.</span><span class="nx">markerLayer</span><span class="p">.</span><span class="nx">setGeoJSON</span><span class="p">(</span><span class="nx">feature</span><span class="p">);</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div>

<div class='code-footer'>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
</div>
  </div><!-- end #code -->
</div>

        <!-- Navigation -->
        <div class='col12 pad1 clearfix'>

          <div class='center col12 clearfix'>
            <h1 class='title'>Browse all examples</h1>
          </div>

          <form id='docs-form' class='doc-search clearfix col12 pad1'>
            <fieldset class='col6 margin3 with-icon'>
              <span class='icon search'></span>
              <input id='search-filter' type='text' class='stretch' placeholder='Filter'>
            </fieldset>
          </form>

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

<script>
  $(function() {
    var example = new Docs();
    $(example.copyCode);

    example.bindInlineEditor();

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

<div class='footer keyline-top pad4y fill-white clearfix small'>
  <div class='limiter'>
    <div class='col6'>
      <div class='col4'>
        
        <a id='footer-tour' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/tour/'>Tour</a>
        
        <a id='footer-showcase' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/showcase/'>Showcase</a>
        
        <a id='footer-about' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/about/'>About</a>
        
        <a id='footer-plans' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/plans/'>Plans</a>
        
      </div>
      <div class='col4'>
        
        <a id='footer-help' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/help/'>Help</a>
        
        <a id='footer-blog' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/blog/'>Blog</a>
        
        <a id='footer-developers' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/developers/'>Developers</a>
        
        <a id='footer-contact' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/contact/'>Contact</a>
        
      </div>
      <div class='col4'>
        
        <a id='footer-tilemill' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/tilemill/'><strong>TileMill</strong></a>
        
        <a id='footer-maki' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/maki/'><strong>Maki</strong></a>
        
        <a id='footer-status' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/status/'><strong>Status</strong></a>
        
        <a id='footer-jobs' class='col12 strong' href='https://122e4e-mapbox.global.ssl.fastly.net/jobs/'><strong>Jobs</strong></a>
        
      </div>
    </div>
    <div class='col6 newsletter'>
      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>
