Drawing a polygon on the base map and rendering COG file-based data for that region in an optimal way
A cloud optimized GeoTIFF is a regular GeoTIFF file, aimed at being hosted on an HTTP file server, whose internal organization is friendly for consumption by clients issuing HTTP GET range request.
If you are very new to the COG data format, please refer to my article on the COG overview and how we can create and validate them.
The project is live here at render-cog-data-for-polygon. It allows users to draw a polygon on the map and render COG data for that region in the most optimal way, which is an enhancement to work done by Chris Holmes in COG map.
The map is powered by tiles.rdnt.io, a tiling server hosted on AWS lambda.
We’ll be following six steps hereby to achieve this, which are:
Let’s go!
1. Add Base map layer and debug layer:
We have added two layers here. First is the base map layer provided by Open Street Map and on top of that, a debug layer is added which renders a grid outline for the tile grid/projection along with the coordinates for each tile.
2. Adding buttons for different COGs:
Different buttons hold URLs for different COGs stored on AWS S3 storage service. The text box allows you to enter the URL for any online COG. After submitting it’ll zoom to its geolocation and render tiles.
3. Adding draw interaction to map:
Button on the top right enables the drawing of a polygon on the map. With the polygon drawing control active, click on the map to add the points that make up your polygon. Double-click to finish drawing. It is achieved through ‘addInteraction’ method provided by OpenLayers.
The ‘addFeature’ event is triggered when a feature is added to the source. Its callback function captures the feature and its geometry passing it to ‘loadTiles’ function.
When any of the COG is selected, it’s URL is saved in ‘cogUrl’ global variable. If ‘cogUrl’ is not an empty string, we do the followings:
4. Adding COG layer to map:
‘createTilesUrl’ function creates the tiles URL taking URL of COG as an input parameter. This map is using tiles.rdnt.io tiling server, which is an instance of marblecutter hosted on AWS Lambda. The function can be changed to use another lambda tiling server.
5. Conditional loading of tiles:
‘setTileUrlFunction’ sets the tile URL function of the source. This function is called only when the condition is true. ‘intersectsExtent’ tests if the geometry of that drawn polygon and the passed extent intersect, returning boolean true or false. In other words, the tile URL function will be set only for those tiles which are intersecting with the polygon.
6. Cropping loaded TileLayer in polygon shape:
Now when we’ve loaded desired TileLayer we need to crop it in that shape of the polygon. ‘addFilter’ function provided by ol-ext allows to add crop filter to tile layer.
The results of these aforementioned steps can be visualized in this attached screenshot.
We should note that, Even if we skip step B, the result will be the same but that won’t be an optimal approach to achieve it because in that scenario we’ll be loading all tiles in that view, including even unnecessary ones.
I have pushed my code here. Your feedback on this is much appreciated.
Special thanks to Richa Hukumchand for introducing me to this promising cloud-native technology and for all your guidance :)
Thanks for reading :)
