Skip to content

Instantly share code, notes, and snippets.

@klokan

klokan/mapbox-vector-tiles.html

Created October 8, 2015 16:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save klokan/5f7bedff2597e3576bbd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save klokan/5f7bedff2597e3576bbd to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers 3 / OL3 MapBox Vector Tiles (OSM Bright): http://ahocevar.net/ol3/vectortile/examples/mapbox-vector-tiles.html
Raw
mapbox-vector-tiles.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<link rel="stylesheet" href="mapbox-vector-tiles.css">
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>Mapbox vector tiles example</title>
</head>
<body>
<header class="navbar" role="navigation">
<div class="container" id="navbar-inner-container">
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Mapbox vector tiles example</h4>
<p id="shortdesc">Example of a Mapbox vector tiles map.</p>
<div id="docs"><p>A vector tiles map which reuses the same tiles for subsequent zoom levels to save bandwith on mobile devices.</p>
</div>
<div id="tags">simple, mapbox, vector, tiles</div>
<div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Attribution.html" title="API documentation for ol.Attribution">ol.Attribution</a></li>,<li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.format.MVT.html" title="API documentation for ol.format.MVT">ol.format.MVT</a></li>,<li><a href="../apidoc/ol.layer.VectorTile.html" title="API documentation for ol.layer.VectorTile">ol.layer.VectorTile</a></li>,<li><a href="../apidoc/ol.proj.html" title="API documentation for ol.proj">ol.proj</a></li>,<li><a href="../apidoc/ol.source.VectorTile.html" title="API documentation for ol.source.VectorTile">ol.source.VectorTile</a></li>,<li><a href="../apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a></li>,<li><a href="../apidoc/ol.style.Icon.html" title="API documentation for ol.style.Icon">ol.style.Icon</a></li>,<li><a href="../apidoc/ol.style.Stroke.html" title="API documentation for ol.style.Stroke">ol.style.Stroke</a></li>,<li><a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a></li>,<li><a href="../apidoc/ol.style.Text.html" title="API documentation for ol.style.Text">ol.style.Text</a></li>,<li><a href="../apidoc/ol.tilegrid.TileGrid.html" title="API documentation for ol.tilegrid.TileGrid">ol.tilegrid.TileGrid</a></li></ul></div>
</div>
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
</div>
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<textarea class="hidden" name="js">// Mapbox access token - request your own at http://mapbox.com
var accessToken =
&#x27;pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg&#x27;;
// For how many zoom levels do we want to use the same vector tiles?
// 1 means &quot;use tiles from all zoom levels&quot;. 2 means &quot;use the same tiles for 2
// subsequent zoom levels&quot;.
var reuseZoomLevels = 2;
// Offset of loaded tiles from web mercator zoom level 0.
// 0 means &quot;At map zoom level 0, use tiles from zoom level 0&quot;. 1 means &quot;At map
// zoom level 0, use tiles from zoom level 1&quot;.
var zoomOffset = 1;
// Calculation of tile urls
var resolutions = [];
for (var z = zoomOffset / reuseZoomLevels; z &lt;= 22 / reuseZoomLevels; ++z) {
resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
}
function tileUrlFunction(tileCoord) {
return (&#x27;http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/&#x27; +
&#x27;{z}/{x}/{y}.vector.pbf?access_token=&#x27; + accessToken)
.replace(&#x27;{z}&#x27;, String(tileCoord[0] * reuseZoomLevels + zoomOffset))
.replace(&#x27;{x}&#x27;, String(tileCoord[1]))
.replace(&#x27;{y}&#x27;, String(-tileCoord[2] - 1))
.replace(&#x27;{a-d}&#x27;, &#x27;abcd&#x27;.substr(
((tileCoord[1] &lt;&lt; tileCoord[0]) + tileCoord[2]) % 4, 1));
}
var map = new ol.Map({
layers: [
new ol.layer.VectorTile({
preload: Infinity,
source: new ol.source.VectorTile({
attributions: [new ol.Attribution({
html: &#x27;© &lt;a href=&quot;https://www.mapbox.com/map-feedback/&quot;&gt;Mapbox&lt;/a&gt; &#x27; +
&#x27;© &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;&#x27; +
&#x27;OpenStreetMap contributors&lt;/a&gt;&#x27;
})],
format: new ol.format.MVT(),
tileGrid: new ol.tilegrid.TileGrid({
extent: ol.proj.get(&#x27;EPSG:3857&#x27;).getExtent(),
resolutions: resolutions
}),
tilePixelRatio: 16,
tileUrlFunction: tileUrlFunction
}),
style: (function() {
var fill = new ol.style.Fill({color: &#x27;&#x27;});
var stroke = new ol.style.Stroke({color: &#x27;&#x27;, width: 1});
var polygon = new ol.style.Style({fill: fill});
var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
var line = new ol.style.Style({stroke: stroke});
var text = new ol.style.Style({text: new ol.style.Text({
text: &#x27;&#x27;, fill: fill, stroke: stroke
})});
var iconCache = {};
function getIcon(iconName) {
var icon = iconCache[iconName];
if (!icon) {
icon = new ol.style.Style({image: new ol.style.Icon({
src: &#x27;data/maki-icon/&#x27; + iconName + &#x27;-12.png&#x27;
})});
iconCache[iconName] = icon;
}
return icon;
}
var styles = [];
return function(feature, resolution) {
var length = 0;
var layer = feature.get(&#x27;layer&#x27;);
var cls = feature.get(&#x27;class&#x27;);
var type = feature.get(&#x27;type&#x27;);
var scalerank = feature.get(&#x27;scalerank&#x27;);
var labelrank = feature.get(&#x27;labelrank&#x27;);
var adminLevel = feature.get(&#x27;admin_level&#x27;);
var maritime = feature.get(&#x27;maritime&#x27;);
var disputed = feature.get(&#x27;disputed&#x27;);
var maki = feature.get(&#x27;maki&#x27;);
var geom = feature.getGeometry().getType();
if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;park&#x27;) {
fill.setColor(&#x27;#d8e8c8&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;cemetery&#x27;) {
fill.setColor(&#x27;#e0e4dd&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;hospital&#x27;) {
fill.setColor(&#x27;#fde&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;school&#x27;) {
fill.setColor(&#x27;#f0e8f8&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;wood&#x27;) {
fill.setColor(&#x27;rgb(233,238,223)&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;waterway&#x27; &amp;&amp;
cls != &#x27;river&#x27; &amp;&amp; cls != &#x27;stream&#x27; &amp;&amp; cls != &#x27;canal&#x27;) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.3);
styles[length++] = line;
} else if (layer == &#x27;waterway&#x27; &amp;&amp; cls == &#x27;river&#x27;) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;waterway&#x27; &amp;&amp; (cls == &#x27;stream&#x27; ||
cls == &#x27;canal&#x27;)) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.3);
styles[length++] = line;
} else if (layer == &#x27;water&#x27;) {
fill.setColor(&#x27;#a0c8f0&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;aeroway&#x27; &amp;&amp; geom == &#x27;Polygon&#x27;) {
fill.setColor(&#x27;rgb(242,239,235)&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;aeroway&#x27; &amp;&amp; geom == &#x27;LineString&#x27; &amp;&amp;
resolution &lt;= 76.43702828517625) {
stroke.setColor(&#x27;#f0ede9&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;building&#x27;) {
fill.setColor(&#x27;#f2eae2&#x27;);
stroke.setColor(&#x27;#dfdbd7&#x27;);
stroke.setWidth(1);
styles[length++] = strokedPolygon;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;service&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp;
(cls == &#x27;street&#x27; || cls == &#x27;street_limited&#x27;)) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;motorway&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; (cls == &#x27;street&#x27; ||
cls == &#x27;street_limited&#x27;) &amp;&amp; geom == &#x27;LineString&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;motorway&#x27; &amp;&amp;
resolution &lt;= 4891.96981025128) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;motorway&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;service&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp;
(cls == &#x27;street&#x27; || cls == &#x27;street_limited&#x27;)) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel &gt;= 3 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp;
disputed === 0 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp;
disputed === 1 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel &gt;= 3 &amp;&amp; maritime === 1) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp; maritime === 1) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 1) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 2 &amp;&amp;
resolution &lt;= 19567.87924100512) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 10px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 3 &amp;&amp;
resolution &lt;= 9783.93962050256) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 4 &amp;&amp;
resolution &lt;= 4891.96981025128) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 8px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 1 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 2 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 3 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 10px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 4 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;city&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;town&#x27; &amp;&amp;
resolution &lt;= 305.748113140705) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;village&#x27; &amp;&amp;
resolution &lt;= 38.21851414258813) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;8px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp;
resolution &lt;= 19.109257071294063 &amp;&amp; (type == &#x27;hamlet&#x27; ||
type == &#x27;suburb&#x27; || type == &#x27;neighbourhood&#x27;)) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 9px &quot;Arial Narrow&quot;&#x27;);
fill.setColor(&#x27;#633&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 19.109257071294063 &amp;&amp;
scalerank == 1 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 9.554628535647032 &amp;&amp;
scalerank == 2 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 4.777314267823516 &amp;&amp;
scalerank == 3 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 2.388657133911758 &amp;&amp;
scalerank == 4 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 1.194328566955879 &amp;&amp;
scalerank &gt;= 5 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
}
styles.length = length;
return styles;
};
})()
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [0, 0],
minZoom: 1,
zoom: 2
})
});
</textarea>
<textarea class="hidden" name="css">.map {
background: #f8f4f0;
}
</textarea>
<textarea class="hidden" name="html">&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</textarea>
<input type="hidden" name="wrap" value="l">
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v3.9.0/css/ol.css,http://openlayers.org/en/v3.9.0/build/ol.js">
</form>
<pre><code id="example-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Mapbox vector tiles example&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v3.9.0/build/ol.js"&gt;&lt;/script&gt;
&lt;style&gt;
.map {
background: #f8f4f0;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
// Mapbox access token - request your own at http://mapbox.com
var accessToken =
&#x27;pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg&#x27;;
// For how many zoom levels do we want to use the same vector tiles?
// 1 means &quot;use tiles from all zoom levels&quot;. 2 means &quot;use the same tiles for 2
// subsequent zoom levels&quot;.
var reuseZoomLevels = 2;
// Offset of loaded tiles from web mercator zoom level 0.
// 0 means &quot;At map zoom level 0, use tiles from zoom level 0&quot;. 1 means &quot;At map
// zoom level 0, use tiles from zoom level 1&quot;.
var zoomOffset = 1;
// Calculation of tile urls
var resolutions = [];
for (var z = zoomOffset / reuseZoomLevels; z &lt;= 22 / reuseZoomLevels; ++z) {
resolutions.push(156543.03392804097 / Math.pow(2, z * reuseZoomLevels));
}
function tileUrlFunction(tileCoord) {
return (&#x27;http://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/&#x27; +
&#x27;{z}/{x}/{y}.vector.pbf?access_token=&#x27; + accessToken)
.replace(&#x27;{z}&#x27;, String(tileCoord[0] * reuseZoomLevels + zoomOffset))
.replace(&#x27;{x}&#x27;, String(tileCoord[1]))
.replace(&#x27;{y}&#x27;, String(-tileCoord[2] - 1))
.replace(&#x27;{a-d}&#x27;, &#x27;abcd&#x27;.substr(
((tileCoord[1] &lt;&lt; tileCoord[0]) + tileCoord[2]) % 4, 1));
}
var map = new ol.Map({
layers: [
new ol.layer.VectorTile({
preload: Infinity,
source: new ol.source.VectorTile({
attributions: [new ol.Attribution({
html: &#x27;© &lt;a href=&quot;https://www.mapbox.com/map-feedback/&quot;&gt;Mapbox&lt;/a&gt; &#x27; +
&#x27;© &lt;a href=&quot;http://www.openstreetmap.org/copyright&quot;&gt;&#x27; +
&#x27;OpenStreetMap contributors&lt;/a&gt;&#x27;
})],
format: new ol.format.MVT(),
tileGrid: new ol.tilegrid.TileGrid({
extent: ol.proj.get(&#x27;EPSG:3857&#x27;).getExtent(),
resolutions: resolutions
}),
tilePixelRatio: 16,
tileUrlFunction: tileUrlFunction
}),
style: (function() {
var fill = new ol.style.Fill({color: &#x27;&#x27;});
var stroke = new ol.style.Stroke({color: &#x27;&#x27;, width: 1});
var polygon = new ol.style.Style({fill: fill});
var strokedPolygon = new ol.style.Style({fill: fill, stroke: stroke});
var line = new ol.style.Style({stroke: stroke});
var text = new ol.style.Style({text: new ol.style.Text({
text: &#x27;&#x27;, fill: fill, stroke: stroke
})});
var iconCache = {};
function getIcon(iconName) {
var icon = iconCache[iconName];
if (!icon) {
icon = new ol.style.Style({image: new ol.style.Icon({
src: &#x27;data/maki-icon/&#x27; + iconName + &#x27;-12.png&#x27;
})});
iconCache[iconName] = icon;
}
return icon;
}
var styles = [];
return function(feature, resolution) {
var length = 0;
var layer = feature.get(&#x27;layer&#x27;);
var cls = feature.get(&#x27;class&#x27;);
var type = feature.get(&#x27;type&#x27;);
var scalerank = feature.get(&#x27;scalerank&#x27;);
var labelrank = feature.get(&#x27;labelrank&#x27;);
var adminLevel = feature.get(&#x27;admin_level&#x27;);
var maritime = feature.get(&#x27;maritime&#x27;);
var disputed = feature.get(&#x27;disputed&#x27;);
var maki = feature.get(&#x27;maki&#x27;);
var geom = feature.getGeometry().getType();
if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;park&#x27;) {
fill.setColor(&#x27;#d8e8c8&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;cemetery&#x27;) {
fill.setColor(&#x27;#e0e4dd&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;hospital&#x27;) {
fill.setColor(&#x27;#fde&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;school&#x27;) {
fill.setColor(&#x27;#f0e8f8&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;landuse&#x27; &amp;&amp; cls == &#x27;wood&#x27;) {
fill.setColor(&#x27;rgb(233,238,223)&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;waterway&#x27; &amp;&amp;
cls != &#x27;river&#x27; &amp;&amp; cls != &#x27;stream&#x27; &amp;&amp; cls != &#x27;canal&#x27;) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.3);
styles[length++] = line;
} else if (layer == &#x27;waterway&#x27; &amp;&amp; cls == &#x27;river&#x27;) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;waterway&#x27; &amp;&amp; (cls == &#x27;stream&#x27; ||
cls == &#x27;canal&#x27;)) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1.3);
styles[length++] = line;
} else if (layer == &#x27;water&#x27;) {
fill.setColor(&#x27;#a0c8f0&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;aeroway&#x27; &amp;&amp; geom == &#x27;Polygon&#x27;) {
fill.setColor(&#x27;rgb(242,239,235)&#x27;);
styles[length++] = polygon;
} else if (layer == &#x27;aeroway&#x27; &amp;&amp; geom == &#x27;LineString&#x27; &amp;&amp;
resolution &lt;= 76.43702828517625) {
stroke.setColor(&#x27;#f0ede9&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;building&#x27;) {
fill.setColor(&#x27;#f2eae2&#x27;);
stroke.setColor(&#x27;#dfdbd7&#x27;);
stroke.setWidth(1);
styles[length++] = strokedPolygon;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;service&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp;
(cls == &#x27;street&#x27; || cls == &#x27;street_limited&#x27;)) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;motorway&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;tunnel&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; (cls == &#x27;street&#x27; ||
cls == &#x27;street_limited&#x27;) &amp;&amp; geom == &#x27;LineString&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;motorway&#x27; &amp;&amp;
resolution &lt;= 4891.96981025128) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;road&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;motorway_link&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;motorway&#x27;) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;service&#x27;) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp;
(cls == &#x27;street&#x27; || cls == &#x27;street_limited&#x27;)) {
stroke.setColor(&#x27;#cfcdca&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;main&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
stroke.setColor(&#x27;#e9ac77&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;path&#x27;) {
stroke.setColor(&#x27;#cba&#x27;);
stroke.setWidth(1.2);
styles[length++] = line;
} else if (layer == &#x27;bridge&#x27; &amp;&amp; cls == &#x27;major_rail&#x27;) {
stroke.setColor(&#x27;#bbb&#x27;);
stroke.setWidth(1.4);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel &gt;= 3 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp;
disputed === 0 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp;
disputed === 1 &amp;&amp; maritime === 0) {
stroke.setColor(&#x27;#9e9cab&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel &gt;= 3 &amp;&amp; maritime === 1) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;admin&#x27; &amp;&amp; adminLevel == 2 &amp;&amp; maritime === 1) {
stroke.setColor(&#x27;#a0c8f0&#x27;);
stroke.setWidth(1);
styles[length++] = line;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 1) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 2 &amp;&amp;
resolution &lt;= 19567.87924100512) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 10px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 3 &amp;&amp;
resolution &lt;= 9783.93962050256) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;country_label&#x27; &amp;&amp; scalerank === 4 &amp;&amp;
resolution &lt;= 4891.96981025128) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 8px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#334&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(2);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 1 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 2 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 3 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 10px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;marine_label&#x27; &amp;&amp; labelrank === 4 &amp;&amp;
geom == &#x27;Point&#x27;) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(
&#x27;italic 9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#74aee9&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(0.75);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;city&#x27; &amp;&amp;
resolution &lt;= 1222.99245256282) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;11px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;town&#x27; &amp;&amp;
resolution &lt;= 305.748113140705) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;9px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp; type == &#x27;village&#x27; &amp;&amp;
resolution &lt;= 38.21851414258813) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;8px &quot;Open Sans&quot;, &quot;Arial Unicode MS&quot;&#x27;);
fill.setColor(&#x27;#333&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;place_label&#x27; &amp;&amp;
resolution &lt;= 19.109257071294063 &amp;&amp; (type == &#x27;hamlet&#x27; ||
type == &#x27;suburb&#x27; || type == &#x27;neighbourhood&#x27;)) {
text.getText().setText(feature.get(&#x27;name_en&#x27;));
text.getText().setFont(&#x27;bold 9px &quot;Arial Narrow&quot;&#x27;);
fill.setColor(&#x27;#633&#x27;);
stroke.setColor(&#x27;rgba(255,255,255,0.8)&#x27;);
stroke.setWidth(1.2);
styles[length++] = text;
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 19.109257071294063 &amp;&amp;
scalerank == 1 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 9.554628535647032 &amp;&amp;
scalerank == 2 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 4.777314267823516 &amp;&amp;
scalerank == 3 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 2.388657133911758 &amp;&amp;
scalerank == 4 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
} else if (layer == &#x27;poi_label&#x27; &amp;&amp; resolution &lt;= 1.194328566955879 &amp;&amp;
scalerank &gt;= 5 &amp;&amp; maki !== &#x27;marker&#x27;) {
styles[length++] = getIcon(maki);
}
styles.length = length;
return styles;
};
})()
})
],
target: &#x27;map&#x27;,
view: new ol.View({
center: [0, 0],
minZoom: 1,
zoom: 2
})
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="./resources/common.js"></script>
<script src="./resources/prism/prism.min.js"></script>
<script src="loader.js?id=mapbox-vector-tiles"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment