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.

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? info@geo-solutions.it