WMS as background layer for geographic data

I was wondering if it is possible to visualise layer from a WMS as background layer for my geographical data.
I have geographical objects in a Oracle database and planned to have two layer from two different WMS for the user to chose as background layer.

Hi @TomGeo,

I looked into this a bit, and it looks like it’s not quite possible. Here’s the general approach that I thought would work…

Unfortunately, it looks like sourcetype = 'raster' isn’t supported by Plotly.js as a mapbox layer at the moment. Here’s the latest plotly.js issue I could find that mentions it https://github.com/plotly/plotly.js/pull/681.

It would be worth opening feature request issue in the plotly.js repo if you can spare a moment (https://github.com/plotly/plotly.js/issues). I don’t have a good sense of how much work it would be for Plotly.js to add raster support.

One other approach, that would be a lot more manual work, would be to see if you could convert the WMS rasters into PNG’s and display them as background images on a normal scatter plot (See https://plot.ly/python/images/#zoom-on-static-images). This would require computing 2D cartesian coordinates for everything, which I realize can be a bit of a hassle.

Hope that helps clear things up!

Hi @jmmease,

I certainly have that bit of time to do the feature request. Especially, because the use of WMS data is pretty much standard when it comes to provide access to geographical data. Hence, data of such nature are important to use.

I agree with you on the idea to convert the returns from the service into PNGs. However, the area covered by the data is entire Denmark and depending on the zoom level into the area, the original ortho photos will be tiled, resulting in many smaller images. I have the feeling that the approach to convert all these data will be so slow, nobody will use the service.

Bests Thomas

As side note, this problem has some similarities with this DataShader example. In this example a callback is registered to run whenever the zoom level changes, and the callback calls DataShader to generate a new image for the specified zoom level. DataShader can produce this image as a PIL.Image.Image object, which can be passed directly to plotly.py (plotly.py will internally convert this into an encoded png URI string).

Do you have a sense of how many tiles would be needed for the zoomed out version? Are they in a form that could be converted to PIL images (https://pillow.readthedocs.io/en/3.1.x/reference/Image.html)?


Is it possible using mapbox with a custom layer?

import plotly.graph_objects as go

fig = go.Figure()

            "below": 'traces',
            "sourcetype": "raster",
            "source": ["http://localhost:8080/myWMSServer/wms?"]


This isn’t quite working yet, but I’m not sure if that is because I’m getting the source incorrect (I’ve tried using an address that will serve me a png map in the browser but that didn’t work either) or if this idea will simply not work at all…

I’d be grateful if anyone has any suggestions.

Cross-posting from the related Github issue:

I’m sorry our docs are not sufficiently clear on this point… The contents of the source array are passed to Mapbox.js and according to their docs, should be TileJSON-compliant. Basically this means that these URLs should have {x} , {y} and {z} placeholders OR a {bbox-epsg-3857} placeholder. We have an example in our docs with both in the same map here: https://plot.ly/python/mapbox-layers/#base-tiles-from-the-usgs-radar-overlay-from-environment-canada-no-token-needed

I think that Dash Leaflet should be able to do it. See e.g. example 2 here,