---
layout: default
class: fill-light
options: full
examples:
  - name: Styles
    id: styles
  - name: Layers
    id: layers
  - name: Sources
    id: sources
  - name: User interaction
    id: user-interaction
  - name: Camera
    id: camera
  - name: Controls and overlays
    id: controls-and-overlays
  - name: Browser support
    id: browser-support
---

<link href='{{site.url}}/css/docs.css' rel='stylesheet' />
<link href='{{site.baseurl}}/site.css' rel='stylesheet' />

<!--Fixed sidebar navigation-->
<div class='docnav hide-mobile'>
  <div class='limiter'>
    <div class='col3 contain'>
      <nav class='scroll-styled quiet-scroll small'>
        {% if page.url contains 'example' %}
          <div class="space-bottom">
            <input id='filter-input' type='text' class='space-bottom' name='filter' placeholder='Filter examples' />
          </div>
          {% for example in layout.examples %}
          <div class='space-bottom1'>
            <h3 class='heading'>{{example.name}}</h3>
            {% for listing in site.tags[example.id] reversed %}
              <a href='{{site.baseurl}}{{listing.url}}' class='block small truncate example-names {% if listing.title == page.title %} active{% endif %}'>{{listing.title}}</a>
            {% endfor %}
          </div>
        {% endfor %}
      {% endif %}
        {% if page.url contains 'api' %}
          <div class='space-bottom1'>
            <span class='block truncate strong'>API</span>
          </div>
            {% for navitem in page.navigation %}
              <div class='space-bottom1'>
                <a class='block truncate strong quiet' href='{{site.baseurl}}{{navitem.url}}/#{{navitem.id}}'>{{navitem.title}}</a>
                {% for subitem in navitem.subnav %}
                <a class='block truncate' href='{{site.baseurl}}{{subitem.url}}/#{{subitem.id}}'>{{subitem.title}}</a>
                {% endfor %}
              </div>
            {% endfor %}
        {% endif %}
        {% if page.url contains 'plugins' %}
          <div class='space-bottom'>
            <a class='block quiet strong small truncate active' href='{{site.baseurl}}/plugins/'>Plugins</a>
          </div>
          <div class='space-bottom'>
            {% for plugin in site.categories.plugin %}
            <a href='{{site.baseurl}}/plugins/#{{plugin.prefix}}' class='block small truncate'>{{plugin.title}}</a>
            {% endfor %}
          </div>
        {% endif %}
        {% if page.url contains 'roadmap' %}
          <div class='pad2'>
            <p class='icon time'>Last updated: 11/15/2016</p>
            <p class="small"><span class="icon point roadmap-project"></span> indicates a project on GitHub</p>
          </div>
        {% endif %}
      </nav>
    </div>
  </div>
</div>

<div class='limiter clearfix'>
  <div class='pad2y'>
    <nav class='contain z10 margin3 col9 fill-gradient space-bottom round small'>
      <div class='col3 dark round-left keyline-right pad1 center truncate'>
        <div class='pad0y'>
          <span class='icon gl fill-lighten0 dot inline pad0'></span> Mapbox GL JS
        </div>
      </div>
      <div class='col9 dark tabs mobile-cols pad1'><!--
        --><a href='{{site.baseurl}}/api' class='col3 truncate{% if page.category == "api" %} active{% endif %}'>API</a><!--
        --><a href='{{site.url}}/mapbox-gl-style-spec' class='col3 truncate'>Style Reference</a><!--
        --><a href='{{site.baseurl}}/examples' class='col3 truncate{% if page.category == "example" %} active{% endif %}'>Examples</a><!--
        --><a href='{{site.baseurl}}/plugins' class='col3 truncate{% if page.url contains "plugins" %} active{% endif %}'>Plugins</a>
      </div>
    </nav>
  </div>

  <div class='contain margin3 col9'>
    {{ content }}
  </div>
</div>

<script src='{{site.baseurl}}/js/site.js'></script>