I built a vector map from scratch(ckochis.com) Hi HN I've used a lot of vector maps in the past, and was always fascinated by the technology, so I decided to try and build one from scratch as a way to learn more about how it works, and also as a reason to (finally) learn WebGL. I've uploaded the source to GitHub https://github.com/kochis/webgl-map Hope someone finds it useful / informative, and open to any feedback or tips as well. Cheers! |
Although everything loaded and “worked” on mobile (I’m using iOS), two small interaction hiccups would be great to solve:
- when panning (on mobile), the panned distance seemed to track the finger’s movement with some factor i.e. when moving “1 cm” of “finger space” (i.e. real world movement), the map moved by more than “1 cm”. (Sorry for the weird units, ha)
- the common pinch zoom gesture is either being detected as something else or just not working? I was able to zoom, somehow, but not in any controlled way
These don’t take anything away from the tutorial! I think that fixing these would make the learning/demo experience even smoother, that’s all.
I may give it a stab since you shared the code :) Cheers
---
Opened an issue to track this: https://github.com/kochis/webgl-map/issues/1
[1]: https://stackoverflow.com/questions/42872774/hammer-js-exhib...
https://blog.mapbox.com/drawing-text-with-signed-distance-fi...
Link to torrent: https://kiwiziti.com/vector.mbtiles.torrent
Yesterday I was wondering how hard it would be to implement a custom map which makes use of vector and raster tiles, and here is an article which is basically a step-by-step tutorial on how to build one.
Wow! It is amazing, very succinct and well-written, congratulations and thanks for sharing!
edit: But I like your blog post, now that I opened it on my Mac.
—- update
Looks like I hit the CF worker limit. Should be back up and running. Thanks for the heads up!
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.