SlideShare a Scribd company logo
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
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
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?
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
What are MapBox Styles?
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
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
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,
}
}
]
}
<?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.
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
What Can MapBox Styles Do?
Features
• Zoom level styling
• Data driven styling
• Zoom and Data styling
• Filtering
• Drawing order
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": [...]
}
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 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"
}
}
]
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”
}
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]
]
}
}
GeoServer Implementation
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
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.
MapBox Styles in OpenLayers
ol-mapbox-style plugin:
● Constructs an OpenLayers app from a MapBox style
● Can display local or remote styles
ol-mapbox-style
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 document
'data/boston.json' - URL to a MapBox style
Rendering a map
Data from BostonOpenData (PDDL 1.0)
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
Demo
● Prerequisites
● Creating a MapBox Style in GeoServer
● Exposing Vector Tiles using GeoWebCache
● Using a MapBox Style with Vector Tiles in OpenLayers
Demo
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)
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

More Related Content

What's hot

[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
MinPa Lee
 
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
HaNJiN Lee
 
오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초
HaNJiN Lee
 
공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재
JungHwan Yun
 
Digital 2022 Rwanda (February 2022) v01
Digital 2022 Rwanda (February 2022) v01Digital 2022 Rwanda (February 2022) v01
Digital 2022 Rwanda (February 2022) v01
DataReportal
 
QGIS 3.0 새 기능 둘러보기
QGIS 3.0 새 기능 둘러보기QGIS 3.0 새 기능 둘러보기
QGIS 3.0 새 기능 둘러보기
Byeong-Hyeok Yu
 
QGIS 활용
QGIS 활용QGIS 활용
QGIS 활용
Sungjin Kang
 
QGIS 개요
QGIS 개요QGIS 개요
QGIS 개요
SANGHEE SHIN
 
오픈소스 GIS 교육 - PostGIS
오픈소스 GIS 교육 - PostGIS오픈소스 GIS 교육 - PostGIS
오픈소스 GIS 교육 - PostGIS
JungHwan Yun
 
[FOSS4G Korea 2016] Workshop - Advanced GeoServer
[FOSS4G Korea 2016] Workshop - Advanced GeoServer[FOSS4G Korea 2016] Workshop - Advanced GeoServer
[FOSS4G Korea 2016] Workshop - Advanced GeoServer
MinPa Lee
 
QGIS 고급 및 PyQGIS - 김기웅, 임영현
QGIS 고급 및 PyQGIS - 김기웅, 임영현 QGIS 고급 및 PyQGIS - 김기웅, 임영현
QGIS 고급 및 PyQGIS - 김기웅, 임영현
SANGHEE SHIN
 
Qgis 기초 2019
Qgis 기초 2019Qgis 기초 2019
Qgis 기초 2019
Joonho Lee
 
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
Byeong-Hyeok Yu
 
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
MinPa Lee
 
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
BJ Jang
 
Semantic 3D City Models with CityGML
Semantic 3D City Models with CityGMLSemantic 3D City Models with CityGML
Semantic 3D City Models with CityGML
ICGCat
 
공간SQL을 이용한 공간자료분석 기초실습
공간SQL을 이용한 공간자료분석 기초실습공간SQL을 이용한 공간자료분석 기초실습
공간SQL을 이용한 공간자료분석 기초실습
BJ Jang
 
오픈소스GIS의 이해와 활용
오픈소스GIS의 이해와 활용오픈소스GIS의 이해와 활용
오픈소스GIS의 이해와 활용
SANGHEE SHIN
 
Enterprise GIS
Enterprise GIS Enterprise GIS
Enterprise GIS
Esri
 
QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교
BJ Jang
 

What's hot (20)

[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
[FOSS4G Korea 2021]Workshop-QGIS-TIPS-20211028
 
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습 공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
공간정보 거점대학 - OpenLayers의 고급 기능 이해 및 실습
 
오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초오픈소스GIS 개론 과정 - OpenLayers 기초
오픈소스GIS 개론 과정 - OpenLayers 기초
 
공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재
 
Digital 2022 Rwanda (February 2022) v01
Digital 2022 Rwanda (February 2022) v01Digital 2022 Rwanda (February 2022) v01
Digital 2022 Rwanda (February 2022) v01
 
QGIS 3.0 새 기능 둘러보기
QGIS 3.0 새 기능 둘러보기QGIS 3.0 새 기능 둘러보기
QGIS 3.0 새 기능 둘러보기
 
QGIS 활용
QGIS 활용QGIS 활용
QGIS 활용
 
QGIS 개요
QGIS 개요QGIS 개요
QGIS 개요
 
오픈소스 GIS 교육 - PostGIS
오픈소스 GIS 교육 - PostGIS오픈소스 GIS 교육 - PostGIS
오픈소스 GIS 교육 - PostGIS
 
[FOSS4G Korea 2016] Workshop - Advanced GeoServer
[FOSS4G Korea 2016] Workshop - Advanced GeoServer[FOSS4G Korea 2016] Workshop - Advanced GeoServer
[FOSS4G Korea 2016] Workshop - Advanced GeoServer
 
QGIS 고급 및 PyQGIS - 김기웅, 임영현
QGIS 고급 및 PyQGIS - 김기웅, 임영현 QGIS 고급 및 PyQGIS - 김기웅, 임영현
QGIS 고급 및 PyQGIS - 김기웅, 임영현
 
Qgis 기초 2019
Qgis 기초 2019Qgis 기초 2019
Qgis 기초 2019
 
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
지리정보체계(GIS) - [1] GIS 데이터 유형, 구조 알기
 
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
Java 기반의 오픈 소스 GIS를 지원하는 국내 공간 DBMS 드라이버 개발
 
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
[FOSS4G Korea 2016] GeoHash를 이용한 지형도 변화탐지와 시계열 관리
 
Semantic 3D City Models with CityGML
Semantic 3D City Models with CityGMLSemantic 3D City Models with CityGML
Semantic 3D City Models with CityGML
 
공간SQL을 이용한 공간자료분석 기초실습
공간SQL을 이용한 공간자료분석 기초실습공간SQL을 이용한 공간자료분석 기초실습
공간SQL을 이용한 공간자료분석 기초실습
 
오픈소스GIS의 이해와 활용
오픈소스GIS의 이해와 활용오픈소스GIS의 이해와 활용
오픈소스GIS의 이해와 활용
 
Enterprise GIS
Enterprise GIS Enterprise GIS
Enterprise GIS
 
QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교QGIS 소개 및 ArcMap과의 비교
QGIS 소개 및 ArcMap과의 비교
 

Similar to Map box styles in GeoServer and OpenLayers

OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading Language
Jungsoo Nam
 
Vector tile style editor workshop
Vector tile style editor workshopVector tile style editor workshop
Vector tile style editor workshop
Aileen Buckley
 
mosaci Caching Maps and Vector Tile Layers Best Practices tw_1765-371[1] .pptx
mosaci Caching Maps and Vector  Tile Layers Best Practices tw_1765-371[1] .pptxmosaci Caching Maps and Vector  Tile Layers Best Practices tw_1765-371[1] .pptx
mosaci Caching Maps and Vector Tile Layers Best Practices tw_1765-371[1] .pptx
ShashibhushanKumar61
 
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
Manikanta Kondeti
 
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
Manikanta Kondeti
 
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
Adam Paxton
 
Automatic Typographic Maps
Automatic Typographic MapsAutomatic Typographic Maps
Automatic Typographic Maps
Niklas Elmqvist
 
Agi08 Jeremy Morley
Agi08 Jeremy MorleyAgi08 Jeremy Morley
Agi08 Jeremy Morley
Jeremy Morley
 
State of GeoServer 2.12
State of GeoServer 2.12State of GeoServer 2.12
State of GeoServer 2.12
GeoSolutions
 
Concepts and Methods of Embedding Statistical Data into Maps
Concepts and Methods of Embedding Statistical Data into MapsConcepts and Methods of Embedding Statistical Data into Maps
Concepts and Methods of Embedding Statistical Data into Maps
Mohammad Liton Hossain
 
Saving Money with Open Source GIS
Saving Money with Open Source GISSaving Money with Open Source GIS
Saving Money with Open Source GIS
bryanluman
 
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
Petr Pridal
 
CAD STANDARDS
CAD STANDARDSCAD STANDARDS
CAD STANDARDS
Balamurugan Subburaj
 
Matplotlib_Complete review_2021_abridged_version
Matplotlib_Complete review_2021_abridged_versionMatplotlib_Complete review_2021_abridged_version
Matplotlib_Complete review_2021_abridged_version
Bhaskar J.Roy
 
Matplotlib Review 2021
Matplotlib Review 2021Matplotlib Review 2021
Matplotlib Review 2021
Bhaskar J.Roy
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
1st UIM-GDB - Connections to the Real World
1st UIM-GDB - Connections to the Real World1st UIM-GDB - Connections to the Real World
1st UIM-GDB - Connections to the Real World
Achim Friedland
 
An Introduction to MapBox
An Introduction to MapBoxAn Introduction to MapBox
An Introduction to MapBox
Matt Yeh
 
MapServer Project Status 2013
MapServer Project Status 2013MapServer Project Status 2013
MapServer Project Status 2013
Jeff McKenna
 
LocationTech Tour 2016 - Vectortiles
LocationTech Tour 2016 - Vectortiles LocationTech Tour 2016 - Vectortiles
LocationTech Tour 2016 - Vectortiles
Morgan Thompson
 

Similar to Map box styles in GeoServer and OpenLayers (20)

OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading Language
 
Vector tile style editor workshop
Vector tile style editor workshopVector tile style editor workshop
Vector tile style editor workshop
 
mosaci Caching Maps and Vector Tile Layers Best Practices tw_1765-371[1] .pptx
mosaci Caching Maps and Vector  Tile Layers Best Practices tw_1765-371[1] .pptxmosaci Caching Maps and Vector  Tile Layers Best Practices tw_1765-371[1] .pptx
mosaci Caching Maps and Vector Tile Layers Best Practices tw_1765-371[1] .pptx
 
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
LSIVIEWER 2.0-A CLIENT-ORIENTED ONLINE VISUALIZATION TOOL FOR GEOSPATIAL VECT...
 
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
An online viewer for Geospatial Vector Data using HTML5 Canvas and JavaScript
 
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
Build Custom Maps with Appcelerator Titanium, Mapbox and OpenStreetMap - tiCo...
 
Automatic Typographic Maps
Automatic Typographic MapsAutomatic Typographic Maps
Automatic Typographic Maps
 
Agi08 Jeremy Morley
Agi08 Jeremy MorleyAgi08 Jeremy Morley
Agi08 Jeremy Morley
 
State of GeoServer 2.12
State of GeoServer 2.12State of GeoServer 2.12
State of GeoServer 2.12
 
Concepts and Methods of Embedding Statistical Data into Maps
Concepts and Methods of Embedding Statistical Data into MapsConcepts and Methods of Embedding Statistical Data into Maps
Concepts and Methods of Embedding Statistical Data into Maps
 
Saving Money with Open Source GIS
Saving Money with Open Source GISSaving Money with Open Source GIS
Saving Money with Open Source GIS
 
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
TileServer-GL: Hosting vector tile maps on your own server (FOSS4G 2016 Bonn)
 
CAD STANDARDS
CAD STANDARDSCAD STANDARDS
CAD STANDARDS
 
Matplotlib_Complete review_2021_abridged_version
Matplotlib_Complete review_2021_abridged_versionMatplotlib_Complete review_2021_abridged_version
Matplotlib_Complete review_2021_abridged_version
 
Matplotlib Review 2021
Matplotlib Review 2021Matplotlib Review 2021
Matplotlib Review 2021
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
1st UIM-GDB - Connections to the Real World
1st UIM-GDB - Connections to the Real World1st UIM-GDB - Connections to the Real World
1st UIM-GDB - Connections to the Real World
 
An Introduction to MapBox
An Introduction to MapBoxAn Introduction to MapBox
An Introduction to MapBox
 
MapServer Project Status 2013
MapServer Project Status 2013MapServer Project Status 2013
MapServer Project Status 2013
 
LocationTech Tour 2016 - Vectortiles
LocationTech Tour 2016 - Vectortiles LocationTech Tour 2016 - Vectortiles
LocationTech Tour 2016 - Vectortiles
 

More from Jody Garnett

GeoServer Orientation
GeoServer OrientationGeoServer Orientation
GeoServer Orientation
Jody Garnett
 
Open Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeoOpen Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeo
Jody Garnett
 
Introduction to OSGeo
Introduction to OSGeoIntroduction to OSGeo
Introduction to OSGeo
Jody Garnett
 
Open Source Procurement
Open Source ProcurementOpen Source Procurement
Open Source Procurement
Jody Garnett
 
Java Image Processing for Geospatial Community
Java Image Processing for Geospatial CommunityJava Image Processing for Geospatial Community
Java Image Processing for Geospatial Community
Jody Garnett
 
State of JTS 2018
State of JTS 2018State of JTS 2018
State of JTS 2018
Jody Garnett
 
Open Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeoOpen Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeo
Jody Garnett
 
Open Source is hard, we are here to help!
Open Source is hard, we are here to help!Open Source is hard, we are here to help!
Open Source is hard, we are here to help!
Jody Garnett
 
GeoServer Developers Workshop
GeoServer Developers WorkshopGeoServer Developers Workshop
GeoServer Developers Workshop
Jody Garnett
 
GeoServer Ecosystem 2018
GeoServer Ecosystem 2018GeoServer Ecosystem 2018
GeoServer Ecosystem 2018
Jody Garnett
 
State of GeoServer 2.14
State of GeoServer 2.14State of GeoServer 2.14
State of GeoServer 2.14
Jody Garnett
 
OSGeo AGM 2018
OSGeo AGM 2018OSGeo AGM 2018
OSGeo AGM 2018
Jody Garnett
 
Working with the OSGeo Community
Working with the OSGeo CommunityWorking with the OSGeo Community
Working with the OSGeo Community
Jody Garnett
 
State of GeoServer 2.13
State of GeoServer 2.13State of GeoServer 2.13
State of GeoServer 2.13
Jody Garnett
 
Open Data and Open Software Geospatial Applications
Open Data and Open Software Geospatial ApplicationsOpen Data and Open Software Geospatial Applications
Open Data and Open Software Geospatial Applications
Jody Garnett
 
Quick and easy web maps
Quick and easy web mapsQuick and easy web maps
Quick and easy web maps
Jody Garnett
 
State of GeoGig
State of GeoGigState of GeoGig
State of GeoGig
Jody Garnett
 
State of JTS 2017
State of JTS 2017State of JTS 2017
State of JTS 2017
Jody Garnett
 
OSGeo AGM 2017
OSGeo AGM 2017OSGeo AGM 2017
OSGeo AGM 2017
Jody Garnett
 
Incubation Orientation
Incubation OrientationIncubation Orientation
Incubation Orientation
Jody Garnett
 

More from Jody Garnett (20)

GeoServer Orientation
GeoServer OrientationGeoServer Orientation
GeoServer Orientation
 
Open Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeoOpen Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeo
 
Introduction to OSGeo
Introduction to OSGeoIntroduction to OSGeo
Introduction to OSGeo
 
Open Source Procurement
Open Source ProcurementOpen Source Procurement
Open Source Procurement
 
Java Image Processing for Geospatial Community
Java Image Processing for Geospatial CommunityJava Image Processing for Geospatial Community
Java Image Processing for Geospatial Community
 
State of JTS 2018
State of JTS 2018State of JTS 2018
State of JTS 2018
 
Open Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeoOpen Source Practice and Passion at OSGeo
Open Source Practice and Passion at OSGeo
 
Open Source is hard, we are here to help!
Open Source is hard, we are here to help!Open Source is hard, we are here to help!
Open Source is hard, we are here to help!
 
GeoServer Developers Workshop
GeoServer Developers WorkshopGeoServer Developers Workshop
GeoServer Developers Workshop
 
GeoServer Ecosystem 2018
GeoServer Ecosystem 2018GeoServer Ecosystem 2018
GeoServer Ecosystem 2018
 
State of GeoServer 2.14
State of GeoServer 2.14State of GeoServer 2.14
State of GeoServer 2.14
 
OSGeo AGM 2018
OSGeo AGM 2018OSGeo AGM 2018
OSGeo AGM 2018
 
Working with the OSGeo Community
Working with the OSGeo CommunityWorking with the OSGeo Community
Working with the OSGeo Community
 
State of GeoServer 2.13
State of GeoServer 2.13State of GeoServer 2.13
State of GeoServer 2.13
 
Open Data and Open Software Geospatial Applications
Open Data and Open Software Geospatial ApplicationsOpen Data and Open Software Geospatial Applications
Open Data and Open Software Geospatial Applications
 
Quick and easy web maps
Quick and easy web mapsQuick and easy web maps
Quick and easy web maps
 
State of GeoGig
State of GeoGigState of GeoGig
State of GeoGig
 
State of JTS 2017
State of JTS 2017State of JTS 2017
State of JTS 2017
 
OSGeo AGM 2017
OSGeo AGM 2017OSGeo AGM 2017
OSGeo AGM 2017
 
Incubation Orientation
Incubation OrientationIncubation Orientation
Incubation Orientation
 

Recently uploaded

Trump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirtsTrump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirts
exgf28
 
Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)
Bangladesh Network Operators Group
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
Bangladesh Network Operators Group
 
upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1
diogolsew
 
Best Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdfBest Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdf
Million-$-Knowledge {Million Dollar Knowledge}
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
Lumiverse Solutions Pvt Ltd
 
Trump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination ShirtTrump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination Shirt
exgf28
 
New York Institute of Technology degree Cert diploma offer
New York Institute of Technology degree Cert diploma offerNew York Institute of Technology degree Cert diploma offer
New York Institute of Technology degree Cert diploma offer
ubovu
 
Software Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical ImplementationsSoftware Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical Implementations
Bangladesh Network Operators Group
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
Edward Blurock
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
pdfsubmission50
 
Study of international anticancer research trends.pdf
Study of international anticancer research trends.pdfStudy of international anticancer research trends.pdf
Study of international anticancer research trends.pdf
Preston University
 
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In IndiaLordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
exchangeid32
 
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO CompanyMobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
SIB Infotech
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Krishna L
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
exgf28
 
Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...
APNIC
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
Infotainmentforall
 
Do it again anti Republican shirt Do it again anti Republican shirt
Do it again anti Republican shirt Do it again anti Republican shirtDo it again anti Republican shirt Do it again anti Republican shirt
Do it again anti Republican shirt Do it again anti Republican shirt
exgf28
 
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
QingjieDu1
 

Recently uploaded (20)

Trump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirtsTrump fist pump t shirts Trump fist pump t shirts
Trump fist pump t shirts Trump fist pump t shirts
 
Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)Maximizing Network Efficiency with Large Language Models (LLM)
Maximizing Network Efficiency with Large Language Models (LLM)
 
