The GeoServer and OpenLayers teams at Boundless are working hard to implement direct native support for MapBox styles. Using the same configuration for client and server styling is a wonderful improvement providing a consistent visual presentation. MapBox style provides a capability for styling maps with an easy to read JSON format. For OpenLayers this is a significant development as it allows the library to be configured using JSON files, rather than hand building JavaScript objects for each layer. For GeoServer the use of JSON is far easier than the raw XML used by the OGC Styled Layer Descriptor language. This presentation provides a quick introduction to the visual concepts presented by MapBox style, before switching gears to focus on how they have been implemented by the OpenLayers and GeoServer projects: OpenLayers provides an amazing hi-def experience on today’s screens and mobile devices. This presentation digs into how this experience has been achieved, what capabilities are supported, and what we are excited to work on next. For GeoServer you can see how many MapBox style features are now available (and review what control you are giving up by choosing this portable standard). This presentations provides a good visual comparison of client and server side rendering using identical styling configuration. To celebrate FOSS4G this is a FOSS4G technical presentation and we will be happy to take questions, demonstrate live examples, explore the implementation challenges, and talk about our lessons learned. We are excited to introduce these capabilities to the community, providing users and developers with an easier and more flexible way to style their maps.

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