Downloaded 45 times
![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,
}
}
]
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-8-320.jpg)
![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": [...]
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-12-320.jpg)
![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"
}
}
]](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-14-320.jpg)
![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”
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-15-320.jpg)
![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]
]
}
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-16-320.jpg)
![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](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/85/Map-box-styles-in-GeoServer-and-OpenLayers-18-320.jpg)
![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,
}
}
]
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-8-2048.jpg)
![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": [...]
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-12-2048.jpg)
![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"
}
}
]](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-14-2048.jpg)
![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”
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-15-2048.jpg)
![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]
]
}
}](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-16-2048.jpg)
![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](https://image.slidesharecdn.com/mapboxstylesingeoserverandopenlayers-170829181114/75/Map-box-styles-in-GeoServer-and-OpenLayers-18-2048.jpg)
Uploaded byJody Garnett
Map box styles in GeoServer and OpenLayers
The document discusses the integration of Mapbox styles in GeoServer and OpenLayers, highlighting its benefits for GIS applications. It introduces Mapbox styles as a JSON-based styling language that allows for dynamic client-side styling of vector tiles. Additionally, it outlines features and capabilities of Mapbox styles while emphasizing their implementation in GeoServer and OpenLayers for enhanced GIS functionality.
In this document
Powered by AI
Overview of MapBox Styles and the expertise of David Vick and Torben Barsballe from Boundless.
Introduction to MapBox Styles and their significance, including JSON-based styling for client-side applications.
Details about MapBox styles, including various implementations and a comparison with SLD XML.
Explanation of vector tiles, their dynamic styling capabilities, and major features of MapBox Styles.
Description of root properties, sources, and layers in MapBox Styles.
Overview of data-driven styling and functions for zoom interactions in MapBox Styles.
How MapBox Styles are supported in GeoServer, detailing implemented properties and capabilities.
Introduction to using MapBox styles in OpenLayers, including installation and the capabilities of the ol-mapbox-style plugin.
Guidelines for the demo including prerequisites for GeoServer and OpenLayers, as well as creating and displaying maps.Closing with a Q&A session and an encouragement to connect with GIS professionals at Boundless.
More Related Content
Similar to Map box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayers
- 1. MapBox Styles inGeoServer and OpenLayers
- 2. David Vick ● 20years 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 isa 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 areMapBox 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 MapBoxStyles?
- 6. What are MapBoxStyles? 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 stylespecification 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 ● Easyto 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"?> <StyledLayerDescriptorversion="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 ● Likea 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 MapBoxStyles 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 Stylessupport 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-propertyfunctions 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.
- 18. Supported / UnsupportedMapBox 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 thiscool? • 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 inOpenLayers
- 21. ol-mapbox-style plugin: ● Constructsan OpenLayers app from a MapBox style ● Can display local or remote styles ol-mapbox-style
- 22. Installing ol-mapbox-style npm installol-mapbox-style OR https://github.com/boundlessgeo/ol-mapbox-style
- 23. Can create anOpenLayers 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 Datafrom 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.
- 27. ● Prerequisites ● Creatinga 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.1or 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 Stylein GeoServer Data from BostonOpenData (PDDL 1.0)
- 30. Publishing Vector Tilesin GeoWebCache
- 31. Displaying as amap in OpenLayers demo.js demo.html boston.json
- 32. Displaying as amap in OpenLayers
- 33. Displaying as amap in OpenLayers Data from BostonOpenData (PDDL 1.0)
- 34.
- 35.
- 36. Discover, Learn, Collaborate, andShare With GIS Professionals connect.boundlessgeo.com Check out our booth #103