Open Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using GraylogOpen Source TCP or Netflow Log Server Using Graylog
Open Source TCP or Netflow Log Server Using Graylog
 
upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1upgrade to zabbix-7 0 como atualiza lts1
upgrade to zabbix-7 0 como atualiza lts1
 
Best Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdfBest Skills to Learn for Freelancing.pdf
Best Skills to Learn for Freelancing.pdf
 
Understanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat IntelligenceUnderstanding Threat Intelligence | What is Threat Intelligence
Understanding Threat Intelligence | What is Threat Intelligence
 
Trump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination ShirtTrump Assassination Shirt Trump Assassination Shirt
Trump Assassination Shirt Trump Assassination Shirt
 
New York Institute of Technology degree Cert diploma offer
New York Institute of Technology degree Cert diploma offerNew York Institute of Technology degree Cert diploma offer
New York Institute of Technology degree Cert diploma offer
 
Software Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical ImplementationsSoftware Defined Networking, Concepts and Practical Implementations
Software Defined Networking, Concepts and Practical Implementations
 
Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...Ontology for the semantic enhancement, database definition and management and...
Ontology for the semantic enhancement, database definition and management and...
 
Rent remote desktop server mangohost .net
Rent remote desktop server mangohost .netRent remote desktop server mangohost .net
Rent remote desktop server mangohost .net
 
