CODEWITHSUNDEEP
htmlmapbox-gl-jswms
Stuart
Stuart

Reputation: 11

Error with Mapbox GL JS HTML webmap when loading WMS layer


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

Upvotes: 1

Views: 1020

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126527

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.

Upvotes: 0

Related Questions