Menu
<!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/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/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.eyJ1Ijoic2x5IiwiYSI6IjdiYzFmZmY5NTExOTQ0MTExMGVhZDBkZTIwMmRlYjJhIn0.hOz2brurCBMGWGU5EI-waQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-3.69964599609375, 40.417874374140474], // starting position [lng, lat]
zoom: 13 // starting zoom
});
map.on('load', function () {
map.addLayer({
'id': 'population',
'type': 'circle',
'source': {
"type": "vector",
"tiles": ["http://localhost:4000/windwalker_test/tiles/test_table/{z}/{x}/{y}.pbf"]
},
'source-layer': 'defaultLayer',
'paint': {
'circle-color': 'red'
}
});
});
</script>
</body>
</html>
I am hosting a node-mapnik server on http://localhost:4000 that has point data. A sample vector pbf from the server is: https://www.dropbox.com/s/m3f5pnt5rjcfxxw/test_table_13_4011_3088.pbf?dl=0
Mapnik rendering this as a raster is this: https://i.sstatic.net/1o7Z6.png
Reading the protobuf file using https://github.com/mapbox/vector-tile-js I get the following:
VectorTile {
layers: {
defaultLayer: VectorTileLayer {
version: 2,
name: 'defaultLayer',
extent: 4096,
length: 5,
_pbf: {
buf: < Buffer 1 a cc 03 78 02 0 a 0 c 64 65 66 61 75 6 c 74 4 c 61 79 65 72 28 80 20 1 a 07 61 64 64 72 65 73 73 22 2 a 0 a 28 43 61 6 c 6 c 65 20 64 65 20 50 c3 a9 72 65 7 a... > ,
pos: 463,
type: 2,
length: 463
},
_keys: ['address', 'cartodb_id', 'name'],
_values: ['Calle de Pérez Galdós 9, Madrid, Spain',
1,
'Hawai',
'Calle de la Palma 72, Madrid, Spain',
2,
'El Estocolmo',
'Plaza Conde de Toreno 2, Madrid, Spain',
3,
'El Rey del Tallarín',
'Manuel Fernández y González 8, Madrid, Spain',
4,
'El Lacón',
'Calle Divino Pastor 12, Madrid, Spain',
5,
'El Pico'
],
_features: [107, 187, 278, 366, 443]
}
}
}
Which the information seems correct. Yet when I view the map where the points are located I don't see them. What am I missing?
Ive tried type: line and type: fill and using line-color and fill-color. I also played around with circle-radius with no luck
The mapnik server will produce a png or a pbf if you change the extention so I've confirmed that when using type:raster and specifying png that it correctly renders the raster so there must be something I am not doing right
572
Figured out the answer, turns out I dynamically set the layer Id right before it gets output from node.
Requesting a close on this SO as it cannot help anyone in the future
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
