0

I am trying to display a layer on top map based on parameter layerName, layerReference, minx, miny, maxx,maxy(bbox).

I am not able to display the layer

This is my code

<WMSTileLayer {...map}/>

  const map ={
    url:"http://localhost:8080/getlayer?",
    layers:"isostatic",
    transparent: true,
    format: 'image/png',
    bbox: [-4735627.5,-8964730.0,4806772.5,-559430.0],
    layerReference:o_78_isostatic
  }

This is the api I have I am trying to implement in leaflet

    http://localhost:8080/getlayer?layerName=isostatic&crs=EPSG:3857&minX=-4735627.5&minY=-8964730.0&maxX=4806772.5&maxY=-945530.0&width=300&height=700&layerReference=o_78_isostatic
11
  • 1
    88080 is not a valid port number :) you almost certainly meant 8080 or something Sep 7, 2022 at 12:19
  • 1
    Any errors in the browser debugger console and/or network section?
    – TomazicM
    Sep 7, 2022 at 12:22
  • @BarryCarter sorry typo mistake
    – mond_eee
    Sep 7, 2022 at 12:27
  • @TomazicM I am getting 400 error
    – mond_eee
    Sep 7, 2022 at 12:30
  • Do you get this error if you use URL from your question directly in browser?
    – TomazicM
    Sep 7, 2022 at 13:04

1 Answer 1

1

This is what worked for me:

    {rasters.map((raster, index) => (
       <LayersControl.Overlay name={raster.name} key={index}>
            <WMSTileLayer
                  url="http://localhost:8080/geoserver/{workspace}/wms"
                  params={{
                           format:"image/png",
                           layers:"{workspace}:{layername}",
                           transparent: true,
                         }}
            />
        </LayersControl.Overlay>
    }

You just need to replace it with your data. Of course, you need to have the "rasters" variable created with all the information you need, I'm getting from the backend using axios, the "workspace" and "layername" you can retrieve from the same location also, this is up to you, this worked pretty well in my case.

For more information about the parameters, you can check here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.