Study of international anticancer research trends.pdf
Study of international anticancer research trends.pdfStudy of international anticancer research trends.pdf
Study of international anticancer research trends.pdf
 
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In IndiaLordsexch ID: An Ultimate Online Cricket ID Provider In India
Lordsexch ID: An Ultimate Online Cricket ID Provider In India
 
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO CompanyMobile SEO India | Mobile SEO Service | Mobile SEO Company
Mobile SEO India | Mobile SEO Service | Mobile SEO Company
 
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdfTop 50 Telephone Conversation Sample Examples For IT Industries.pdf
Top 50 Telephone Conversation Sample Examples For IT Industries.pdf
 
My President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodieMy President is bulletproof t shirts hoodie
My President is bulletproof t shirts hoodie
 
Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...Career Development Advice for Network Engineers across the Pacific, presented...
Career Development Advice for Network Engineers across the Pacific, presented...
 
Network Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptxNetwork Security version1.0 - Module 3.pptx
Network Security version1.0 - Module 3.pptx
 
Do it again anti Republican shirt Do it again anti Republican shirt
Do it again anti Republican shirt Do it again anti Republican shirtDo it again anti Republican shirt Do it again anti Republican shirt
Do it again anti Republican shirt Do it again anti Republican shirt
 
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
SisAi World - Software is AI - Providing AI as Software - Protecting the Inte...
 

Map box styles in GeoServer and OpenLayers

  • 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] ] } }
  • 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)
  • 36. Discover, Learn, Collaborate, and Share With GIS Professionals connect.boundlessgeo.com Check out our booth #103