Leaflet component

[HansKallekleiv]

Layer types:

• TileLayer - Locally served tiles using flask route or base64 transfer?)

• Performant ImageLayer for fast flipping through images

• GL based Tile/Image layers with mouse readout and manipulation of z-value (e.g. difference between two maps)

• Well trajectories (simple lines)

• Well logs using d3.js / pixi.js activated at specific zoom level
  https://github.com/manubb/Leaflet.PixiOverlay

• Fault polygons, etc

• Client side selection of colormap.

Data input:

• Performant image generation from surfaces (python)

• Performant tile generation from images (python)

Interactivity:

• Draw polylines, polygons and points on a map

[anders-kiaer]

Sounds good! 🎉🚀 I guess we might want to collaborate on that same PR #109, when people have time (cc @anders-kiaer, @HansKallekleiv, @thor85 ++) - we can always go back some commits if we decide on going a different route.

Since this is a big issue - we can maybe put our name behind each of the subtasks when self-assigning something, such that we don't work on the same item simultaneously.

[HansKallekleiv]

Good plan. Also feel free to add any tasks / ideas to this issue. The list above is far from complete.

[thor85]

I tried looking into tile generation/serving. No conclusion, but posting some links you can check out.

• GDAL which Troll maps are using works good for pre-generating tiles and reading them from disk.
• Looks like TileMill (github) can generate tiles in MBTiles format, but seems like that maybe also uses GDAL?.
• Leaflet.TileLayer.MBTiles can display MBTiles in Leaflet (only raster tiles).
• Tilelive Fast interface to tiles with pluggable backends
• TileCache
• TileStache
• TileStream
• MapTiler
• TileCloud Chain
• PGRestAPI
• TileServer GL

Vector tiles is probably not the solution for surfaces, but could maybe be used for other data, e.g. cylinder logs?

• mapbox-vector-tile
• geojson-vt Create vector tiles on-the-fly without a server. Explanation
• Leaflet.VectorTileLayer Slice GeoJSON/TopoJSON into vector tiles or display vector tiles hosted and transferred with protobuf. Seems like it does not work with MBTiles format yet.
• Mapbox GL Leaflet WebGL layer for vector tiles.

[ashildskalnes]

I would also like to have an option to print a well name along a well (not only as tooltip)

[thor85]

I would also like to have an option to print a well name along a well (not only as tooltip)

Currently I show wellnames on a tileLayer in Troll Maps, but I have made a branch where I display names as svg. It was noticeably slower on Troll with so many wellbores, so I left it for a while untill I have time to look at a different option (maybe pixiJS?). Svg probably works fine for most fields with much less wells though.

[ashildskalnes]

Correct colormap scaling given min-/max values (both for map values inside or outside given min/max)

[ashildskalnes]

Possibility to change the map without having to add the well layers again

[asnyv]

Should have an option for logarithmic colormap (e.g. for permeability)

[anders-kiaer]

This is a summary of feature requests that is aimed for being included in the Dash LayeredMap component ("version 2") - which will replace and improve the existing LayeredMap component.

The existing component can be viewed in action in the live demo on e.g. pages "Surface with seismic cross-section" (which shows how the user can draw a line, update the component state, and use Dash callbacks to update another Dash component) and "Surface viewer (FMU)" (which shows usage of syncing different instances of the same component). Example of Python usage of the current version is available here.

It can be assumed that the data to be visualized is available locally on disk, and available to the Python instance running.

Existing features that should probably be kept in some way:

• Possibility for the Python user to send map data in some efficient format, appearing in different layers in the map.
• Possibility for the Python user to send overlays (lines, polygons, circles etc.) with tooltips.
• Possibility for the Python user to say that some given instances should sync zoom/pan.
• Possibility for the Python user to allow the client/browser user to scale the y axis (e.g. if the visualized data is not a map, but seismic intersection).
• Possibility for the Python user to allow the client/browser user to turn on/off hill shading.*
• Possibility for the Python user to allow the client/browser user to draw line/polygon or place a circle (which updates some state in the component based on the coordinates of the drawn object). The Python user can then use this state as input to further Dash callbacks.

* We have some simple hill shading implemented in the current version using WebGL. This could be improved (see this and this reference for inspiration).

Improvements to existing features / new features:

• Might be better to work directly on https://leafletjs.com/ compared with the currently used https://react-leaflet.js.org/ (and instead do the top React wrapping towards the Dash component building ourselves).
• xy position and value of map indicated on hover.
• Show colorscales of selected maps.
• Possibility to do client side selection of used colormap (using e.g. Plotly's own colorscale React component).
• Possibility to have logarithmic colormap.
• Possibility to set cut-off points on colormap (i.e. that all values below/above cut-off has same color).
• Currently if any of the visualized data is updated, all the visualized data needs to be sent again from server to client. Only send changed data.
• Currently only "static" data is supported, which do not scale to big data sets/maps. Investigate usage of tile server (preferably served by Flask to be within the same software stack as Dash). Efficient creation of the tiles is not within scope of the project. Can e.g. assume they are premade and available on disk, and then maybe use something along the lines of this concept:

from flask import Flask

app = Flask(__name__)

@app.route("/tiles/<zoom>/<y>/<x>")
def tiles(zoom, y, x):
    return send_file(f"./sometile{zoom}_{x}_{y}.png")

if __name__ == "__main__":
    app.run(debug=False, host="localhost", port=8080)

[anders-kiaer]

A bit more explanation on the "logarithmic colormap" and "cut-of points" on colormap.

• The Python user of the component should be able to choose between linear and logarithmic scale (default linear).
• The Python user should be able to set end-points of the colormap (default could be min-max of input data).
  • If user provides a colormap min/max end point that is higher/lower than global min/max in the map data, could show a ≤/≥ to indicate that the end point of the colormap is used as a "cut-off".
  • If user provides a colormap min/max end point that is lower/higher than global min/max in the map data, the effect is simply a larger range of the colormap.

A rough sketch of linear/logarithmic in MS Paint 😎 🎨

[anders-kiaer]

Implemented in #219. Let us move any remaining missing/wanted feature requests to separate issues.