Skip to content

Polygon Styling

Overview

This exercise displays buildings from OpenStreetMap.

Polygons

The buildings are a polygon dataset, so we set our LAYER TYPE to POLYGON:

LAYER
    NAME "buildings"
    TYPE POLYGON
    ...

When styling polygons we can set the colour of the polygon, and also its outline color:

CLASS
    ...
    STYLE
        COLOR 246 241 223
        OUTLINECOLOR 0 0 0
    END
END

Expressions

In this Mapfile we have two different classes for the dataset.

The first class has an EXPRESSION that limits which features are drawn. This compares the value for the "type" field for each feature with "university". If there is a match then the feature is drawn with the STYLEs from the CLASS.

CLASS
    GROUP "university"
    EXPRESSION ( "[type]" = "university" )
...

Code

Example

Tip

A LAYER has a CONNECTIONTYPE that is used to connect to different data sources. "Native" connection types mean the data is read directly by MapServer. The OGR connection type uses GDAL/OGR to read data sources. For some data types, as in the flatgeobuf example used here, there is an option to use either a native connection or an OGR connection.

There is also a PLUGIN connection type to allow connections to MS SQL Server and Oracle databases.

CONNECTIONTYPE OGR
# CONNECTIONTYPE FLATGEOBUF
# DATA "data/osm/buildings_a.fgb"
CONNECTION "data/osm/buildings_a.fgb"
polygons.js 
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({
        source: new ImageWMS({
            url: mapserverUrl + mapfilesPath + 'polygons.map&',
            params: { 'LAYERS': 'buildings', 'STYLES': 'university' },
            ratio: 1
        }),
    }),
];
const map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
        center: [1982884, 5363834],
        zoom: 14,
    }),
});
polygons.map 
MAP
    NAME "Buildings"
    EXTENT 17.77 43.31 17.83 43.36
    UNITS DD
    SIZE 800 600
    PROJECTION
        "epsg:4326"
    END
    WEB
        IMAGEPATH "/etc/mapserver/tmp/"
        METADATA
            "ows_title" "OSM Buildings"
            "ows_enable_request" "*"
            "ows_srs" "EPSG:4326 EPSG:3857"
        END
    END
    LAYER
        NAME "buildings"
        TYPE POLYGON
        STATUS OFF
        CONNECTIONTYPE OGR
        # CONNECTIONTYPE FLATGEOBUF
        # DATA "data/osm/mostar/buildings_a.fgb"
        CONNECTION "data/osm/mostar/buildings_a.fgb"
        CLASSGROUP "university" # we can switch the default set of CLASSes here
        CLASS
            NAME "University" # this value is used for Legend titles for the CLASS
            GROUP "university"
            EXPRESSION ( "[type]" = "university" )
            STYLE
                COLOR 255 0 0
                OUTLINECOLOR 0 0 0
            END
        END
        CLASS
            NAME "Other"
            GROUP "other"
            STYLE
                COLOR 246 241 223
                OUTLINECOLOR 0 0 0
            END
        END
    END
END

Exercises

  1. Switch the CLASSGROUP in the Mapfile to see different styles. There are two groups university and other.

    LAYER
    NAME "buildings"
    ...
    CLASSGROUP "university" # can switch the default set of CLASSes here

  2. Switch the style used in the polygons.js file from university to other:

    source: new ImageWMS({
    url: mapserverUrl + mapfilesPath + 'polygons.map&',
    params: { 'LAYERS': 'buildings', 'STYLES': 'other' },

  3. Switch the CONNECTIONTYPE to use the native FLATGEOBUF driver.

  4. Experiment with styling the polygons. WIDTH can be used to change the width of the polygon outline. There are more examples at Cartographical Symbol Construction with MapServer.