Bathymetric Contours @ bytes.nz

Getting slightly distracted, I noticed bathymetric contour layer we are using for our app doesn't cover one of the areas we are working in.

I had already downloaded the GEBCO gridded bathymetric data data for creating terrain tiles to use with CesiumJS and imported the TIFF into GeoServer, so I just needed to create the Style to display contours.

I started off with the very helpful GeoSever docs() on Rendering Transformations, namely the Contour extraction example. After adjusting the Transformation level values to more useful values for us, I tried previewing the map. Lots of lines!

Style preview showing all the contour lines

I needed to cut down the data shown on the map for the lower (more zoomed out) levels, so looked into rules and filters and added up two additional <Rule> sections with various levels of.

The rules produces the following previews

Style preview showing the very high-level contours on the globe

Style preview showing medium level contours around Oceania

Style preview showing full detail contours along the bottom of the North Island and New Zealand

Below is the style XML. I still need to figure out how to remove the lines produced from the edge of the TIFF image.


<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
  xmlns="http://www.opengis.net/sld"
  xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <NamedLayer>
    <Name>contour_dem</Name>
    <UserStyle>
      <Title>Bathymetry Contours</Title>
      <Abstract>Bathymetry contours produced from the GEBCO 15 arc-second gridded bathymetry</Abstract>
      <FeatureTypeStyle>
        <Transformation>
          <ogc:Function name="ras:Contour">
            <ogc:Function name="parameter">
              <ogc:Literal>data</ogc:Literal>
            </ogc:Function>
            <ogc:Function name="parameter">
              <ogc:Literal>levels</ogc:Literal>
              <ogc:Literal>0</ogc:Literal>
              <ogc:Literal>-100</ogc:Literal>
              <ogc:Literal>-200</ogc:Literal>
              <ogc:Literal>-300</ogc:Literal>
              <ogc:Literal>-400</ogc:Literal>
              <ogc:Literal>-500</ogc:Literal>
              <ogc:Literal>-600</ogc:Literal>
              <ogc:Literal>-700</ogc:Literal>
              <ogc:Literal>-800</ogc:Literal>
              <ogc:Literal>-900</ogc:Literal>
              <ogc:Literal>-1000</ogc:Literal>
              <ogc:Literal>-1100</ogc:Literal>
              <ogc:Literal>-1200</ogc:Literal>
              <ogc:Literal>-1300</ogc:Literal>
              <ogc:Literal>-1400</ogc:Literal>
              <ogc:Literal>-1500</ogc:Literal>
              <ogc:Literal>-1600</ogc:Literal>
              <ogc:Literal>-1700</ogc:Literal>
              <ogc:Literal>-1800</ogc:Literal>
              <ogc:Literal>-1900</ogc:Literal>
              <ogc:Literal>-2000</ogc:Literal>
              <ogc:Literal>-3000</ogc:Literal>
              <ogc:Literal>-4000</ogc:Literal>
              <ogc:Literal>-5000</ogc:Literal>
              <ogc:Literal>-6000</ogc:Literal>
              <ogc:Literal>-7000</ogc:Literal>
              <ogc:Literal>-8000</ogc:Literal>
              <ogc:Literal>-9000</ogc:Literal>
              <ogc:Literal>-10000</ogc:Literal>
              <ogc:Literal>-11000</ogc:Literal>
              <ogc:Literal>-12000</ogc:Literal>
            </ogc:Function>
          </ogc:Function>
        </Transformation>
        <Rule>
          <Name>deep_water</Name>
          <Title>Deep Water Contours</Title>
          <MaxScaleDenominator>800000</MaxScaleDenominator>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">1</CssParameter>
            </Stroke>
          </LineSymbolizer>
          <TextSymbolizer>
            <Label>
              <ogc:PropertyName>value</ogc:PropertyName>
            </Label>
            <Font>
              <CssParameter name="font-family">Arial</CssParameter>
              <CssParameter name="font-style">Normal</CssParameter>
              <CssParameter name="font-size">10</CssParameter>
            </Font>
            <LabelPlacement>
              <LinePlacement/>
            </LabelPlacement>
            <Halo>
              <Radius>
                <ogc:Literal>2</ogc:Literal>
              </Radius>
              <Fill>
                <CssParameter name="fill">#FFFFFF</CssParameter>
                <CssParameter name="fill-opacity">0.6</CssParameter>
              </Fill>
            </Halo>
            <Fill>
              <CssParameter name="fill">#000000</CssParameter>
            </Fill>
            <Priority>2000</Priority>
            <VendorOption name="followLine">true</VendorOption>
            <VendorOption name="repeat">100</VendorOption>
            <VendorOption name="maxDisplacement">50</VendorOption>
            <VendorOption name="maxAngleDelta">30</VendorOption>
          </TextSymbolizer>
        </Rule>
        <Rule>
          <Name>platform_limits</Name>
          <Title>Platform Limit Contours</Title>
          <MaxScaleDenominator>20000000</MaxScaleDenominator>
          <ogc:Filter>
            <ogc:Or>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-100</ogc:Literal>
              </ogc:PropertyIsEqualTo>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-500</ogc:Literal>
              </ogc:PropertyIsEqualTo>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-1000</ogc:Literal>
              </ogc:PropertyIsEqualTo>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-1500</ogc:Literal>
              </ogc:PropertyIsEqualTo>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-6000</ogc:Literal>
              </ogc:PropertyIsEqualTo>
            </ogc:Or>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">1</CssParameter>
            </Stroke>
          </LineSymbolizer>
          <TextSymbolizer>
            <Label>
              <ogc:PropertyName>value</ogc:PropertyName>
            </Label>
            <Font>
              <CssParameter name="font-family">Arial</CssParameter>
              <CssParameter name="font-style">Normal</CssParameter>
              <CssParameter name="font-size">10</CssParameter>
            </Font>
            <LabelPlacement>
              <LinePlacement/>
            </LabelPlacement>
            <Halo>
              <Radius>
                <ogc:Literal>2</ogc:Literal>
              </Radius>
              <Fill>
                <CssParameter name="fill">#FFFFFF</CssParameter>
                <CssParameter name="fill-opacity">0.6</CssParameter>
              </Fill>
            </Halo>
            <Fill>
              <CssParameter name="fill">#000000</CssParameter>
            </Fill>
            <Priority>2000</Priority>
            <VendorOption name="followLine">true</VendorOption>
            <VendorOption name="repeat">100</VendorOption>
            <VendorOption name="maxDisplacement">50</VendorOption>
            <VendorOption name="maxAngleDelta">30</VendorOption>
          </TextSymbolizer>
        </Rule>
        <Rule>
          <Name>full</Name>
          <Title>Full Detail Contours</Title>
          <ogc:Filter>
            <ogc:Or>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-1000</ogc:Literal>
              </ogc:PropertyIsEqualTo>
              <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>value</ogc:PropertyName>
                <ogc:Literal>-6000</ogc:Literal>
              </ogc:PropertyIsEqualTo>
            </ogc:Or>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">1</CssParameter>
            </Stroke>
          </LineSymbolizer>
          <TextSymbolizer>
            <Label>
              <ogc:PropertyName>value</ogc:PropertyName>
            </Label>
            <Font>
              <CssParameter name="font-family">Arial</CssParameter>
              <CssParameter name="font-style">Normal</CssParameter>
              <CssParameter name="font-size">10</CssParameter>
            </Font>
            <LabelPlacement>
              <LinePlacement/>
            </LabelPlacement>
            <Halo>
              <Radius>
                <ogc:Literal>2</ogc:Literal>
              </Radius>
              <Fill>
                <CssParameter name="fill">#FFFFFF</CssParameter>
                <CssParameter name="fill-opacity">0.6</CssParameter>
              </Fill>
            </Halo>
            <Fill>
              <CssParameter name="fill">#000000</CssParameter>
            </Fill>
            <Priority>2000</Priority>
            <VendorOption name="followLine">true</VendorOption>
            <VendorOption name="repeat">100</VendorOption>
            <VendorOption name="maxDisplacement">50</VendorOption>
            <VendorOption name="maxAngleDelta">30</VendorOption>
          </TextSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>