Serve raster tiles in GeoServer and renderer them by Leaflet

7 min readOct 16, 2020

GeoServer is an open source server for sharing geospatial data. Designed for interoperability, it publishes data from any major spatial data source using open standards.

Steps to handle raster data

Download

Download GeoServer and install, or create by a docker container

Login

Create a raster workspace

Select a store datasource

Here we select GeoTIFF

Create a raster store

Here we specify a *.tif file

Create a layer

Create the layer under new created store and the format is :, and then publish it

Publish review

Have a review of all the information it reads including the band definitions, and save it

Layer preview

Go the the layer preview and find the layer, and try to view it by OpenLayers

Layer preview result

The geotiff file successfully being processed if we can see the layer

Compressed raster layer with only grey band

The geotiff file failed being processed for unknown reason

Exception stack trace 1

Caused by: java.lang.NullPointerException at javax.media.jai.PlanarImage.getData(PlanarImage.java:2110) at javax.media.jai.StatisticsOpImage.getProperty(StatisticsOpImage.java:292) at com.sun.media.jai.opimage.ExtremaOpImage.getProperty(ExtremaOpImage.java:100) at javax.media.jai.RenderedOp$1.getProperty(RenderedOp.java:1808) at javax.media.jai.PropertyEnvironment.getProperty(PropertyEnvironment.java:197) at javax.media.jai.PropertySourceImpl.getProperty(PropertySourceImpl.java:277) at javax.media.jai.WritablePropertySourceImpl.getProperty(WritablePropertySourceImpl.java:130) at javax.media.jai.RenderedOp.getProperty(RenderedOp.java:1982) at org.geotools.image.ImageWorker.getComputedProperty(ImageWorker.java:1033) at org.geotools.image.ImageWorker.getExtremas(ImageWorker.java:1089) at org.geotools.image.ImageWorker.rescaleToBytes(ImageWorker.java:1400) at org.geotools.renderer.lite.gridcoverage2d.RasterSymbolizerHelper.execute(RasterSymbolizerHelper.java:139) at org.geotools.renderer.lite.gridcoverage2d.RasterSymbolizerHelper.execute(RasterSymbolizerHelper.java:53) at org.geotools.renderer.lite.gridcoverage2d.StyleVisitorCoverageProcessingNodeAdapter$1.execute(StyleVisitorCoverageProcessingNodeAdapter.java:97) at org.geotools.renderer.lite.gridcoverage2d.BaseCoverageProcessingNode.checkExecuted(BaseCoverageProcessingNode.java:234) at org.geotools.renderer.lite.gridcoverage2d.BaseCoverageProcessingNode.getOutput(BaseCoverageProcessingNode.java:332) ... 124 more

Exception stack trace 2

Caused by: javax.imageio.IIOException: Illegal value for Predictor in TIFF file at it.geosolutions.imageioimpl.plugins.tiff.TIFFLZWDecompressor.<init>(TIFFLZWDecompressor.java:118) at it.geosolutions.imageioimpl.plugins.tiff.TIFFImageReader.read(TIFFImageReader.java:1856) at com.sun.media.jai.imageioimpl.ImageReadOpImage.computeTile(ImageReadOpImage.java:697) ... 166 more

QGIS layer preview

Drag the geotiff file into the QGIS for preview

QGIS geotiff layer export

Display the current layer, Select the menu item “Layer-Save as…” and export the geotiff with 4326 crs

GeoServer layer preview

Modify the store in GeoServer to connect to the new geotiff file, and preview the layer again. It works with no color scheme

Cause analysis

The error raster geotiff only has one grey band, and the QGIS exported geotiff file is nearly twice the size of the original one. It is a compressed one, and that’s why QGIS produces a bigger size when we save it as another. QGIS does not compress it, hence the new image is bigger. GeoServer doesn’t accept compressed geotiff data. Regarding the GeoServer color problem, It’s because that the style in GeoServer is not well defined.

Define style in GeoServer

Create style in QGIS

Open QGIS, drag the geotiff file into the QGIS.
Right click on the data layer and select ‘Properties’, then select ‘Style’ on the left side.
Change the render type to ‘Singleband pseudocolor’ and change the style by specifying the color ranges.

Export style in QGIS

Apply the change to see the new layer. Save the style using the ‘Save Style’ button on the bottom and save as .qml file.

Copy the .qml content

Open the .qml file with notepad and review the colorrampshader part.

Generate the style template in GeoServer

Go to the GeoServer admin page and click on ‘Styles’ and add a new style.
Name the style and select the workspace, then choose ‘Copy from existing style’, select ‘dem’ and press ‘copy…’

Specify the style content

Change the name, title and abstract.
Translate the .qml content into the GeoServer style content here. Notice the ‘value’/’label’/’color’ values in .qml match the ‘quantity’/’label’/’color’ in GeoServer. If the opacity is 0.0, it means that the color will not be visible, so it will be white.
Press ‘Validate’ to check if it works. If there are no errors, then ‘submit’.

Generate .sld in QGIS

Comparing with exporting the .qml style in QGIS, we can directly generate .sld in QGIS and copy the content to create a style in GeoServer.

Create style in Geoserver from .sld file

From the .sld file we exported from QGIS, we can easily create a style in GeoServer.

Edit layer basic info

Go to ‘Layers’ and select the layer we just created. Make sure ‘Enabled’ and ‘Advertised’ are turned on and check if the ‘Coverage Band Details’ are set correctly, if not adjust them.

Edit WMS Settings

Select the ‘Publishing’ tab. With the ‘WMS Settings’ select ‘Default Style’ and change it to the style we just created. ‘Save’ the layer again.

Preview layer

View the layer again with the ‘Layer preview’ and ‘Open Layers’. Now the layer should be displayed correctly.

Preview layer when editing style

We could also edit the style and preview the result as soon as we apply in the style editing page.

Add additional styles

Edit the layer again and with the ‘WMS Settings’ select additional styles and save. Remember to add the newly added style into it as well otherwise the restful api cannot list this style info under the layer.

Preview layer with additional styles

Preview the layer again and we could switch the style to any available one and see the result.

Enable CORS for GeoServer

Clone repository

Clone the github repository docker-geoserver.

Create web.xml

The contents of resources/overlays will be copied to the image file system during the build. For example, to include a static web xml with CORS support web.xml, create the file at resources/overlays/usr/local/tomcat/conf/web.xml.

Enable CORS

Add CORS enabled content into the web.xml as bellow. The full content of the web.xml can be found here.

Docker hub modification

Modify the build.sh script to own hub repository.

Build and push

Build the docker image and push to own docker hub. Now the CORS enabled GeoServer docker image is ready to use.

./build.sh docker pull hustakin/geoserver

Tomcat error log

Sometimes the GeoServer container will met 404 issue. That’s because the tomcat failed to start because of your modification. We could attach to the GeoServer container and inspect the tomcat error log to find the reason.

Client http

Please be noted the client HTTP should not use the credentials for CORS requests. For example, here I get feature information for raster data in angular6 client by clicking on the layer.