Skip to content

Raster Data

Overview

MapServer can serve both vector and raster data.

The dataset used in this example is elevation data from the Estonian Geoportal, and data provided by the Estonian Land Board 2024. It covers Tartu center and is from map sheet 474659.

Viewing Dataset Details

We can view details about this dataset using gdalinfo which is installed on the MapServer Docker container.

# first connect to the MapServer Docker container
docker exec -it mapserver /bin/bash

# now get some basic details about the dataset
gdalinfo /etc/mapserver/data/raster/54752_dtm_1m.tif

# we can also view these details as JSON for easier parsing
gdalinfo /etc/mapserver/data/raster/54752_dtm_1m.tif -stats -json

A Raster LAYER

LAYER
  NAME "dtm"
  EXTENT 655000 6470000 660000 6475000
  STATUS OFF
  TYPE RASTER
  DATA "data/raster/54752_dtm_1m.tif"
  PROJECTION
      "epsg:3301"
  END
  COMPOSITE
      OPACITY 80
  END
  INCLUDE "terrain.include"
END

There are a few points to note in this Mapfile.

Include Files

We are making use of the INCLUDE directive. This allows us to include additional files within our Mapfile. Any file extensions can be used, and paths are always relative to the main Mapfile. In this case terrain.include contains a list of CLASSes to style the raster data. These classes were generated using a Python script - by keeping them in a separate file we can easily recreate the file without modifying the rest of the Mapfile. INCLUDEs can also be used to help manage large Mapfiles, for example by keeping each LAYER in a separate file. This approach also makes it easier to share LAYERs between different Mapfiles.

The terrain.include file shows how we can style raster data. There are classes that apply a different RGB colour to the data based on the [pixel] value for each cell:

CLASS
  EXPRESSION ([pixel] >= 30.68 AND [pixel] < 37.245625)
  STYLE
    COLOR 107 129 31
  END
END

CLASS
  EXPRESSION ([pixel] >= 37.245625 AND [pixel] < 43.81125)
  STYLE
    COLOR 107 106 26
  END
END

Composite Blocks

A COMPOSITE block is used on the layer to make it 20% transparent.

Code

Javascript
import '../css/style.css';
import ImageWMS from 'ol/source/ImageWMS.js';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import View from 'ol/View.js';
import { Image as ImageLayer, Tile as TileLayer } from 'ol/layer.js';

const mapserverUrl = import.meta.env.VITE_MAPSERVER_BASE_URL;
const mapfilesPath = import.meta.env.VITE_MAPFILES_PATH;

const layers = [
    new TileLayer({
        source: new OSM(),
    }),
    new ImageLayer({
        extent: [2968743.65508978, 8038921.67212233, 2982981.8632402, 8053818.05714347],
        source: new ImageWMS({
            attributions: ['Estonian Land Board 2024'],
            url: mapserverUrl + mapfilesPath + 'raster.map&',
            params: { 'LAYERS': 'dtm', 'STYLES': '' },
            ratio: 1
        }),
    }),
];
const map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
        center: [2975862.75916499, 8046369.8646329],
        zoom: 14,
    }),
});
Mapfile
MAP
  NAME "Raster"
  EXTENT 26.668678 58.339241 26.796582 58.409410
  UNITS DD
  SIZE 800 600

  IMAGETYPE PNG24

  PROJECTION
    "init=epsg:4326"
  END

  WEB
    METADATA
      "ows_enable_request" "*"
      "ows_srs" "EPSG:4326 EPSG:3857"
    END
  END

  LAYER
    NAME "dtm"
    EXTENT 655000 6470000 660000 6475000
    STATUS OFF
    TYPE RASTER
    # Map data: Estonian Land Board 2024
    DATA "data/raster/54752_dtm_1m.tif"
    PROJECTION
        "epsg:3301"
    END
    COMPOSITE
        OPACITY 80
    END
    INCLUDE "terrain.include"
  END

END

Exercises

  1. Try different settings for layer OPACITY to see its effect on the output in raster.map.
  2. Change the COLOR of the first CLASS in terrain.include to highlight which pixels have values in this range.