SlideShare a Scribd company logo
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

More Related Content

What's hot

State of GeoServer 2.10
State of GeoServer 2.10State of GeoServer 2.10
State of GeoServer 2.10
Jody Garnett
 
State of GeoServer 2.13
State of GeoServer 2.13State of GeoServer 2.13
State of GeoServer 2.13
Jody Garnett
 
GeoServer Orientation
GeoServer OrientationGeoServer Orientation
GeoServer Orientation
Jody Garnett
 
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
GeoSolutions
 
State of GeoServer
State of GeoServerState of GeoServer
State of GeoServer
Jody Garnett
 
Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...
GeoSolutions
 
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
 
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
Shaun Lewis
 
Vector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersVector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayers
Jody Garnett
 
Agi08 Jeremy Morley
Agi08 Jeremy MorleyAgi08 Jeremy Morley
Agi08 Jeremy Morley
Jeremy Morley
 
BIM/GIS Integration: A Practical Approach in Real Cases
BIM/GIS Integration: A Practical Approach in Real CasesBIM/GIS Integration: A Practical Approach in Real Cases
BIM/GIS Integration: A Practical Approach in Real Cases
SANGHEE SHIN
 
Fossgis 2013 GeoServer Presentation
Fossgis 2013 GeoServer PresentationFossgis 2013 GeoServer Presentation
Fossgis 2013 GeoServer Presentation
GeoSolutions
 
Geoserver introduction, GeoBusiness 2015
Geoserver introduction, GeoBusiness 2015Geoserver introduction, GeoBusiness 2015
Geoserver introduction, GeoBusiness 2015
GeoSolutions
 
OpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing BernOpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing Bern
Martin Christen
 
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL ServerUsing FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
Safe Software
 
Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...
GeoSolutions
 
mago3D - A Brand-New Live 3D Geo-Platform
mago3D - A Brand-New Live 3D Geo-Platform mago3D - A Brand-New Live 3D Geo-Platform
mago3D - A Brand-New Live 3D Geo-Platform
SANGHEE SHIN
 
Webilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe ProjectWebilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe Project
Martin Christen
 
Google Cloud platform: GKE with CI/CD using CircleCI and Flux
Google Cloud platform: GKE with CI/CD using CircleCI and FluxGoogle Cloud platform: GKE with CI/CD using CircleCI and Flux
Google Cloud platform: GKE with CI/CD using CircleCI and Flux
komaldevg
 
mago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open sourcemago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open source
SANGHEE SHIN
 

What's hot (20)

State of GeoServer 2.10
State of GeoServer 2.10State of GeoServer 2.10
State of GeoServer 2.10
 
State of GeoServer 2.13
State of GeoServer 2.13State of GeoServer 2.13
State of GeoServer 2.13
 
GeoServer Orientation
GeoServer OrientationGeoServer Orientation
GeoServer Orientation
 
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
MapStore Create, save and share maps and mashups @ GRASS-GFOSS 2013
 
State of GeoServer
State of GeoServerState of GeoServer
State of GeoServer
 
Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...
 
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...
 
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
Processing Landsat 8 Multi-Spectral Images with GRASS Tools & the potential o...
 
Vector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayersVector Tiles with GeoServer and OpenLayers
Vector Tiles with GeoServer and OpenLayers
 
Agi08 Jeremy Morley
Agi08 Jeremy MorleyAgi08 Jeremy Morley
Agi08 Jeremy Morley
 
BIM/GIS Integration: A Practical Approach in Real Cases
BIM/GIS Integration: A Practical Approach in Real CasesBIM/GIS Integration: A Practical Approach in Real Cases
BIM/GIS Integration: A Practical Approach in Real Cases
 
Fossgis 2013 GeoServer Presentation
Fossgis 2013 GeoServer PresentationFossgis 2013 GeoServer Presentation
Fossgis 2013 GeoServer Presentation
 
Geoserver introduction, GeoBusiness 2015
Geoserver introduction, GeoBusiness 2015Geoserver introduction, GeoBusiness 2015
Geoserver introduction, GeoBusiness 2015
 
OpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing BernOpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing Bern
 
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL ServerUsing FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
Using FME to move from AutoCAD Map 3D to MapGuide Enterprise with SQL Server
 
Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...Serving earth observation data with GeoServer: addressing real world requirem...
Serving earth observation data with GeoServer: addressing real world requirem...
 
mago3D - A Brand-New Live 3D Geo-Platform
mago3D - A Brand-New Live 3D Geo-Platform mago3D - A Brand-New Live 3D Geo-Platform
mago3D - A Brand-New Live 3D Geo-Platform
 
Webilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe ProjectWebilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe Project
 
Google Cloud platform: GKE with CI/CD using CircleCI and Flux
Google Cloud platform: GKE with CI/CD using CircleCI and FluxGoogle Cloud platform: GKE with CI/CD using CircleCI and Flux
Google Cloud platform: GKE with CI/CD using CircleCI and Flux
 
mago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open sourcemago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open source
 

Similar to Quick and easy web maps

Offline maps for mobile developers (Android/iOS)
Offline maps for mobile developers (Android/iOS)Offline maps for mobile developers (Android/iOS)
Offline maps for mobile developers (Android/iOS)
Vadim Nikolaev
 
OSGeo Live Lightening Overview
OSGeo Live Lightening OverviewOSGeo Live Lightening Overview
OSGeo Live Lightening Overview
Jody Garnett
 
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific ConferenceApps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
International Map Industry Association
 
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
Blue Raster
 
4. Digital Soil Mapping software tools
4. Digital Soil Mapping software tools4. Digital Soil Mapping software tools
4. Digital Soil Mapping software tools
ExternalEvents
 
Open Source GIS
Open Source GISOpen Source GIS
Open Source GIS
Joe Larson
 
Open Source GIS Workshop
Open Source GIS WorkshopOpen Source GIS Workshop
Open Source GIS Workshop
Jason Dalton
 
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev ToolsJefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
Jefferson Andrade
 
State of GeoServer - FOSS4G 2016
State of GeoServer - FOSS4G 2016State of GeoServer - FOSS4G 2016
State of GeoServer - FOSS4G 2016
GeoSolutions
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutter
rihannakedy
 
DSM software tools
DSM software toolsDSM software tools
DSM software tools
FAO
 
Android part1
Android part1Android part1
Android part1
Aman Agarwal
 
Jose l ugia 6 wunderkinder, momenta
Jose l ugia  6 wunderkinder, momentaJose l ugia  6 wunderkinder, momenta
Jose l ugia 6 wunderkinder, momenta
apps4allru
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Alexandre Morgaut
 
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D RoadmapUnite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unity Technologies
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
Manuel Carrasco Moñino
 
4. Digital Soil Mapping: Software and Tools
4. Digital Soil Mapping: Software and Tools4. Digital Soil Mapping: Software and Tools
4. Digital Soil Mapping: Software and Tools
FAO
 
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering LabVoxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
Ron Munitz
 
FreeCAD 3D CAD modeler
FreeCAD 3D CAD modelerFreeCAD 3D CAD modeler
FreeCAD 3D CAD modeler
officeonlinesystems
 
Geospatial Product Watch 2015
Geospatial Product Watch 2015Geospatial Product Watch 2015
Geospatial Product Watch 2015
Geospatial Media & Communications
 

Similar to Quick and easy web maps (20)

Offline maps for mobile developers (Android/iOS)
Offline maps for mobile developers (Android/iOS)Offline maps for mobile developers (Android/iOS)
Offline maps for mobile developers (Android/iOS)
 
OSGeo Live Lightening Overview
OSGeo Live Lightening OverviewOSGeo Live Lightening Overview
OSGeo Live Lightening Overview
 
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific ConferenceApps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
Apps & web solutions with OpenSource - Mani Singh - IMIA Asia Pacific Conference
 
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
AppStudio for ArcGIS: The Basics - Esri FedGIS 2016
 
4. Digital Soil Mapping software tools
4. Digital Soil Mapping software tools4. Digital Soil Mapping software tools
4. Digital Soil Mapping software tools
 
Open Source GIS
Open Source GISOpen Source GIS
Open Source GIS
 
Open Source GIS Workshop
Open Source GIS WorkshopOpen Source GIS Workshop
Open Source GIS Workshop
 
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev ToolsJefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools
 
State of GeoServer - FOSS4G 2016
State of GeoServer - FOSS4G 2016State of GeoServer - FOSS4G 2016
State of GeoServer - FOSS4G 2016
 
Getting started with flutter
Getting started with flutterGetting started with flutter
Getting started with flutter
 
DSM software tools
DSM software toolsDSM software tools
DSM software tools
 
Android part1
Android part1Android part1
Android part1
 
Jose l ugia 6 wunderkinder, momenta
Jose l ugia  6 wunderkinder, momentaJose l ugia  6 wunderkinder, momenta
Jose l ugia 6 wunderkinder, momenta
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
 
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D RoadmapUnite Los Angeles 2018 - Unity 2019 R&D Roadmap
Unite Los Angeles 2018 - Unity 2019 R&D Roadmap
 
Rapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWTRapid and Reliable Developing with HTML5 & GWT
Rapid and Reliable Developing with HTML5 & GWT
 
4. Digital Soil Mapping: Software and Tools
4. Digital Soil Mapping: Software and Tools4. Digital Soil Mapping: Software and Tools
4. Digital Soil Mapping: Software and Tools
 
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering LabVoxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
 
FreeCAD 3D CAD modeler
FreeCAD 3D CAD modelerFreeCAD 3D CAD modeler
FreeCAD 3D CAD modeler
 
Geospatial Product Watch 2015
Geospatial Product Watch 2015Geospatial Product Watch 2015
Geospatial Product Watch 2015
 

More from 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
 
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
 
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
 
Understanding the Flexibility of Open Source
Understanding the Flexibility of Open SourceUnderstanding the Flexibility of Open Source
Understanding the Flexibility of Open Source
Jody Garnett
 
Understanding Open Source
Understanding Open SourceUnderstanding Open Source
Understanding Open Source
Jody Garnett
 
Understanding Open Source
Understanding Open SourceUnderstanding Open Source
Understanding Open Source
Jody Garnett
 

More from Jody Garnett (20)

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
 
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
 
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
 
Understanding the Flexibility of Open Source
Understanding the Flexibility of Open SourceUnderstanding the Flexibility of Open Source
Understanding the Flexibility of Open Source
 
Understanding Open Source
Understanding Open SourceUnderstanding Open Source
Understanding Open Source
 
Understanding Open Source
Understanding Open SourceUnderstanding Open Source
Understanding Open Source
 

Recently uploaded

🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
bahubalikumar09988
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
Task Tracker
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
dream girl
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
ThousandEyes
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
bhumivarma35300
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
Nextskill Technologies
 
Il Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazioneIl Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazione
confluent
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
singhlata50dh
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
45unexpected
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
rachitkumar09887
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
aadhiyaeliza
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
jhkdigitalmarketing
 
To Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance SheetsTo Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance Sheets
Task Tracker
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
kiara pandey
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
aslasdfmkhan4750
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
OnePlan Solutions
 
Introduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of ThingsIntroduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of Things
NachuSubramanian1
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
jealousviolet
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
simran hot girls
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
confluent
 

Recently uploaded (20)

🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...🚂🚘 Premium Girls Call Ranchi  🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
🚂🚘 Premium Girls Call Ranchi 🛵🚡000XX00000 💃 Choose Best And Top Girl Service...
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
 
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
Russian Girls Call Mumbai 🛵🚡9833363713 💃 Choose Best And Top Girl Service And...
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
 
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
Independent Girls call Service Pune 000XX00000 Provide Best And Top Girl Serv...
 
ERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in CoimbatoreERP Software Solutions Provider in Coimbatore
ERP Software Solutions Provider in Coimbatore
 
Il Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazioneIl Data Streaming per un’AI real-time di nuova generazione
Il Data Streaming per un’AI real-time di nuova generazione
 
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
High Girls Call Chennai 000XX00000 Provide Best And Top Girl Service And No1 ...
 
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Servic...
 
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
Agra Girls Call Agra 0X0000000X Unlimited Short Providing Girls Service Avail...
 
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDSAmadeus Travel API, Amadeus Booking API, Amadeus GDS
Amadeus Travel API, Amadeus Booking API, Amadeus GDS
 
Odoo E-commerce website development guides
Odoo E-commerce website development guidesOdoo E-commerce website development guides
Odoo E-commerce website development guides
 
To Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance SheetsTo Avoid Mistakes When Using Online Attendance Sheets
To Avoid Mistakes When Using Online Attendance Sheets
 
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
Celebrity Girls Call Mumbai 9930687706 Unlimited Short Providing Girls Servic...
 
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
Independent Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class H...
 
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
Maximizing Efficiency and Profitability: Optimizing Data Systems, Enhancing C...
 
Introduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of ThingsIntroduction to Cloud computing for Internet of Things
Introduction to Cloud computing for Internet of Things
 
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
VVIP Girls Call Mumbai 9910780858 Provide Best And Top Girl Service And No1 i...
 
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9967584737 Provide Best And Top Girl Service And No1 in...
 
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
Unleashing the Future: Building a Scalable and Up-to-Date GenAI Chatbot with ...
 

Quick and easy web maps

  • 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.