Nostalgic Pickled Mango


    0.2.15 • Public • Published


    npm version

    A javascript package that aims to bring styling from a sld document to popular mapping tools. The project consists of two parts:

    • An SLDReader that parses an SLD document into a style object.
    • A function createOlStyleFunction that converts the parsed style object into a function that you can use in OpenLayers to style features.

    The OpenLayers style converter tries to be as efficient as possible by recycling OpenLayers Style instances whenever possible.


    More information about the standards:


    Live example

    See docs/examples folder, to serve them locally

    npm start

    Api docs

    Api docs

    Restrictions on supported SLD Features

    The SLDReader library can read both SLD v1.0 and SLD v1.1 documents, but not every part of the SLD standard is (or can be) implemented by the SLDReader and OpenLayers style converter (yet).



    Marks with well known symbol names are supported: circle, square, triangle, star, cross, x, hexagon, octagon. ExternalGraphic icons are supported.

    Wellknown names that reference a symbol library, like ttf://CustomFont#42 are not supported. The Size and Rotation elements may be dynamic by using the PropertyName element.

    Only one Graphic per PointSymbolizer is supported. Each Graphic can only have one Mark or one ExternalGraphic.


    Only these static css-parameters are supported:

    • stroke
    • stroke-width
    • stroke-opacity
    • stroke-linejoin
    • stroke-linecap
    • stroke-dasharray
    • stroke-dashoffset

    GraphicStroke with Mark or ExternalGraphic is mostly supported. GraphicFill and PerpendicularOffset are not supported.

    Note about GraphicStroke

    ExternalGraphic is mostly supported with these caveats:

    • The InitialGap property is not supported.
    • Always add a Size-element, even if using an ExternalGraphic instead of a Mark.
    • SLD V1.0.0 does not officially support the Gap property. For this, SLDReader implements the same workaround that Geoserver uses. You can use the stroke-dasharray parameter to add a gap between stroke marks. To do this, use a dash array with two parameters: the first parameter being the size of the graphic and the second being the gap size. See the " GraphicStroke: ExternalGraphic" example.

    GraphicStroke vendor options

    The following QGIS vendor options are supported on line symbolizers with a graphic stroke:

    • <VendorOption name="placement">firstPoint</VendorOption>
    • <VendorOption name="placement">lastPointPoint</VendorOption>

    See the demo page for an example.


    Polygons with static fill and stroke style parameters are supported. See LineSymbolizer above for supported stroke css-parameters. GraphicFill is also supported. GraphicStroke with Mark or ExternalGraphic is supported.


    Dynamic Labels (with PropertyName elements), Font and Halo are supported. No vendor-specific options are supported. LabelPlacement or PointPlacement are supported. Graphic elements to display behind the label text are not supported.

    • For PointPlacement, Displacement is supported1.
    • For PointPlacement, Rotation is supported1. PropertyName as rotation value is supported.
    • For PointPlacement, AnchorPoint is partially supported. Since OpenLayers does not support fractional anchor points, the label anchor is snapped to the alignment closest to left/right/top/bottom/center alignment. For instance: an AnchorPointX of 0.1 is snapped to 0, corresponding to left alignment in OpenLayers.
    • For LinePlacement, PerpendicularOffset is not supported.

    [1]: according to the SLD-spec, label rotation takes place before displacement, but OpenLayers applies displacement before rotation. Beware when combining rotation and displacement inside a single text symbolizer.

    Dynamic parameter values

    According to the SLD spec, most values can be mixed type (a combination ofplain text and Filter expressions). This means that most values can depend on a feature's properties. The SLDReader only supports dynamic values with PropertyName elements in these cases:

    • PointSymbolizer Size
    • PointSymbolizer Rotation
    • TextSymbolizer Label

    Also there is currently no support for arithmetic operators (Add,Sub,Mul,Div).

    Units of measure

    Only pixels are supported as unit of measure.

    Geometry element

    The use of a Geometry element to point to a different geometry property on a feature to use for styling is not supported.

    Function elements

    The use of Function expressions is not supported.

    Filter comparisons

    The SLDReader library supports the following operators inside Filter elements:

    • PropertyIsEqualTo
    • PropertyIsNotEqualTo
    • PropertyIsLessThan
    • PropertyIsLessThanOrEqualTo
    • PropertyIsGreaterThan
    • PropertyIsGreaterThanOrEqualTo
    • PropertyIsNull
    • PropertyIsLike
    • PropertyIsBetween
    • And
    • Or
    • Not
    • FeatureId

    Supported OpenLayers version

    The SLDReader has a peer dependency on OpenLayers version 5.3.0. Because there are no backwards incompatible changes between v6+ and v5.3, it is possible to use this library in a project that uses a later (v6+) version of OpenLayers.

    This may change in the future if the newest version of OpenLayers stops being backwards compatible with this library, or when a juicy new must-have feature is introduced. When that happens, SLDReader will be based on that OpenLayers version.

    Old Browsers

    Some older browsers need polyfills to use this library. E.g. es6.array.find. When using the OpenLayers style converter, OpenLayers' own browser restrictions have to be taken into account as well.


    Creating an issue

    Please include an example sld and if possible an example feature as GeoJSON.

    Development dependencies

    • node & npm
    • git
    • docker (optional, for running the live examples yourself)

    Pull requests

    Before starting on a pull request, please raise a Github issue first to prevent starting work on something we're already planning/working on.

    When making a pull request, please:

    • Address only a single issue or add a single item of functionality.
    • Create a test for your functionality.
    • Follow eslint rules and apply prettier.
    • Update or add an example.


    To install dependencies, test, build and document

    npm install
    npm test
    npm run build
    npm run docs
    docker-compose up (runs doc website on :4000)



    npm i @nieuwlandgeo/sldreader

    DownloadsWeekly Downloads






    Unpacked Size

    3.17 MB

    Total Files


    Last publish


    • allartk
    • akopinga