Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mapstore - Modern Webmapping

Mapstore - Modern Webmapping

This presentation provides an introduction to MapStore covering the work done so far, with a special focus on the latest features, as well as on the work in progress.

Simone Giannecchini

August 01, 2019

More Decks by Simone Giannecchini

Other Decks in Technology


  1. MapStore Modern webmapping with React Ing. Mauro Bartolomeoli Dott. Lorenzo

    Natali GeoSolutions
  2. GeoSolutions ⚫ Founded in Italy in late 2006 ⚫ Expertise

    • Image Processing, GeoSpatial Data Fusion • Java, Java Enterprise, C++, Python • JPEG2000, JPIP, Advanced 2D visualization ⚫ Supporting/Developing FOSS4G projects ⚫ GeoServer, MapStore ⚫ GeoNetwork, GeoNode, Ckan ⚫ Clients ⚫ Public Agencies ⚫ Private Companies ⚫ http://www.geo-solutions.it
  3. Contents ⚫ What is MapStore? ⚫ What did we do

    last year? ⚫ Where is MapStore going?
  4. What is MapStore?

  5. What is MapStore? MapStore https://mapstore.geo-solutions.it/mapstore/

  6. What is MapStore? It’s a Framework You can build many

    different applications with its plugins (and by developing your own)
  7. What is MapStore? It’s a Framework So you need to

    be a developer to use it this way …and need some basic knowledge ES2015 ReactJS Redux RxJS Less / CSS …or ask «someone» to build the application for you If you are familliar with all of this technologies you can also send us your resume!
  8. What is MapStore? It is also a Product Use it

    as is or slightly modifying the look&feel
  9. What is MapStore? It is also a Product So you

    DON’T need to be a developer to use it this way …just edit some configuration …and basic css …using the documentation (we are improving this) …and ask on the mailing list when in doubt
  10. What did we do last year?

  11. Recent Improvements ⚫ Dimensions handling ⚫ Time ⚫ Elevation ⚫

    Projections Selector ⚫ Annotations ⚫ No Stress Services Integration
  12. Recent Improvements ⚫ GeoNode Integration ⚫ Styler ⚫ Templates ⚫

    CSS / SLD Editor ⚫ Widgets Tray ⚫ New Documentation WebSite
  13. Elevation Dimension • Connect to WMS layers that have Elevation

    dimension • Automatically recognized, panel in the Layers Settings • DTM for MousePosition and CesiumJS (useForElevation) • You need GeoServer DDS plugin
  14. Time Dimension • Connect to WMS layers that have Time

    dimension • Needs WMTS-Multidim GeoServer plugin • Automatically recognized, a TimeLine tool appears over the map
  15. Time Dimension • Move into the timeline of your data

    and play animations
  16. Projection Selector • What if the world is flat? https://theflatearthsociety.org/home/

  17. Projection Selector • Unrfotunately I don’t believe it is… •

    But usually (unless we do 3D) a map IS flat • So we have to deal with projections
  18. Projection Selector • And this is not the easiest thing

    in the world • A lot of projections exist, with many variants and a lot of weird things can happen using some of them
  19. Projection Selector • We have libraries for the frontend (e.g.

    proj4js and OpenLayers) that can work with them • We have backend services that handle them (e.g. GeoServer) • But… prepare for some pain
  20. Projection Selector • Add your preferred projection(s) (with caution!) "projectionDefs":

    [{ "code": "EPSG:54029", "def": "+proj=vandg +lon_0=0 +x_0=0 +y_0=0 +R_A +ellps=WGS84 +datum=WGS84 +units=m no_defs", "extent": [ -20003999.8508586, -20003989.8508586, 20003989.8508586, 20003990.8508586 ], "worldExtent": [ -179.99999, -89.99999, 179.9999, 89.99999 ] }]
  21. Projection Selector • Enable them in your plugins { "name":

    "CRSSelector", "cfg": { "additionalCRS": { "EPSG:54029": { "label": "Van Der Grinten I" } }, "filterAllowedCRS": [ "EPSG:4326", "EPSG:3857", "EPSG:54029" ], "allowedRoles": ["ALL"] … } }
  22. Projection Selector • Enable them in your plugins { "name":

    "MousePosition", "cfg": { … "filterAllowedCRS": ["EPSG:4326", "EPSG:3857", "EPSG:54029"], "additionalCRS": { "EPSG:54009": { "label": "Van Der Grinten I" } } } }
  23. MapAnnotations • Draw and save points, lines, polygons, circles and

    text on your maps
  24. StyleEditor • Switch between the different layers styles

  25. StyleEditor • Enable style editing in localConfig.json (only for ADMINs)

    • Or (for everybody) { "name": "StyleEditor", "cfg": { "editingAllowedRoles": ["ADMIN"] } } { "name": "StyleEditor", "cfg": { "editingAllowedRoles": null } }
  26. StyleEditor • Create new styles or edit existing ones

  27. StyleEditor • Choose a sample style to start from and

    immediately apply it
  28. StyleEditor • Edit the style using a smart editor •

    Syntax highlighting • Support for SLD and CSS
  29. StyleEditor • Edit the style using a smart editor •

    Helper tools (e.g. color picker) • Autocomplete and validation
  30. StyleEditor • Requirements: • User needs FULL access to GeoServer

    REST services • Properly configured CORS in GeoServer
  31. Widgets Tray • Minimize the widgets when not needed

  32. Layer Filters • Persisted with layer configuration • Used by

    every tool
  33. GeoNode Integration – from 2.10

  34. GeoNode Integration - Layer & Map Preview Layer and Map

    previews provide navigation tools and give access to advanced functionalities
  35. GeoNode Integration - Info and Print Get information from layers

    and print the previewed map inside the Map Viewer of MapStore
  36. GeoNode Integration - Edit Data Attribute table give to users

    the access of each feature of a layer and provides a set of tools to edit, filter, query and draw data
  37. GeoNode Integration - Time Slider Navigate in the time dimension

    with the Time Slider
  38. GeoNode Integration - Style Editor Select, edit and create styles

    in SLD or GeoCSS
  39. GeoNode Integration - Charts and Widgets Create charts, tables, counters

    and text widgets to add them on the map
  40. GeoNode Integration - Map Viewer Create and edit maps inside

    the Map Viewer. Add new layers with the Catalog tool
  41. No Stress Integration "proxyUrl": { "url": "proxy/?url=", "autoDetectCORS": true }

    • Connect to external servers seamlessly • Automatically uses a proxy when needed • Use with care, still experimental
  42. Documentation • Using Read the Docs • https://mapstore.readthedocs.io/en/latest/

  43. Future

  44. Time and Elevation • TimeSlider should work also without the

    WMTS-MultiDim extension, using WMS Capabilities info (like we do for elevation) • More integrated Elevation and Time handling tools (now they are accessible in different places) • Elevation profiles
  45. StyleEditor • Visual Editor

  46. Vector Tiles • Sources • WMS • WMTS • WFS3

    • Formats • MapBox MVT • GeoJSON • TopoJSON • Styling • SLD • CSS • MapBox styles
  47. GeoStory like storymaps but better Q12020

  48. Others • Projections • Bug fixing and extended support in

    the various plugins • CORS Automatic Detection • Improve CORS error detection (not easy!)
  49. Resources ⚫ MapStore documentation https://mapstore.readthedocs.io/en/latest/ ⚫ Developing in MapStore https://docs.google.com/presentation/d/13eCrCdOBiorICPM1MTfsPP8QV9xMsFS2bR

    REb4QHCJ0/edit?usp=sharingMore ⚫ Use ReactJS, Redux and RxJS documentation too
  50. That’s all folks! Questions? [email protected]