Error with Mapbox GL JS HTML webmap when loading WMS layer

Question

I found a couple of posts about a similar issue, although these were about the Android platform, so am hoping someone can help.
I am a beginner (not a web developer) trying to create an HTML web map using Mapbox GL JS (CDN) with a WMS layer overlaid. My web map displays correctly with the base style, however, now that I have added the WMS layer code when opening the HTML file in a browser the page does not load. I have managed to get the WMS server to return a map image from a browser query based on a specific bounding box (CRS EPSG:3857), so am quite sure the WMS query is correct. I suspect there is an error in my code for the adding WMS source/layer (which I have called "FMfP_FZ2").
I have tried replacing the {bbox-epsg-3857} with the actual EPSG:3857 coordinates from the successful browser WMS query, however, this does not resolve the issue. I have also tried changing the Type to the image.
Ultimately I will be adding the HTML page to my wordpress site, then enhancing it with interactive tools, dataset creating/editing, and image capture, hence why I'm not just using Mapbox Studio
Thanks in advance for your help!
Stuart

A text file containing the code can be downloaded here alternatively see snippet below (access token and style URL removed):

<html>
  <head>
    <title>Title here</title>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = 'accesstokenhere'; //Access token
      var map = new mapboxgl.Map({
          container: 'map', // container ID
          style: 'stylehere', // style URL
          center: [-1.082, 53.958], // starting position [lng, lat]
          zoom: 9 // starting zoom
      });

      map.on('load', function () {
      map.addSource('FMfP_FZ2', {
      'type': 'raster',
      'tiles': [
      "https://environment.data.gov.uk/spatialdata/flood-map-for-planning-rivers-and-sea-flood-zone-2/wms?Request=GetMap&Service=WMS&version=1.3.0&layers=Flood_Map_for_Planning_Rivers_and_Sea_Flood_Zone_2&Format=image/png&CRS=EPSG:3857&bbox={bbox-epsg-3857}&width=500&height=500"
      ],
      'tilesize':500
      });
      map.addLayer(
      {
      'id': 'FMfP_FZ2_Layer',
      'type': 'raster',
      'source': 'FMfP_FZ2',
      );
      });
    </script>
  </body>
</html>

There is also the option to use GetFeature and this URL for WFS overlay: https://environment.data.gov.uk/spatialdata/flood-map-for-planning-rivers-and-sea-flood-zone-2/wfs

After fixing the fileSize and adding error function, the browser returns a CORS error: Access to fetch at '[data source URL and query string]' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. — Stuart
Have now overcome the CORS error by cloning and pushing to Heruko a cors-anywhere proxy which adds the necessary headers. New error to deal with, seems to relate to the Mapbox GL JS caching data from the source. codepen.io/Stuartjm/pen/GRNPOpx — Stuart

Steve Bennett Steve Bennett · Accepted Answer · 2021-03-10T11:36:19

It would be easier to debug if you put the code up on codepen.io, including access token and style URL. (You can always remove them later and rotate the access token if you're concerned).

Your code mostly looks fine, but I notice:

It should be tileSize not tilesize.
I'm guessing that 500 isn't a valid tileSize, you should try 256 or 512.

Error with Mapbox GL JS HTML webmap when loading WMS layer

1 Answers