Information can be displayed in many ways tables, graphs, or paragraphs, but the perspective given by a map is hard to beat. Maps provide a great visualization of data that is quick to understand and easy to read.Previously setting up web maps by hand involved sending the data with difficulties of choosing data format and transporting large amount of data. Or setting up a web service to publish the data and creating your own web map requires knowledge of different technologies such as WMS, TMS, OpenLayers and Leaflet.We happy to present an alternative:We are going to demo the QGIS Web App Builder, and explore some of the underlying technologies behind this great feature.As a developer you can also use this declarative approach directly which will be the focus of our talk.We will explore modern web technology and components. Looking at how React (a declarative framework for defining javascript web components) and OpenLayers (popular GIS focused visualization library) can be used together.These are leveraged by a “web sdk” responsible for generating a web application from a simple description.We are excited to show you how building an interactive web map can be quick, easy and fun!

1. FOSS4G 2017 - Quick and easy web maps

2. 2
Introduction
William Nordmann
Software Engineer
wnordmann@boundlessgeo.com
@wnordmann
Professional Development
Javascript
Web Maps
Data management
Enterprise Management Dashboards
Open Source Projects
Boundless WebSDK
OpenLayers
Boundless
Boundless provides geospatial tools and
services for managing data and building
applications.
Personal Development
Game development
Raspberry Pi Development
Javascript

3. •A complete GIS platform that exists on the Desktop, Server, on Mobile
devices, and in the cloud
•Powered by proven open source components
•Commercially supported to ensure quality and ease-of-use
•Designed for modern infrastructures
3
The Premiere Open Source GIS Ecosystem

4. I have lots of spatial data
Want share it with the world
What if someone doesn’t have a GIS application
And no one want to download large files in strange
formats
Geospatial Data Problem

5. Solution
Everyone has a Web Browsers
Use a Web map to make the spatial data easy to read and enjoy

6. Web maps work on everyone’s modern computer or mobile
Web maps can be embedded and styled in existed web sites
The technology of the web is moving fast, new stuff all the time
Web Maps are awesome

7. Boundless Web SDK - Software Development Tool
We are in a Beta for 2.0, we will be ready Soon!
Web SDK was built to meet a need to generate easy Web Maps
SDK 1.0 focused on Web App Builder - QGIS Plugin
SDK 2.0 is more of an SDK for developers to use
https://github.com/boundlessgeo/sdk
Boundless Web SDK
is awesome

8. 8
Free and Open Source Software for Geospatial
•Open Source
•https://github.com/boundlessgeo/sdk
•Developed In Javascript ES6
•OpenLayers
•React
•Redux
•Webpack

9. Make Openlayers Quick and Easy
General Purpose Software Development Kit for web mapping
SDK is an engine to produce a web map from an Mapbox Style
Mapbox Style + Web SDK = Web Map
Goals of Boundless Web SDK

10. Free and Open Source Software for Geospatial
Easy Map Code

11. Free and Open Source Software for Geospatial
Easy Map Output

12. Free and Open Source Software for Geospatial
Easy Map Code
import - ES6 feature for modules
@boundlessgeo/sdk - npm scoped
package.

13. Free and Open Source Software for Geospatial
Easy Map Code
import - ES6 feature for modules
@boundlessgeo/sdk - npm scoped
package.

14. Free and Open Source Software for Geospatial
Easy Map Code
Open Street Map layer and source

15. Free and Open Source Software for Geospatial
Easy Map Code
geoJSON Layer

16. Free and Open Source Software for Geospatial
Easy Map Code
Some color styles
Null Island

17. Free and Open Source Software for Geospatial
Easy Map Code
Render the component
With a zoomSlider Prop

18. Free and Open Source Software for Geospatial
Easy Map Output
Zoom Slider
Open
Street
Map

19. Free and Open Source Software for Geospatial
Easy Map Output
Null Island
Color
Style

20. Mapbox style + SDK = Map
Web SDK

21. Mapbox style + SDK = Map
React + Redux = SDK
Web SDK

22. Mapbox style + SDK = Map
React + Redux = SDK
Map = Openlayers
Web SDK

23. Free and Open Source Software for Geospatial
Mapbox Style
Mapbox Style Specification
JSON document that defines the the visual
appearance of the map

24. Free and Open Source Software for Geospatial
Mapbox Style

25. Free and Open Source Software for Geospatial
Redux State
Predictable state container for javascript
Great development experience with live code editing
and time traveling debugging
Defining State of app with a basic JSON object, and
every change to the state produces a new JSON state

26. Free and Open Source Software for Geospatial
Redux State

27. Free and Open Source Software for Geospatial
Redux State

28. Free and Open Source Software for Geospatial
React
● Facebook developed
● Uses a shadow DOM
● React Component tracks a Redux state
● Only Component updates when state updates
● React components allow splitting the UI into
independent reusable pieces and each piece lives
in isolation.

29. Free and Open Source Software for Geospatial
React
● Facebook developed
● Uses a shadow DOM to see if a component has
changed and only rerenders the part of the page
that changed
● React Component tracks a Redux state, and
Component only updates when state updates.
● React components allow splitting the UI into
independent reusable pieces and each piece lives
in isolation.
● Uses ‘Props’ to pass data in Component

30. Free and Open Source Software for Geospatial
Easy Map Output
Zoom Slider

31. Free and Open Source Software for Geospatial
Examples

32. Free and Open Source Software for Geospatial
Examples
Now with Random Point!

33. Free and Open Source Software for Geospatial
WMS Examples
State Data and Popups

34. Free and Open Source Software for Geospatial
Popups Examples
Native Popup Support in SDK

35. Free and Open Source Software for Geospatial
Drawing Examples

36. Web SDK Examples
● Basic Example
● WMS Example
● Popup Example
● Feature Table Example
● Clustering Example
● Paint Change Example
● Sprites Example
● Drawing
● Legends
● Export Image
● Basic Example in EPSG:4326
● Rotating Map
● Layer List

37. Where are we today - Code, Code Examples
Where will we been soon - 2.0 release to NPM
Where will be be in a year - lots of Boundless products lots of users, much
more mature
https://github.com/boundlessgeo/sdk - clone the project today,
submit issues that you find.
Web SDK

38. Questions!
Join connect.boundlessgeo.com today!
Boundless Connect is the first step into the
world of possibilities that Boundless offers.