---
layout: pages
---

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

<style>
.fill-white pre { background-color:transparent; }
</style>

<div class='prose'>
    <div class='pad2'><strong>{{ page.title }}</strong><br>{{ page.description }}</div>
    <div id='unsupported' class='pad2 hidden dark'>
        <div class='note error round pad1'>
            <div class='strong space-bottom1 icon alert'>Mapbox GL unsupported</div>
            <div class='small strong'>Mapbox GL requires <a href='http://caniuse.com/webgl'>WebGL support</a>. Please check that you are using a supported browser and that WebGL is <a href='http://get.webgl.org/'>enabled</a>.</div>
        </div>
    </div>
</div>

<script src='{% if site.mapboxglbase %}{{site.mapboxglbase}}{% else %}https://api.tiles.mapbox.com/mapbox-gl-js/v{{site.data.package.version}}{% endif %}/mapbox-gl.js'></script>

<iframe id='demo' class='row10 col12' allowfullscreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'></iframe>
<script>
    if (mapboxgl.supported()) {
        var doc = $('#demo')[0].contentWindow.document;

        var jsURL = '{% if site.mapboxglbase %}{{site.mapboxglbase}}{% else %}https://api.tiles.mapbox.com/mapbox-gl-js/v{{site.data.package.version}}{% endif %}/mapbox-gl.js',
            cssURL = '{% if site.mapboxglbase %}{{site.mapboxglbase}}{% else %}https://api.tiles.mapbox.com/mapbox-gl-js/v{{site.data.package.version}}{% endif %}/mapbox-gl.css';

        var exampleCSS = 'body { margin:0; padding:0; }\n#map { position:absolute; top:0; bottom:0; width:100%; }';

        var examplePREFIX =
            "<html><head><meta charset=utf-8 /><title>{{page.exampletitle}}</title>\n" +
            "<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />\n" +
            "<script src='" + jsURL + "'><\/script>\n" +
            "<link href='" + cssURL + "' rel='stylesheet' />\n" +
            "<style>" + exampleCSS + "</style>\n" +
            "<script>" +
                "mapboxgl.accessToken = '" + App.accessToken + "';" +
            "<\/script>\n" +
            "</head>\n<body>\n";

        var exampleCONTENT = {{content | jsonify | replace: '</', '<\/'}};
        var examplePOSTFIX = "</body>\n</html>";

        doc.open();
        doc.write(examplePREFIX + exampleCONTENT + examplePOSTFIX);
        doc.close();
    } else {
        $('#unsupported').removeClass('hidden');
        $('#demo').hide();
    }
</script>

<div class='fill-white js-replace-token keyline-top'>

<div id='code'>{% highlight html %}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>{{ page.exampletitle }}</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v{{site.data.package.version}}/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v{{site.data.package.version}}/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

{{content | insert_token}}
</body>
</html>{% endhighlight %}
</div>

  <a class='button icon clipboard col12 round-bottom js-clipboard' href='#' data-clipboard-target='code' id='copy'>Copy example</a>
</div>

</div>
