KEMBAR78
Quick and easy web maps | PDF
FOSS4G 2017 - Quick and easy web maps
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
•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
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
Solution
Everyone has a Web Browsers
Use a Web map to make the spatial data easy to read and enjoy
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
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
Free and Open Source Software for Geospatial
•Open Source
•https://github.com/boundlessgeo/sdk
•Developed In Javascript ES6
•OpenLayers
•React
•Redux
•Webpack
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
Free and Open Source Software for Geospatial
Easy Map Code
Free and Open Source Software for Geospatial
Easy Map Output
Free and Open Source Software for Geospatial
Easy Map Code
import - ES6 feature for modules
@boundlessgeo/sdk - npm scoped
package.
Free and Open Source Software for Geospatial
Easy Map Code
import - ES6 feature for modules
@boundlessgeo/sdk - npm scoped
package.
Free and Open Source Software for Geospatial
Easy Map Code
Open Street Map layer and source
Free and Open Source Software for Geospatial
Easy Map Code
geoJSON Layer
Free and Open Source Software for Geospatial
Easy Map Code
Some color styles
Null Island
Free and Open Source Software for Geospatial
Easy Map Code
Render the component
With a zoomSlider Prop
Free and Open Source Software for Geospatial
Easy Map Output
Zoom Slider
Open
Street
Map
Free and Open Source Software for Geospatial
Easy Map Output
Null Island
Color
Style
Mapbox style + SDK = Map
Web SDK
Mapbox style + SDK = Map
React + Redux = SDK
Web SDK
Mapbox style + SDK = Map
React + Redux = SDK
Map = Openlayers
Web SDK
Free and Open Source Software for Geospatial
Mapbox Style
Mapbox Style Specification
JSON document that defines the the visual
appearance of the map
Free and Open Source Software for Geospatial
Mapbox Style
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
Free and Open Source Software for Geospatial
Redux State
Free and Open Source Software for Geospatial
Redux State
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.
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
Free and Open Source Software for Geospatial
Easy Map Output
Zoom Slider
Free and Open Source Software for Geospatial
Examples
Free and Open Source Software for Geospatial
Examples
Now with Random Point!
Free and Open Source Software for Geospatial
WMS Examples
State Data and Popups
Free and Open Source Software for Geospatial
Popups Examples
Native Popup Support in SDK
Free and Open Source Software for Geospatial
Drawing Examples
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
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
Questions!
Join connect.boundlessgeo.com today!
Boundless Connect is the first step into the
world of possibilities that Boundless offers.
Quick and easy web maps

Quick and easy web maps

  • 1.
    FOSS4G 2017 -Quick and easy web maps
  • 2.
    2 Introduction William Nordmann Software Engineer wnordmann@boundlessgeo.com @wnordmann ProfessionalDevelopment 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 GISplatform 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 lotsof 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 aWeb Browsers Use a Web map to make the spatial data easy to read and enjoy
  • 6.
    Web maps workon 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 OpenSource Software for Geospatial •Open Source •https://github.com/boundlessgeo/sdk •Developed In Javascript ES6 •OpenLayers •React •Redux •Webpack
  • 9.
    Make Openlayers Quickand 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 OpenSource Software for Geospatial Easy Map Code
  • 11.
    Free and OpenSource Software for Geospatial Easy Map Output
  • 12.
    Free and OpenSource Software for Geospatial Easy Map Code import - ES6 feature for modules @boundlessgeo/sdk - npm scoped package.
  • 13.
    Free and OpenSource Software for Geospatial Easy Map Code import - ES6 feature for modules @boundlessgeo/sdk - npm scoped package.
  • 14.
    Free and OpenSource Software for Geospatial Easy Map Code Open Street Map layer and source
  • 15.
    Free and OpenSource Software for Geospatial Easy Map Code geoJSON Layer
  • 16.
    Free and OpenSource Software for Geospatial Easy Map Code Some color styles Null Island
  • 17.
    Free and OpenSource Software for Geospatial Easy Map Code Render the component With a zoomSlider Prop
  • 18.
    Free and OpenSource Software for Geospatial Easy Map Output Zoom Slider Open Street Map
  • 19.
    Free and OpenSource 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 OpenSource Software for Geospatial Mapbox Style Mapbox Style Specification JSON document that defines the the visual appearance of the map
  • 24.
    Free and OpenSource Software for Geospatial Mapbox Style
  • 25.
    Free and OpenSource 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 OpenSource Software for Geospatial Redux State
  • 27.
    Free and OpenSource Software for Geospatial Redux State
  • 28.
    Free and OpenSource 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 OpenSource 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 OpenSource Software for Geospatial Easy Map Output Zoom Slider
  • 31.
    Free and OpenSource Software for Geospatial Examples
  • 32.
    Free and OpenSource Software for Geospatial Examples Now with Random Point!
  • 33.
    Free and OpenSource Software for Geospatial WMS Examples State Data and Popups
  • 34.
    Free and OpenSource Software for Geospatial Popups Examples Native Popup Support in SDK
  • 35.
    Free and OpenSource 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 wetoday - 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! BoundlessConnect is the first step into the world of possibilities that Boundless offers.