Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MapBox Styles in GeoServer and OpenLayers
David Vick
● 20 years of experience developing
software solutions for the
Government.
● 2 years at Boundless and just this...
Boundless Spatial is a GIS company focused on open source
solutions. Boundless delivers a scalable, open GIS platform that...
Outline
● What are MapBox Styles, and how do they make styling easier?
○ Why MapBox Styles matter
○ Capabilities
● MapBox ...
What are MapBox Styles?
What are MapBox Styles?
MapBox Style is a styling language developed by MapBox.
● Open specification
● Written in JSON
● P...
The full style specification is available at
https://www.mapbox.com/mapbox-gl-js/style-spec
Multiple Implementations:
● Ma...
JSON Styling
● Easy to manipulate using standard
web tools
● Easy to read and write
JSON Styling
{
"version": 8,
"layers":...
<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/s...
Vector tiles
● Like a raster map tile, but comprised of unstyled vector data
● MapBox Vector Tiles use the Google protobuf...
What Can MapBox Styles Do?
Features
• Zoom level styling
• Data driven styling
• Zoom and Data styling
• Filtering
• Drawi...
Root Properties
• Version
• Name
• Sprite
• Glyph
• Sources
• Layers
MapBox Styles - Root Properties
{
"version": 8,
"name...
MapBox Styles - Sources
● Vector
● GeoJSON
● Raster
● Image
● Video
● Canvas
MapBox Styles - Layers
A Style’s layers property list all of the layers available in that style. The type of layer is spec...
Data-driven Styling
MapBox Styles support the concept of Data-Driven Styling through
the use of Property Functions.
Consta...
Functions and Zoom
Zoom-and-property functions allow the appearance of a map feature to change with both its properties an...
GeoServer Implementation
Supported / Unsupported MapBox properties
Implemented in GeoTools as a module consumed by GeoServer
Implemented properties...
Why is this cool?
• We are able to read the MapBox style specification and translate
that into SLD enabling the user to us...
MapBox Styles in OpenLayers
ol-mapbox-style plugin:
● Constructs an OpenLayers app from a MapBox style
● Can display local or remote styles
ol-mapbox-...
Installing ol-mapbox-style
npm install ol-mapbox-style
OR
https://github.com/boundlessgeo/ol-mapbox-style
Can create an OpenLayers application in one line of javascript:
Using ol-mapbox-style
'map' - an element in the HTML docum...
Rendering a map
Data from BostonOpenData (PDDL 1.0)
Supported Features
Current Features
● Vector, GeoJSON, and Raster sources
● Background, Circle, Line, Fill, and Symbol lay...
Demo
● Prerequisites
● Creating a MapBox Style in GeoServer
● Exposing Vector Tiles using GeoWebCache
● Using a MapBox Style wi...
Prerequisites
GeoServer
● Version 2.11.1 or newer
● MapBox Style community module
● Vector Tiles community module
OpenLaye...
Creating a Style in GeoServer
Data from BostonOpenData (PDDL 1.0)
Publishing Vector Tiles in GeoWebCache
Displaying as a map in OpenLayers
demo.js
demo.html boston.json
Displaying as a map in OpenLayers
Displaying as a map in OpenLayers
Data from BostonOpenData (PDDL 1.0)
Questions and Closing
Questions?
Discover, Learn,
Collaborate, and Share
With GIS Professionals
connect.boundlessgeo.com
Check out our booth #103
Upcoming SlideShare
Loading in …5
×

Map box styles in GeoServer and OpenLayers

1,281 views

Published on

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.

Published in: Internet

Map box styles in GeoServer and OpenLayers

  1. 1. MapBox Styles in GeoServer and OpenLayers
  2. 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. 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. 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. 5. What are MapBox Styles?
  6. 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. 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. 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. 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. 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. 11. What Can MapBox Styles Do? Features • Zoom level styling • Data driven styling • Zoom and Data styling • Filtering • Drawing order
  12. 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. 13. MapBox Styles - Sources ● Vector ● GeoJSON ● Raster ● Image ● Video ● Canvas
  14. 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. 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. 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. 17. GeoServer Implementation
  18. 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. 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. 20. MapBox Styles in OpenLayers
  21. 21. ol-mapbox-style plugin: ● Constructs an OpenLayers app from a MapBox style ● Can display local or remote styles ol-mapbox-style
  22. 22. Installing ol-mapbox-style npm install ol-mapbox-style OR https://github.com/boundlessgeo/ol-mapbox-style
  23. 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. 24. Rendering a map Data from BostonOpenData (PDDL 1.0)
  25. 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. 26. Demo
  27. 27. ● Prerequisites ● Creating a MapBox Style in GeoServer ● Exposing Vector Tiles using GeoWebCache ● Using a MapBox Style with Vector Tiles in OpenLayers Demo
  28. 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. 29. Creating a Style in GeoServer Data from BostonOpenData (PDDL 1.0)
  30. 30. Publishing Vector Tiles in GeoWebCache
  31. 31. Displaying as a map in OpenLayers demo.js demo.html boston.json
  32. 32. Displaying as a map in OpenLayers
  33. 33. Displaying as a map in OpenLayers Data from BostonOpenData (PDDL 1.0)
  34. 34. Questions and Closing
  35. 35. Questions?
  36. 36. Discover, Learn, Collaborate, and Share With GIS Professionals connect.boundlessgeo.com Check out our booth #103

×