Adding WMS source not working

[nhuzaa]

I am trying to add WMS source to the map. I followed the documentation for adding the raster source

https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md#source

const RASTER_SOURCE_OPTIONS = {
  "type": "raster",
  "tiles": [
    'http://localhost:8080/geoserver/cite/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&tiled=true&LAYERS=cite%3AKhokana_Nadir_transparent_mosaic_group1&exceptions=application%2Fvnd.ogc.se_inimage&WIDTH=256&HEIGHT=256&SRS=EPSG%3A&STYLES=&BBOX={bbox-epsg-3857}'
  ],
  "minzoom": 1,
  "maxzoom": 6,
  "scheme": "tms",
  "tileSize": 256,
};

Inside render

  <Source id="wms_id" tileJsonSource={RASTER_SOURCE_OPTIONS} />
   <Layer type="raster" id="layer_id" sourceId="wms_id" >
    </Layer>

Map doesn't seem to render the raster image it works if I have static value of BBOX in the WMS url

localhost:8080/geoserver/cite/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&tiled=true&LAYERS=cite%3AKhokana_Nadir_transparent_mosaic_group1&exceptions=application%2Fvnd.ogc.se_inimage&WIDTH=256&HEIGHT=256&SRS=EPSG%3A&STYLES=&BBOX={bbox-epsg-3857

but not with BBOX={bbox-epsg-3857}

like in the mapbox-gl example https://docs.mapbox.com/mapbox-gl-js/example/wms/

Please note that there is not issue with the WMS service

[saharilarshad]

i got the same issue.. any ideas to solve it all my friends?

[2Up1Down]

I struggled with that as well and found this useful example here https://codepen.io/procrastinatio/pen/EBqEwQ

Maybe my components help you solve your problem. My Map component looks as followed:

<Map
        initialViewState={{
          longitude: geolocation.location.lng,
          latitude: geolocation.location.lat,
          zoom: INITIAL_ZOOM,
        }}
        style={{ width: "100%", height: "calc(100vh - 300px)" }}
        mapStyle="mapbox://styles/mapbox/streets-v9"
        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_KEY}
      >
        <Source {...publicTransportationSource}>
          <Layer {...publicTransportationLayer} />
        </Source>
      </Map>

Where the source properties look as followed:

export const publicTransportationSource = {
  type: "raster",
  tiles: [
    "https://wms.geo.admin.ch?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=ch.bav.haltestellen-oev",
  ],
  tileSize: 256,
  attribution:
    'Map tiles by <a target="_top" rel="noopener" href="http://www.swisstopo.admin.ch">swisstopo</a>',
};

and the layer as followed:

export const publicTransportationLayer = {
  id: "public-transportation-layer",
  type: "raster",
  paint: {
    "raster-opacity": 0.8,
  },
};