Skip to content

Instantly share code, notes, and snippets.

@klokan
Last active April 27, 2017 12:55
Show Gist options
  • Save klokan/19357831359b9d6ed6018f561be33f03 to your computer and use it in GitHub Desktop.
Save klokan/19357831359b9d6ed6018f561be33f03 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapBox GL JS Local Example</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.css' rel='stylesheet' />
<!--
<script src='mapbox-gl.js'></script>
<link href='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.your-own-code-here-for-online-maps';
mapboxgl.accessToken = 'NOT-REQUIRED-WITH-YOUR-VECTOR-TILES-DATA';
var map = new mapboxgl.Map({
container: 'map',
center: [7.462, 29.520],
zoom: 2.9,
style: "style.json"
});
map.addControl(new mapboxgl.Navigation());
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
{
"version": 8,
"name": "pop-edited",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
"center": [
29.895457023808603,
-2.743701779184505
],
"zoom": 1.87216530099047,
"bearing": 0,
"pitch": 0,
"sources": {
"geojson1": {
"data": "./pop-edited.geojson",
"type": "geojson"
}
},
"glyphs": "http://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "hsl(0, 0%, 100%)"
}
},
{
"id": "pop",
"type": "fill",
"source": "geojson1",
"source-layer": "pop",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": "hsl(0, 0%, 70%)"
}
},
{
"id": "pop titles",
"type": "symbol",
"source": "geojson1",
"source-layer": "pop",
"filter": [
"==",
"$type",
"Point"
],
"layout": {
"visibility": "visible",
"text-field": "{name}"
},
"paint": {
"text-color": "hsl(0, 0%, 0%)"
}
}
],
"created": "2017-04-27T12:35:21.494Z",
"id": "cj20e6ya8004a2sqrztcddg2i",
"modified": "2017-04-27T12:37:51.669Z",
"owner": "georeferencer",
"visibility": "private",
"draft": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment