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

2,342 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
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did you try ⇒ www.HelpWriting.net ⇐?. They know how to do an amazing essay, research papers or dissertations.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I can advise you this service - ⇒ HelpWriting.net ⇐ Bought essay here. No problem.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Posting this for Torben and David from Boundless
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×