Mapbox example

[tsherif]

An example using luma with Mapbox's custom layers API originally started in #1215

[coveralls]

Coverage increased (+3.9%) to 65.643% when pulling b47f7e0 on mapbox-example into ae31af8 on master.

[Pessimistress]

Why do we have an animation loop inside of AnimationLoop? Can move this to onRender?

[tsherif]

It's not AnimationLoop. It's MiniAnimationLoop, a class I created for examples that need to control the render loop (see the low level tutorial example as well).

[ibgreen]

@tsherif Nice work!

Just an idea: I do think this example would be even more impactful if there was some kind of correlation between the map and the luma.gl graphics, specifically in terms of positioning and scale and "semantic meaning".

I totally understand we want to keep the code simple, and that time is limited. These are just some simple ideas that might not require too much additional work:

• instead of just one triangle, perhaps a simple polygon that matches the underlying maps geometry (perhaps covering a few blocks)
• or maybe a simple 3D pyramid on top of the transamerica pyramid foundations showing the rough 3D shape of that building?

[tsherif]

instead of just one triangle, perhaps a simple polygon that matches the underlying maps geometry (perhaps covering a few blocks)

This one does use coordinates of actual landmarks: Times Square, Columbus Circle and Carnegie hall. I can add that to the info panel, to make it a bit more meaningful.

or maybe a simple 3D pyramid on top of the transamerica pyramid foundations showing the rough 3D shape of that building?

I like this idea a lot. I'm thinking we can have two examples, basic and advanced. I like this one because the simple shape lets you focus on how coordinates are manipulated and the mapbox/luma interaction. For more advanced usage, it would be cool to load a gltf model of a building (via loaders of course!) and render that on a map. I'll merge this PR for the basic example, and create a separate one for the advanced usage.

[tsherif]

BTW, you can see the live example here: https://tsherif.github.io/luma.gl/examples/showcase/geospatial/

[ibgreen]

BTW, you can see the live example here: https://tsherif.github.io/luma.gl/examples/showcase/geospatial/

This looks awesome. Nice to see your vision for the docs coming together, makes it much easier to appreciate. I really like the tutorials part.

We could investigate the integrating the codesandbox gatsby plugin that nebula.gl uses, that would make your tutorial examples live editable.

Nits: There are some font issues with headers (at least I feel that it should be a sans serif font) and I think you need more space at the bottom of the ToC, I have a hard time seeing / clicking on the last items in the lists. But I realize that this is staging and I assume those are all known issues.

[tsherif]

There are some font issues with headers (at least I feel that it should be a sans serif font) and I think you need more space at the bottom of the ToC

The styling is still be the out-of-the-box ocular gatsby style, so it should look the same as the other sites. Is it showing up differently for you than e.g. the loaders.gl site?

[ibgreen]

The styling is still be the out-of-the-box ocular gatsby style,

Yes these are likely common issues. For the font, I think there was a removal of a font that was licensed from ocular-gatsby, and it looks like the replacement is not working properly. I thought it was broken on Safari only but see it in Chrome now as well.

@jckr has the details on that I believe,