---
layout: pages
class: fill-light
options: full
---


<div class='round doc clip fill-white keyline-all space-bottom'>

  <section class='pad4 keyline-bottom contain'>

    <div class='pin-topright pad2'>
        <a class='icon github short button quiet' href="https://github.com/mapbox/mapbox-gl-js">Project on GitHub</a>
    </div>

    <h1 class='space-bottom2'>
      Mapbox GL JS
    </h1>

    <div class='prose space-bottom2'>
      <p>Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from <a href='{{site.url}}/help/define-vector-tiles'>vector tiles</a> and <a href='{{site.url}}/mapbox-gl-style-spec'>Mapbox styles</a>.<p>
      <p>It is part of the <a href='https://github.com/mapbox/mapbox-gl'>Mapbox GL ecosystem</a> which includes <a href='{{site.url}}/mobile/'>Mapbox Mobile</a>, a suite of compatible SDKs for native desktop and mobile applications.</p>
    </div>
    <a href='https://www.mapbox.com/gallery/'><img alt='Mapbox GL JS gallery' src='{{site.baseurl}}/assets/gallery.png'></a>
  </section>
</div>

<div class='keyline-all fill-darken0 space-bottom round'>
  <div class='pad1y pad2x keyline-bottom strong small clearfix'>
    <span class='fill-darken1 pad1x round dark inline fr'>mapbox-gl.js v{{site.data.package.version}}</span>
    Get started
  </div>
  <div class='pad2'>
    <div class='fill-white js-replace-token' id='head-code'>{% highlight html %}
<script src='{{site.tileApi}}/mapbox-gl-js/v{{site.data.package.version}}/mapbox-gl.js'></script>
<link href='{{site.tileApi}}/mapbox-gl-js/v{{site.data.package.version}}/mapbox-gl.css' rel='stylesheet' />{% endhighlight html %}
    </div>
    <a class='button icon clipboard col12 round-bottom js-clipboard space-bottom1' href='#' data-clipboard-target='head-code'>Copy code</a>

    <div class='pad1x small quiet space-bottom1'>
      Include the JavaScript and CSS files in the <code>&lt;head&gt;</code> of your HTML file.
    </div>

    <div class='fill-white js-replace-token' id='body-code'>
{% capture getting_started_html %}
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9'
});
</script>
{% endcapture %}

      {% highlight html %}{{ getting_started_html | insert_token }}{% endhighlight %}
    </div>
    <a class='button icon clipboard col12 round-bottom js-clipboard space-bottom1' href='#' data-clipboard-target='body-code'>Copy code</a>

    <div class='pad1x small quiet'>
      Include this code in the <code>&lt;body&gt;</code> of your HTML file to initialize a map on the page.
      <a class='truncate rcon next' href='{{site.baseurl}}/examples/'>View basic example</a>
    </div>
  </div>
</div>

<div class='round doc clip fill-white keyline-all space-top'>
  {{ content }}
</div>
