Nice tutorial! Brace yourself for the next step (text rendering and label placement) — this is way more difficult than it may seem at first, and contributes to a lot of complexity in Mapbox GL JS.
I built a vector map from scratch
21–30 of 43 posts
Re: I built a vector map from scratch
#22Nice tutorial! Brace yourself for the next step (text rendering and label placement) — this is way more difficult than it may seem at first, and contributes to a lot of complexity in Mapbox GL JS.
Yeah, that’s precisely why I didn’t tackle that. I was wondering though, does it render text in GL on the web, or leverage the DOM? (I’m just using absolute positioning for the tile labels)
Re: I built a vector map from scratch
#23Earlier quoted context omitted.
Yeah, I think this is a known issue with hammer.js[1]. I noticed it too, but didn't spend too much time digging in. [1]: https://stackoverflow.com/questions/42872774/hammer-js-exhib...
As I see demo map[0] uses OpenStreetMap Data , but in such case on demo map page[0] there should be copyright[1] info. [0] https://ckochis.com/webgl-map-demo [1] https://www.openstreetmap.org/copyright
Good callout, I’ll add that in. Most map libs add that automatically, so an oversight on my part.
Re: I built a vector map from scratch
#24Is there any simple way to generate some tiles for a small region (e.g. park or tiny village) to serve pbf files from static server (or CDN)? Map data won't change too often.
Re: I built a vector map from scratch
#25Is there any simple way to generate some tiles for a small region (e.g. park or tiny village) to serve pbf files from static server (or CDN)? Map data won't change too often.
I believe Protomaps[1] might be what you’re looking for.
Re: I built a vector map from scratch
#26Nice tutorial! Brace yourself for the next step (text rendering and label placement) — this is way more difficult than it may seem at first, and contributes to a lot of complexity in Mapbox GL JS.
Yeah, that’s precisely why I didn’t tackle that. I was wondering though, does it render text in GL on the web, or leverage the DOM? (I’m just using absolute positioning for the tile labels)
They’re drawn in WebGL using signed distance fields.
https://blog.mapbox.com/drawing-text-with-signed-distance-fi...
Re: I built a vector map from scratch
#27Thanks for sharing this! I recently went through the process of generating vector tiles for the world at all zoom levels using OpenMapTiles. Seemed like a fun way to make my computer sweat for a while. The process was pretty straightforward, but thought I might as well share the resulting mbtiles file here if anyone wants it.
Link to torrent: https://kiwiziti.com/vector.mbtiles.torrent
Re: I built a vector map from scratch
#28This reliably and repeatedly locks up and crashes my mobile embedded browser and its parent app, my HN reader (Materialistic).
I've never seen a more aggressively crashing site in all my years... took me 6 tries to post this comment, only once I bypassed the linked article/site.
Re: I built a vector map from scratch
#29Earlier quoted context omitted.
The memory consumption on FF is out of control. Just loading the app and not interacting, it's going up at 1GB per few seconds for me with no perceivable upper bound. I killed the tab before risking system instability. With Chrome I'm not seeing this behaviour - the memory is stable at around 500-600M (probably around 400M for the app).
Interesting, my hunch would be something about the webgl buffers not getting freed, since they’re running in a tight loop. I’ll do some digging.
Came here to say the same thing. Great article btw. Finished it with examples/js disabled :)
Re: I built a vector map from scratch
#30Earlier quoted context omitted.
The memory consumption on FF is out of control. Just loading the app and not interacting, it's going up at 1GB per few seconds for me with no perceivable upper bound. I killed the tab before risking system instability. With Chrome I'm not seeing this behaviour - the memory is stable at around 500-600M (probably around 400M for the app).
Interesting, my hunch would be something about the webgl buffers not getting freed, since they’re running in a tight loop. I’ll do some digging.
From a quick look it seems like you're doing gl.createBuffer() in a loop each time you're drawing, and never call gl.deleteBuffer(). It seems like WebGL will call deleteBuffer() automatically when the object is garbage collected by the JS runtime, but calling it explicitly when you're done with it will probably fix this particular issue.
Also a suggestion, try to allocate your buffers only once on setup, and reuse them each time you're drawing. Just call gl.bufferData() in case you need to push new data. Don't use gl.bufferSubData() unless you come up with a clever way to avoid pipeline stalls such as maybe a rotating queue of buffers. This approach might or might not improve performance, but I see little reason not to do it.
To make this work you prbably have to create a vertex arrays object explicitly using gl.createVertexArray(). This object is used to capture the vertex attrib pointers. Call gl.bindVertexArray() before gl.enableVertexArray() and gl.vertexAttribPointer(). Later, in a simple draw you need then only call gl.useProgram() and gl.bindVertexArray(), but there is no need to bind buffers or set vertex attrib pointers.