1.
MapBox Styles in GeoServer and OpenLayers

2.
David Vick
● 20 years of experience developing
software solutions for the
Government.
● 2 years at Boundless and just this
year began contributing to Open
Source.
Who are we?
Torben Barsballe
● Software developer at Boundless for the
past 2.5 years
● Committer on both GeoServer and
GeoTools
● Contributor to OpenLayers
● From Victoria, BC

3.
Boundless Spatial is a GIS company focused on open source
solutions. Boundless delivers a scalable, open GIS platform that
includes Exchange, Suite, Desktop and Connect.
For more information, visit boundlessgeo.com
Who is Boundless?

4.
Outline
● What are MapBox Styles, and how do they make styling easier?
○ Why MapBox Styles matter
○ Capabilities
● MapBox Styles in GeoServer
● MapBox Styles in OpenLayers
● Demo
● Questions

5.
What are MapBox Styles?

6.
What are MapBox Styles?
MapBox Style is a styling language developed by MapBox.
● Open specification
● Written in JSON
● Primarily intended for client side (vector tile) styling

7.
The full style specification is available at
https://www.mapbox.com/mapbox-gl-js/style-spec
Multiple Implementations:
● MapBox GL
● MapBox APIs (macOS, iOS, Android)
● GeoServer
● OpenLayers
Open Specification

8.
JSON Styling
● Easy to manipulate using standard
web tools
● Easy to read and write
JSON Styling
{
"version": 8,
"layers": [
{
"id": "default_point",
"type": "circle",
"source": "test-source",
"source-layer": "place_label",
"layout": {
"visibility": "visible"
},
"paint": {
"circle-color": "#FF0000",
"circle-opacity": 1,
"circle-radius": 6,
"circle-stroke-opacity": 0,
}
}
]
}

9.
<?xml version="1.0" encoding="UTF-8"?>
<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>default_point</Name>
<UserStyle>
<Title>Default Point</Title>
<Abstract>A sample style that draws a point</Abstract>
<FeatureTypeStyle>
<Rule>
<Name>rule1</Name>
<Title>Red Square</Title>
<Abstract>A 6 pixel circle with a red fill and no stroke</Abstract>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
SLD Styling - XML
As JSON, MapBox styles are relatively
easy to read and write when
compared with other styling languages
such as GeoServer's SLD language.

10.
Vector tiles
● Like a raster map tile, but comprised of unstyled vector data
● MapBox Vector Tiles use the Google protobuf format
● Supports dynamic, client-side styling
Vector Tiles & Client-side styling

11.
What Can MapBox Styles Do?
Features
• Zoom level styling
• Data driven styling
• Zoom and Data styling
• Filtering
• Drawing order

12.
Root Properties
• Version
• Name
• Sprite
• Glyph
• Sources
• Layers
MapBox Styles - Root Properties
{
"version": 8,
"name": "Mapbox Streets",
"sprite": "mapbox://sprites/mapbox/streets-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {...},
"layers": [...]
}

13.
MapBox Styles - Sources
● Vector
● GeoJSON
● Raster
● Image
● Video
● Canvas

14.
MapBox Styles - Layers
A Style’s layers property list all of the layers available in that style. The type of layer is specified by the
type property.
• Background
• Fill
• Line
• Symbol
• Raster
• Circle
• Fill Extrusion
"layers": [
{
"id": "water",
"source": "mapbox-streets",
"source-layer": "water",
"type": "fill",
"paint": {
"fill-color": "#00ffff"
}
}
]

15.
Data-driven Styling
MapBox Styles support the concept of Data-Driven Styling through
the use of Property Functions.
Constant: Property Function:
{
“Circle-color”: {
“Property”: “temperature”,
“Stops”: [
[0, ‘blue’],
[100, ‘red’]
]
}
}
{
“Circle-color”: “blue”
}

16.
Functions and Zoom
Zoom-and-property functions allow the appearance of a map feature to change with both its properties and
zoom. Each stop is an array with two elements, the first is an object with a property input value and a zoom, and
the second is a function output value.
{
"circle-radius": {
"property": "rating",
"stops": [
// zoom is 0 and "rating" is 0 -> circle radius will be 0px
[{zoom: 0, value: 0}, 0],
// zoom is 0 and "rating" is 5 -> circle radius will be 5px
[{zoom: 0, value: 5}, 5],
// zoom is 20 and "rating" is 0 -> circle radius will be 0px
[{zoom: 20, value: 0}, 0],
// zoom is 20 and "rating" is 5 -> circle radius will be 20px
[{zoom: 20, value: 5}, 20]
]
}
}

17.
GeoServer Implementation

18.
Supported / Unsupported MapBox properties
Implemented in GeoTools as a module consumed by GeoServer
Implemented properties
• Sources
• GeoServer does not use the Sources property in the style document at this time. The style is
applied to whichever GeoServer layer the user selects.
• Supported Layer Types
• [Background, Fill, Line, Symbol, Raster, Circle, Fill-Extrusion]
• Supported Data Types
• [Color, Enum, String, Boolean, Number, Array, Function, Filter]
• Layer Properties Not Supported
• *-translate-anchor, icon-rotation-alignment, icon-pitch-alignment
GeoServer MapBox Style Specification

19.
Why is this cool?
• We are able to read the MapBox style specification and translate
that into SLD enabling the user to use JSON while still creating OGC
compliant styles.
• Able to extend SLD with geometry transformations.
• We are adding to the GeoTools code base by adding capabilities
for several new functions such as exponential functions and Hue
Rotation.

20.
MapBox Styles in OpenLayers

21.
ol-mapbox-style plugin:
● Constructs an OpenLayers app from a MapBox style
● Can display local or remote styles
ol-mapbox-style

22.
Installing ol-mapbox-style
npm install ol-mapbox-style
OR
https://github.com/boundlessgeo/ol-mapbox-style

23.
Can create an OpenLayers application in one line of javascript:
Using ol-mapbox-style
'map' - an element in the HTML document
'data/boston.json' - URL to a MapBox style

24.
Rendering a map
Data from BostonOpenData (PDDL 1.0)

25.
Supported Features
Current Features
● Vector, GeoJSON, and Raster sources
● Background, Circle, Line, Fill, and Symbol layers
○ All features not yet implemented
○ Only supports system fonts
○ Most alignment/placement features not supported
○ Data-driven styling is supported
Upcoming features:
● Improved labeling for vector tiles

26.
Demo

27.
● Prerequisites
● Creating a MapBox Style in GeoServer
● Exposing Vector Tiles using GeoWebCache
● Using a MapBox Style with Vector Tiles in OpenLayers
Demo

28.
Prerequisites
GeoServer
● Version 2.11.1 or newer
● MapBox Style community module
● Vector Tiles community module
OpenLayers
● Latest release (v4.3.1)
● ol-mapbox-style plugin (v2.6.1)

29.
Creating a Style in GeoServer
Data from BostonOpenData (PDDL 1.0)

30.
Publishing Vector Tiles in GeoWebCache

31.
Displaying as a map in OpenLayers
demo.js
demo.html boston.json

32.
Displaying as a map in OpenLayers

33.
Displaying as a map in OpenLayers
Data from BostonOpenData (PDDL 1.0)

34.
Questions and Closing

35.
Questions?

36.
Discover, Learn,
Collaborate, and Share
With GIS Professionals
connect.boundlessgeo.com
Check out our booth #103