How to get sentinel hub image overlay only for the bounds of drawer polygon in React leaflet

alexander.velchev · December 3, 2020, 7:42pm

Hello, this is mu request for getting NDVI filter for the leaflet map, it works. But now I am researching for about 2 months how get this layer only in the bounds of the drawer polygon. I don’t want to set the map bounds in the sentinel hub playground I want to be set dynamically:

This is my code for getting sentinel hub NDVI filter for the whole map:

 <WMSTileLayer
          layers="NDVI"
          format="image/jpeg"
          attribution='&copy; <a href="http://www.sentinel-hub.com/" target="_blank">Sentinel Hub</a>'
          url="https://services.sentinel-hub.com/ogc/wms/0eb749da-a491-MASKED"
          urlProcessingApi="https://services.sentinel-hub.com/ogc/wms/aeafc74a-c894-MASKED"
          maxcc="20"
          minZoom="6"
          maxZoom="16"
          preset="NDVI"
          time="2020-04-01/2020-10-08"
        />

I read this article but it doesn’t help me… please assist

https://www.sentinel-hub.com/faq/how-can-i-clip-image-specific-polygon/

anzes · December 3, 2020, 8:12pm

Hi Alexander,

May I ask which React library you are using? React Leaflet has a WMSTileLayer component, but the props look very different (WMS parameters should be passed through params prop), so I assume you are using something else?

It also seems to me you can also leave urlProcessingApi prop out.

But assuming that the props of this component get translated to query parameters, something like this should work:

  ...
  url="https://services.sentinel-hub.com/ogc/wms/0eb749da-a491-MASKED"
  maxcc="20"
  geometry="POLYGON((-7.877244 38.546511,-7.876377 38.547818,-7.871950 38.546125,-7.872611 38.545023,-7.877244 38.546511))"
  ...

Hope it helps - if not, please specify which library the component WMSTileLayer comes from and we’ll try to come up with a better solution.

EDIT: It occured to me that you might be using an older version of React Leaflet, and indeed, the component signature matches. In that case the solution above should work because the props are passed verbatim.

alexander.velchev · December 4, 2020, 9:07am

Thanks what version should I use for react leaflet

I saw that i have version 2.7.0 of react-leaflet

The WMSTileLayer comes from react-leaflet:

import { TileLayer, WMSTileLayer, LayersControl } from “react-leaflet”;

when I paste geometry tag I receive this:

<ServiceException>

<![CDATA[ Error parsing GEOMETRY param! ]]>

</ServiceException>

</ServiceExceptionReport>

> geometry="POLYGON((42.696295, 23.303643,42.699295, 23.303643,42.699295, 23.313643,42.679295, 23.313643))"

anzes · December 4, 2020, 9:33am

The version doesn’t matter (as far as Sentinel Hub is concerned), whatever you wish is OK.

I think the problem is in the polygon definition, it should look like this:

geometry="POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643, 42.679295 23.313643))"

Note the spaces instead of commas (see WKT on wikipedia for more info).

alexander.velchev · December 4, 2020, 10:56am

It returns me a white layer…

<WMSTileLayer
          layers="NDVI"
          format="image/jpeg"
          attribution='&copy; <a href="http://www.sentinel-hub.com/" target="_blank">Sentinel Hub</a>'
          url="https://services.sentinel-hub.com/ogc/wms/0eb749da-<HIDDEN>"
          geometry="POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643, 42.679295 23.313643))"
          maxcc="20"
          minZoom="6"
          maxZoom="16"
          preset="NDVI"
          time="2020-04-01/2020-10-08"
        />

This polygon is hardcoded and I want to fill it with the NDVI filter of sentinel

My idea is to fill the layer only in the polygon bounds…

Can you write me an email to al.velchevv@gmail.com because I don’t know what to do…

anzes · December 4, 2020, 11:39am

I took the liberty of editing out the instance ID in your post, hope you don’t mind (they shouldn’t be published publicly to avoid abuse).

I think you need to fix just two things:

close the polygon
make sure you are using the correct CRS in the polygon

For closing the polygon, this should work:

geometry="POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643,42.679295 23.313643,42.696295 23.303643))"

However for the CRS, you should check which one the Leaflet is using. You can do this by clicking on the request in developer tools (which I see in the screenshot you are already using) and checking “CRS” parameter value. Geometry of the polygon must be specified in the same CRS.

You should also be careful about the version parameter. In OGC, the order of coordinates in EPSG:4326 depends on it (see here for explanation).

The matching WMS request (which works, if you put in the whole instance ID) is:

https://services.sentinel-hub.com/ogc/wms/0eb749da-<HIDDEN>?SERVICE=WMS&REQUEST=GetMap&VERSION=1.3.0&LAYERS=NDVI&MAXCC=20&WIDTH=640&HEIGHT=640&CRS=EPSG:4326
&BBOX=42.679295,23.303643,42.699295,23.313643&geometry=POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643,42.679295 23.313643,42.696295 23.303643))&time=2020-04-01/2020-10-08

(Note: I edited out my previous answer because it was wrong)

alexander.velchev · December 4, 2020, 12:40pm

Do toy think the problem is in the

> <WMSTileLayer>

tag…

how it should works because when I paste the request you provide in the empty tab

https://services.sentinel-hub.com/ogc/wms/0eb749da-a491-48e4-80e5-
MASKED?SERVICE=WMS&REQUEST=GetMap&VERSION=1.3.0&LAYERS=NDVI&MAXCC=20&width=256&height=256
&BBOX=42.679295,23.303643,42.699295,23.313643&geometry=POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643,42.679295 23.313643,42.696295 23.303643))&time=2020-04-01/2020-10-08

I think that the params are not well passed because I need to make the call with the params in the tag

anzes · December 4, 2020, 4:04pm

Sorry if I was not clear enough… To avoid miscommunication, I have now installed react-leaflet@2.7.0 and tried the solution myself.

What you need to do is:

  <WMSTileLayer
    version="1.3.0"
    layers="NDVI"
    format="image/png"
    crs={L.CRS.EPSG4326}
    attribution='&copy; <a href="http://www.sentinel-hub.com/" target="_blank">Sentinel Hub</a>'
    url="https://services.sentinel-hub.com/ogc/wms/0eb749da-<HIDDEN>"
    geometry="POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643, 42.679295 23.313643,42.696295 23.303643))"
    maxcc="20"
    minZoom="6"
    maxZoom="16"
    preset="NDVI"
    time="2020-04-01/2020-10-08"
    transparent="true"
  />

You might need to add an import for L:

import L from 'leaflet';

I have also added transparency as wou will probably wish to have that too.

Let me know if this works for you.

alexander.velchev · December 4, 2020, 4:05pm

Really really really thanks a lot.

My last question is how to pass dynamically coordinates into this:

geometry="POLYGON((42.696295 23.303643,42.699295 23.303643,42.699295 23.313643, 42.679295 23.313643,42.696295 23.303643))"
    maxcc="20"

When I draw a polygon I successfully get the coordinates but how can I pass them to the geometry tag, not to be hardcoded…

Thanks thanks thanks a lot!

anzes · December 4, 2020, 6:02pm

No problem, glad it worked!

When I draw a polygon I successfully get the coordinates but how can I pass them to the geometry tag, not to be hardcoded…

I can’t really advise how to do that specifically, because it depends on the format of coordinates you have. This prop (geometry) is just a string - you just need to construct it from the coordinates you have.

This is just an example which will probably not work for you, but it gives an idea of how the code would look approximately:

  // assuming coordinates are saved like this:
  // const coords = [[42.696295, 23.303643], [42.699295, 23.303643], [42.699295, 23.313643], [42.679295, 23.313643], [42.696295, 23.303643]];

  ...
  geometry={`POLYGON((${coords.map(coord => coord.join(' ')).join(', ')}))`}
  ...

But again, this is very specific to the data you have and is not really related to Sentinel Hub.