Search code examples
elmmapbox-gl-jswms

How to get Wms endpoint working with elm-mapbox?


I am using the following elm mapbox library:
gampleman/elm-mapbox
Is it possible to get the raster from the following WMS endpoint on the map?
https://demo.lizard.net/api/v3/wms/?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=dem%3Anl&STYLES=dem-nl&FORMAT=image%2Fpng&TRANSPARENT=false&HEIGHT=256&WIDTH=256&TIME=2019-09-12T19%3A35%3A37&SRS=EPSG%3A3857&BBOX=508764.86026613315,6770486.217387771,547900.6187481433,6809621.975869781
(the bbox coordinates are only valid for the Netherlands)

I have tried adding the wms source to the example code from here:
https://github.com/gampleman/elm-mapbox/blob/master/examples/Example01.elm

The docs of gampleman/elm-mapbox do not mention Wms. Could it be that Wms is not yet supported fo this elm library?
Mapbox gl js itself seems to support it:
https://docs.mapbox.com/mapbox-gl-js/example/wms/?utm_medium=sem&utm_source=google&utm_campaign=sem|google|brand|chko-googlesearch-pr01-dynamicsearchcampaign-nb.broad-all-landingpage-search&utm_term=brand&utm_content=chko-googlesearch-pr01-dynamicsearchcampaign-nb.broad-all-landingpage-search&gclid=Cj0KCQjw2efrBRD3ARIsAEnt0ehhCw0OySW524_KF8DfZfOrlIyuIR2us1-oLrc1nvgWHxAKjPw3nEcaAqO7EALw_wcB
I used the example in above url to try set "sources" in below code:

            (Style
                { transition = Style.defaultTransition
                , light = Style.defaultLight
                , sources =
                    [ Source.vectorFromUrl "composite" "mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7"
                    , Source.rasterFromUrl "height" "https://demo.lizard.net/api/v3/wms/?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=dem%3Anl&STYLES=dem-nl&FORMAT=image%2Fpng&TRANSPARENT=false&HEIGHT=256&WIDTH=256&TIME=2019-09-12T19%3A35%3A37&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}"
                    ]
                , misc =
                    [ 
                      Style.name "light"
                    , Style.defaultCenter <| LngLat 20.39789404164037 43.22523201923144
                    , Style.defaultZoomLevel 1.5967483759772743
                    , Style.sprite "mapbox://sprites/mapbox/streets-v7"
                    , Style.glyphs "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", Layer.fill "landcover"
                        "composite"
                        [ Layer.sourceLayer "landcover"
                        , E.any
                            [ E.getProperty (str "class") |> E.isEqual (str "wood")
                            , E.getProperty (str "class") |> E.isEqual (str "scrub")
                            , E.getProperty (str "class") |> E.isEqual (str "grass")
                            , E.getProperty (str "class") |> E.isEqual (str "crop")
                            ]
                            |> Layer.filter
                        , Layer.fillColor (E.rgba 227 227 227 1)
                        , Layer.fillOpacity (float 0.6)
                        ]
                    ]
                , layers =
                    [ Layer.raster "height" "height" []

                    ]
                }
            )

Result should be that the area of the Netherlands shows a height map as in the url.
But at them moment I just get a 500 http status because the generated url contains literally the string &BBOX={bbox-epsg-3857} as I defined in the source


Solution

  • The documentation for rasterFromUrl specifies:

    rasterFromUrl : Id -> Url -> Source
    
    A raster tile source configured from a TileJSON spec.
    

    https://package.elm-lang.org/packages/gampleman/elm-mapbox/latest/Mapbox-Source#rasterFromUrl

    So no, you can't use a WMS in this way. It doesn't seem like this library has WMS support in the way you might be expecting.

    You might like to ask on the #maps channel on the Elm Slack for how folks approach this.