Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quick and easy web maps

559 views

Published on

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!

Published in: Software
  • Be the first to like this

Quick and easy web maps

  1. 1. FOSS4G 2017 - Quick and easy web maps
  2. 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. 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. 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. 5. Solution Everyone has a Web Browsers Use a Web map to make the spatial data easy to read and enjoy
  6. 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. 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. 8 Free and Open Source Software for Geospatial •Open Source •https://github.com/boundlessgeo/sdk •Developed In Javascript ES6 •OpenLayers •React •Redux •Webpack
  9. 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. 10. Free and Open Source Software for Geospatial Easy Map Code
  11. 11. Free and Open Source Software for Geospatial Easy Map Output
  12. 12. Free and Open Source Software for Geospatial Easy Map Code import - ES6 feature for modules @boundlessgeo/sdk - npm scoped package.
  13. 13. Free and Open Source Software for Geospatial Easy Map Code import - ES6 feature for modules @boundlessgeo/sdk - npm scoped package.
  14. 14. Free and Open Source Software for Geospatial Easy Map Code Open Street Map layer and source
  15. 15. Free and Open Source Software for Geospatial Easy Map Code geoJSON Layer
  16. 16. Free and Open Source Software for Geospatial Easy Map Code Some color styles Null Island
  17. 17. Free and Open Source Software for Geospatial Easy Map Code Render the component With a zoomSlider Prop
  18. 18. Free and Open Source Software for Geospatial Easy Map Output Zoom Slider Open Street Map
  19. 19. Free and Open Source Software for Geospatial Easy Map Output Null Island Color Style
  20. 20. Mapbox style + SDK = Map Web SDK
  21. 21. Mapbox style + SDK = Map React + Redux = SDK Web SDK
  22. 22. Mapbox style + SDK = Map React + Redux = SDK Map = Openlayers Web SDK
  23. 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. 24. Free and Open Source Software for Geospatial Mapbox Style
  25. 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. 26. Free and Open Source Software for Geospatial Redux State
  27. 27. Free and Open Source Software for Geospatial Redux State
  28. 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. 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. 30. Free and Open Source Software for Geospatial Easy Map Output Zoom Slider
  31. 31. Free and Open Source Software for Geospatial Examples
  32. 32. Free and Open Source Software for Geospatial Examples Now with Random Point!
  33. 33. Free and Open Source Software for Geospatial WMS Examples State Data and Popups
  34. 34. Free and Open Source Software for Geospatial Popups Examples Native Popup Support in SDK
  35. 35. Free and Open Source Software for Geospatial Drawing Examples
  36. 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. 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. 38. Questions! Join connect.boundlessgeo.com today! Boundless Connect is the first step into the world of possibilities that Boundless offers.

×