Is there a way to force single tile request for WMSTile in react-native-maps?

Question

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:

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)

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.

Answer 1

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]].