0

The WMSTile overlay always loads all tiled images, instead of one. There is no option to load a single tile.

One of the features I must implement is a heatmap of objects on the map. Bellow are the images of what images my GeoServer generates:

Generic style:

Generic style

Heatmap style with single tile:

Heatmap style with single tile

Heatmap style with tiled option selected: (as seen images get distorted and moved around because GeoServer matches points separately for different tiles)

enter image description here

So this is usually expected behaviour for tiled heatmaps and GeoServer even notes the following: "Rendering transformations may not work correctly in tiled mode, unless they have been specifically written to accommodate it."

So my question is - is there a way to somehow force the WMSTile component to load the overlay as a single tile, which would in fact display the heatmap correctly - i don't mind forking the react-native-maps and fixing this issue in android/ios components but I don't know where to start

  • I tried manipulating width and height properties that are actually replaced in the url by the WMSTile component it self.
  • I tried manipulating the tileSize in order to get tiles bigger than the actual screen.
  • Read API for WMSTile in order to find a way to load single tile.

None of the above attempts got me what I want. What I was expecting was a WMSTile component that loads a single tile overlay that matches the one on OpenLayers preview from GeoServer.

Improve this question
6
  • You need to make a WMS request instead of a WMTS one Commented May 11, 2023 at 7:30
  • I've checked the log on the GeoServer and WMSTile component already calls WMS service.The problem is that it cuts the actual BBOX and sends multiple WMS requests instead of one based on the actual BBOX. Commented May 11, 2023 at 7:47
  • Each WMTS tile is a separate independent WMS request which is what causes your problem, You need to use a WMS layer rather than a WMTS one. I assume react has one of those but I've never used it. Commented May 11, 2023 at 7:49
  • I understand that there are different services - as there are different components (one is UrlTile which uses the WMTS service and a WMSTile which uses the WMS service) but I'm already using the WMS service which I can confirm after looking at the logs. {EXCEPTIONS=application/vnd.ogc.se_inimage, REQUEST=GetMap, FORMAT=image/png, SRS=EPSG:4326, BBOX=-45.52734375,-1.7578125,71.3671875,65.7421875, VERSION=1.1.1, STYLES=, SERVICE=WMS, WIDTH=1330, HEIGHT=768, TRANSPARENT=true, LAYERS=we1:la1}__ So once again the problem is not the wrong service, but wrong BBOX which rnm library creates. Commented May 11, 2023 at 8:10
  • You need an untiled WMS component again no idea if react can do that, Leaflet and Openlayers both can Commented May 11, 2023 at 8:53

1 Answer 1

Reset to default
0

So I solved this by replacing the WMSTile component with Overlay component and setting the image uri to the url previously used in the WMSTile as urlTemplate. The image is now downloaded and displayed as a single tile.

  • the parameter bbox that was previously filled by the library itself now needs to be calculated - check answer by MatsMaker on this link: How to calculate bounds in react native maps

  • the parameter width and height that were previously filled by the library now need to be inserted manually - get screen/window dimensions and insert it

  • the bounds property of the overlay is the same as bbox parameter of the uri (IMPORTANT: the order of lat and lng are reversed)

The overlay uri looks something like this at the end: http://geoserver-url/geoserver/workspace-name/wms?service=WMS&version=1.1.0&request=GetMap&layers=layer-name&styles=style-name&bbox=bbox&width=width&height=height&srs=EPSG:4326&format=image/png&transparent=true with bbox being minLng,minLat,maxLng,maxLat.

and the bounds for matching bbox are [[minLat,minLng],[maxLat,maxLng]].

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.