Styled Layer Descriptor (SLD) in MapServer

Warning

This page is currently in a draft form.

Overview

Styled Layer Descriptor (SLD) is an OGC standard used for describing styles. SLD files are written in XML.

SLD can be used by MapServer in several different ways:

1. Applying an external SLD file from a URL to a WMS service
2. Using SLD in a Mapfile to style a LAYER.
3. Generating SLD from a Mapfile

This exercise will focus on the first use case.

Code

Example

• Direct MapServer request: http://localhost:5000/?map=/etc/mapserver/lines.map&mode=map&layer=roads
• Local OpenLayers example: http://localhost:5001/sld.html
• GetCapabilities request: http://localhost:5000/?map=/etc/mapserver/sld.map&REQUEST=GetCapabilities&SERVICE=WMS&VERSION=1.3.0
• Request to generate SLD from a Mapfile: http://localhost:5000/?map=/etc/mapserver/sld.map&REQUEST=GetStyles&SERVICE=WMS&LAYERS=countries&VERSION=1.3.0&sld=http://node:5001/data/sld.xml

Sld

<StyledLayerDescriptor version="1.1.0">
  <NamedLayer>
    <!-- The Name here must match the LAYER NAME in the Mapfile -->
    <Name>countries</Name>
    <UserStyle>
      <FeatureTypeStyle>
        <Rule>
          <Name>Country Boundaries</Name>
          <Filter>
            <PropertyIsNotEqualTo>
              <PropertyName>ADMIN</PropertyName>
              <Literal>Estonia</Literal>
            </PropertyIsNotEqualTo>
          </Filter>
          <LineSymbolizer>
            <Stroke>
              <SvgParameter name="stroke-width">2</SvgParameter>
              <SvgParameter name="stroke">#638889</SvgParameter>
            </Stroke>
          </LineSymbolizer>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#9DBC98</CssParameter>
              <CssParameter name="fill-opacity">0.5</CssParameter>
            </Fill>
          </PolygonSymbolizer>
        </Rule>
        <Rule>
          <Name>Highlighted Country</Name>
          <Filter>
            <PropertyIsEqualTo>
              <PropertyName>ADMIN</PropertyName>
              <Literal>Estonia</Literal>
            </PropertyIsEqualTo>
          </Filter>
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#FFEA20</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke">#000000</CssParameter>
              <CssParameter name="stroke-width">2</CssParameter>
            </Stroke>
          </PolygonSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

sld.js

import ImageWMS from 'ol/source/ImageWMS.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import { Image as ImageLayer } from 'ol/layer.js';

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

const wmsSource = new ImageWMS({
    url: mapserverUrl + mapfilesPath + 'sld.map&',
    params: {
        'LAYERS': 'countries',
        'SLD': appUrl + 'sld.xml',
        'SLD_VERSION': '1.1.0'
    },
    ratio: 1
});

const updateLegend = function (resolution) {
    const graphicUrl = wmsSource.getLegendUrl(resolution);
    const img = document.getElementById('legend');
    img.src = graphicUrl;
};

const layers = [
    new ImageLayer({
        extent: [-20037508.34, - 20048966.1, 20037508.34, 20048966.1],
        source: wmsSource
    }),
];
const map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
        center: [881083.0, 7481426.5],
        zoom: 3,
    }),
});


// Initial legend
const resolution = map.getView().getResolution();
updateLegend(resolution);

// Update the legend when the resolution changes
map.getView().on('change:resolution', function (event) {
    const resolution = event.target.getResolution();
    updateLegend(resolution);
});

sld.map

MAP
    NAME "Welcome!"
    EXTENT -20037508.34 -20048966.1 20037508.34 20048966.1
    #EXTENT -180 -90 180 90
    PROJECTION
        #"init=epsg:4326"
        "init=epsg:3857"
    END
    WEB
        METADATA
            "wms_enable_request" "*"
        END
    END

    SYMBOL
        NAME "circlef"
        TYPE ELLIPSE
        FILLED TRUE
        POINTS
            10 10
        END
    END
    IMAGECOLOR "#ADD8E6"
    LAYER
        NAME "countries"
        DEBUG 5
        TYPE POLYGON
        PROJECTION
            "init=epsg:4326"
        END
        STATUS ON

        TEMPLATE "ttt"
        METADATA
            "gml_include_items" "all"
            "gml_types" "auto"
        END

        CONNECTIONTYPE OGR
        CONNECTION "data/naturalearth"
        DATA "ne_110m_admin_0_countries"
        EXTENT -180.0 -90.0 180.0 90
        PROCESSING "CLOSE_CONNECTION=DEFER"
        CLASS
            STYLE
                COLOR 60 179 113
                OUTLINECOLOR 255 255 255
                OUTLINEWIDTH 0.1
            END
        END
    END
    #LAYER
    #    NAME "cities"
    #    TYPE POINT
    #    PROJECTION
    #        "init=epsg:4326"
    #    END
    #    STATUS ON
    #    CONNECTIONTYPE OGR
    #    CONNECTION "/data/naturalearth/fgb"
    #    DATA "SELECT *, 15-LABELRANK AS POINTSIZE FROM ne_110m_populated_places"
    #    EXTENT -180.0 -90.0 180.0 90
    #    CLASS
    #        EXPRESSION ([WORLDCITY] = 1)
    #        STYLE
    #            SYMBOL "circlef"
    #            COLOR "#6A5ACD"
    #            SIZE [POINTSIZE]
    #        END
    #        LABEL
    #            TEXT "[NAME]"
    #            FONT "arial"
    #            SIZE 10
    #            POSITION "ul"
    #        END
    #    END
    #END
END

Exercises

1. Update the SLD XML file. You will then need to refresh the browser to see changes.