MapboxGl tile in management client

[Derryrover]

Experimental start of Lizard portal in mapboxGL.

Choose Mapbox paid version? According to Joeri, Yes.

Make rasterviewer. Steer clear of assets (we might still refactor them).
Put this behind a (hidden?) tile in the management client.

[Derryrover]

@joeriverheijden
@lexvand
@LirryPinter

Apenkooi ticket for mapboxGL tile in management client.

[Derryrover]

@lexvand

Hi Lex, could you help me add this to the following Epic?
https://github.com/nens/frontend-tasks/issues/25

Thanks in advance

[Derryrover]

Draft pr:
#814

[Derryrover]

Paid vs Free
For mapboxGL we accept that mapboxGL js is not free.
Free forks now exist, but this brings too much insecurities for now.
Conclusion: We use the paid MapboxGL js version.

React integration
For working together with react we have 2 big options.

1. • https://github.com/visgl/react-map-gl

• Maintained by Uber
• Biggest of the 2
• Seamless integration with deckGL for WebGL rendering
• More github stars and downloads

2. • https://github.com/alex3165/react-mapbox-gl

• Seems to be more geared towards the react big application philosophy although I have some trouble finding concrete examples

Conclusion:
For now I choose option 1: https://github.com/visgl/react-map-gl
Because it seems bigger and we may want to use deckGL.
Here is what react-mapbox-gl themself ay about the comparison:
alex3165/react-mapbox-gl#97
Summary: For dat visualisation use react-map-gl, for applications with layers use /react-mapbox-gl
Note: We are really not sure what the lizard map viewer should do and if it should become a big application, we might prefer option 2.
Time will tell.

[Derryrover]

@hoanphungt

Hi Hoan,

Could you review this pr:
#814

The idea is that the quality is not so high yet, but this feature should be only visible to a select group of users.
Also we should be able to easily remove or hide this if it is really not what we want.
Otherwise we can later improve the code.

kr Tom

[Derryrover]

Transpilation error for mapboxGl in combination with create react app.
Official solution here:
https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

But required some tweeking as described here:
visgl/react-map-gl#1266 (comment)

Unfortunately this probably means a larger bundle size and performance impact, but maybe not a problem.

Solution:
#855

[Derryrover]

@joeriverheijden

Hi Joeri,

A first version of the mapbox tile is on staging:
https://nxt3.staging.lizard.net/management/#/

Only a few users should be able to see this tile:
username === "lex.vandolderen" ||
username === "remco.gerlich" ||
username === "hoan.phung" ||
username === "joeri.verheijden" ||
username === "lirry.pinter" ||
username === "tom.deboer"

You should be able to open the map tile and select layers to show on the map.
By selecting the layer and using the up down buttons you can change the order of layers.

I think next tasks can be requirements + wireframing.

kr Tom

[lexvand]

@joeriverheijden Can this issue be closed or is there anything that should be tested?

[joeriverheijden]

This can be closed. It was an experiment for MapboxGL technique for the new lizard viewer.