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.

Transcript

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

   View Slide

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
   

   View Slide

3. Contents
   ⚫
   What is MapStore?
   ⚫
   What did we do last year?
   ⚫
   Where is MapStore going?
   

   View Slide

4. What is MapStore?
   

   View Slide

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

   View Slide

6. What is MapStore?
   It’s a Framework
   You can build many different applications
   with its plugins (and by developing your own)
   

   View Slide

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!
   

   View Slide

8. What is MapStore?
   It is also a Product
   Use it as is or slightly modifying the look&feel
   

   View Slide

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
   

   View Slide

10. What did we do last year?
    

    View Slide

11. Recent Improvements
    ⚫
    Dimensions handling
    ⚫
    Time
    ⚫
    Elevation
    ⚫
    Projections Selector
    ⚫
    Annotations
    ⚫
    No Stress Services Integration
    

    View Slide

12. Recent Improvements
    ⚫
    GeoNode Integration
    ⚫
    Styler
    ⚫
    Templates
    ⚫
    CSS / SLD Editor
    ⚫
    Widgets Tray
    ⚫
    New Documentation WebSite
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Time Dimension
    • Move into the timeline of your data and play animations
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    ]
    }]
    

    View Slide

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"]
    …
    }
    }
    

    View Slide

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"
    }
    }
    }
    }
    

    View Slide

23. MapAnnotations
    • Draw and save points, lines, polygons, circles and text on
    your maps
    

    View Slide

24. StyleEditor
    • Switch between the different layers styles
    

    View Slide

25. StyleEditor
    • Enable style editing in localConfig.json (only for ADMINs)
    • Or (for everybody)
    {
    "name": "StyleEditor",
    "cfg": {
    "editingAllowedRoles": ["ADMIN"]
    }
    }
    {
    "name": "StyleEditor",
    "cfg": {
    "editingAllowedRoles": null
    }
    }
    

    View Slide

26. StyleEditor
    • Create new styles or edit existing ones
    

    View Slide

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

    View Slide

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

    View Slide

29. StyleEditor
    • Edit the style using a smart editor
    • Helper tools (e.g. color picker)
    • Autocomplete and validation
    

    View Slide

30. StyleEditor
    • Requirements:
    • User needs FULL access to GeoServer REST services
    • Properly configured CORS in GeoServer
    

    View Slide

31. Widgets Tray
    • Minimize the widgets when not needed
    

    View Slide

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

    View Slide

33. GeoNode Integration – from 2.10
    

    View Slide

34. GeoNode Integration - Layer & Map
    Preview
    Layer and Map previews provide navigation
    tools and give access to advanced
    functionalities
    

    View Slide

35. GeoNode Integration - Info and Print
    Get information from layers and print the
    previewed map inside the Map Viewer of
    MapStore
    

    View Slide

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
    

    View Slide

37. GeoNode Integration - Time Slider
    Navigate in the time dimension with the Time
    Slider
    

    View Slide

38. GeoNode Integration - Style Editor
    Select, edit and create styles in SLD or
    GeoCSS
    

    View Slide

39. GeoNode Integration - Charts and
    Widgets
    Create charts, tables, counters and text
    widgets to add them on the map
    

    View Slide

40. GeoNode Integration - Map Viewer
    Create and edit maps inside the Map Viewer.
    Add new layers with the Catalog tool
    

    View Slide

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
    

    View Slide

42. Documentation
    • Using Read the Docs
    • https://mapstore.readthedocs.io/en/latest/
    

    View Slide

43. Future
    

    View Slide

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
    

    View Slide

45. StyleEditor
    • Visual Editor
    

    View Slide

46. Vector Tiles
    • Sources
    • WMS
    • WMTS
    • WFS3
    • Formats
    • MapBox MVT
    • GeoJSON
    • TopoJSON
    • Styling
    • SLD
    • CSS
    • MapBox styles
    

    View Slide

47. GeoStory
    like storymaps but better
    Q12020
    

    View Slide

48. Others
    • Projections
    • Bug fixing and extended support in the various
    plugins
    • CORS Automatic Detection
    • Improve CORS error detection (not easy!)
    

    View Slide

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
    

    View Slide

50. That’s all folks!
    Questions?
    info@geo-solutions.it
    

    View Slide