Skip to content

Instantly share code, notes, and snippets.

@andrewharvey

andrewharvey/10_955_618.pbf

Last active June 26, 2019 06:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewharvey/b7b539bf23cab3df24038789842c84d5 to your computer and use it in GitHub Desktop.
Save andrewharvey/b7b539bf23cab3df24038789842c84d5 to your computer and use it in GitHub Desktop.
Download ZIP
mapbox-gl-symbol-bug
Display the source blob
Display the rendered blob
Raw
data.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Road Name"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
155.77662706375122,
-34.97305643343254
],
[
155.77497482299805,
-35.01425155045955
]
]
}
}
]
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.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.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pzcTA4NjRiMTMxczQzcDFqa29maXk3bSJ9.pVYNTFKfcOXA_U_5TUwDWw';
var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
sources: {
"test": {
type: 'vector',
tiles: ['https://bl.ocks.org/andrewharvey/raw/b7b539bf23cab3df24038789842c84d5/{z}_{x}_{y}.pbf'],
minzoom: 10,
maxzoom: 10
}
},
layers: [
{
id: 'road',
type: 'line',
source: 'test',
'source-layer': 'test',
paint: {},
layout: {}
},
{
id: 'road-label',
type: 'symbol',
source: 'test',
'source-layer': 'test',
paint: {
},
layout: {
'symbol-placement': 'line',
'text-size': 10,
'text-field': ["get", "name"],
'text-allow-overlap': true
}
}
]
},
center: [ 155.77662706375122, -34.97305643343254],
zoom: 10,
hash: true
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment