I am trying to form a WMS request and show it on my React Native app. I would like to find out whether it is a request-formation issue or on the side of map display. I have created a snack where the WMS is displayed on map. If I use as BBOX the value “{minX},{minY},{maxX},{maxY}”, it displays the whole visbile map as BBOX, which I find logical. But if I set a specific BBOX value “2543977,4535238,2565303,4546780”, still an image over the whole map is displayed, different one, and not only in the specific area.
The snack is available at WMS - Snack . Does anyone have if the problem is in the request itself and, if so, what is wrong with the syntax?
Leaflet and other js libraries for web browsers work in such a way that for them, the bounding box is the whole area that is currently displayed on the map element.
The bounding box changes when you move the map - to display the data for the new “focused” area.
Manually setting the bbox parameter to some fixed values in Leaflet and other js libraries for web browsers is wrong.
It is a bit different when extending existing classes or methods (for example Leaflet’s Layer classes - in that case the createTile() method gets coordinates from Leaflet that you can use for your usecase if the existing classes aren’t appropriate.
I think it’s the same in react-native-maps, although I didn’t find any good source for WMSTile that you used.
That being said, Sentinel Hub supports non-standard WMS parameter geometry (documentation for non-standard WMS parameters) which can be used in coordination with evalscript (which can be defined for the selected layer in the Dashboard or also passed as an additonal parameter) to make pixels outside of the geometry transparent (user guide), making an appearance of only displaying some specific area.
But you will need to extend the WMSTile to add the support for passing the geometry parameter.
Edit: I forgot to mention - there is react-native-webview-leaflet which enables you to use Leaflet in react native, if you wish to use that / have more experience with developing for web browsers.
z.cern Thank you so much for your help and time for such an elaborate answer. I understand now what you are describing and I have already applied it successfully. My only concern now is how to minimize processing requests so I can keep my self within usage limits.
Have a nice day or evening where ever you are!
I’m not so familiar with development of mobile apps, so I will try to answer the best I can.
Sentinel Hub has subscription plans with a set amount of processing units and requests per minute and per month. So, it’s good to take care of the number of requests.
The limit of number of processing units and requests per minute is mostly used for rate limiting. Sentinel Hub uses rate limiting to prevent services overload.
To prevent being rate limited, the app should acknowledge the values in the headers of the responses for the requests and wait X time before making another request. This might be hard to implement - so simply waiting some fixed amount of time and retrying a request in case it’s rate limited can also be good enough, although not the best practice.
The limit of number of processing units and requests per month works more like other subscriptions for other things (e.g. which TV programmes you get with which plan).
For this I only have an advice to cache things (on the devices where the app will be used), so that the app doesn’t need to request them again.
If you use a bit more complex custom scripts, you can improve them with following the tips in this medium post that we prepared a while ago.