Simple example demonstrating how to use third-party raster tiles in Mapbox GL JS.
forked from danswick's block: 3rd party raster tiles in Mapbox GL JS
license: mit |
Simple example demonstrating how to use third-party raster tiles in Mapbox GL JS.
forked from danswick's block: 3rd party raster tiles in Mapbox GL JS
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script> | |
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoieUZiWmwtVSJ9.0cPQywdbPVmvHiHJ6NwdXA'; | |
var map = new mapboxgl.Map({ | |
container: 'map', // container id | |
style: { | |
"version": 8, | |
"sources": { | |
"simple-tiles": { | |
"type": "raster", | |
// point to our third-party tiles. Note that some examples | |
// show a "url" property. This only applies to tilesets with | |
// corresponding TileJSON (such as mapbox tiles). | |
"tiles": [ | |
"http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", | |
"http://b.tile.openstreetmap.org/{z}/{x}/{y}.png" | |
], | |
"tileSize": 256 | |
} | |
}, | |
"layers": [{ | |
"id": "simple-tiles", | |
"type": "raster", | |
"source": "simple-tiles", | |
"minzoom": 0, | |
"maxzoom": 22 | |
}] | |
}, | |
center: [-74.50, 40], // starting position | |
zoom: 2 // starting zoom | |
}); | |
//map.addControl(new mapboxgl.Navigation()); | |
</script> | |
</body> | |
</html> |