MapStore 2 is an overhaul of the existing MapStore with the goal of creating a webmapping framework which is more lightweight but still modular and easy to work with. It can leverage both OpenLayers 3 or Leaflet as the mapping engine and uses ReactJS and Redux as the core JavaScript libraries. Moreover a 3D viewer based on CesiumJS is available. MapStore 2 is both a framework and a standalone application. You can use it as a framework to develop your custom WebGis application composing MapStore ReactJS components and components from other libraries (like React Bootstrap), choosing the best mapping library for your purposes. You can also use the MapStore2 application directly, to create, save, and share in a simple and intuitive way maps and mashups created by selecting content from the server such as Google Maps, OpenStreetMap or WMS and WMTS. The MapStore 2 application consists of two main components MapManager and GeoStore, respectively front-end and back-end. MapManager allows through a unique interface to create, modify, delete and search on maps definition as well as generate a univoque link to embed a map in an external website, share your own maps with the others. GeoStore implements a flexible Java Enterprise infrastructure to manage and search maps with proper management of authentication and authorization. The presentation will give the audience an extensive overview of the MapStore 2 functionalities for the creation of mapping portals. Eventually, a range of GeoSolutions case studies of MapStore 2 will be presented.

1. MapStore 2
Modern mashups with OL3, Leaflet and 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 MapStore2?
 Mapping with MapStore2
 Building a WebGIS
 Bells and whistles (Demo time!)
 The future (our RoadMap)

4. What is MapStore2?

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

6. What is MapStore2?
It’s a Framework
Use it in a Lego-like way

7. What is MapStore2?
It’s a Framework
You can build many different applications
with it

8. What is MapStore2?
It’s a Framework
And some more

9. What is MapStore2?
It’s a Framework
And many more

10. What is MapStore2?
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 C.V.!

11. What is MapStore2?
It is also a Product
Use it in an IKEA-like way

12. What is MapStore2?
It is also a Product
Use the available plugins to build your UI

13. What is MapStore2?
It is also a Product
Customize it a little bit

14. What is MapStore2?
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 need to improve this)
• …and ask on the mailing list when in doubt

15. Mapping with MapStore2

16. Mapping with MapStore2
MapStore2 is mapping agnostic

17. Mapping with MapStore2
MapStore2 is mapping agnostic

18. Mapping with MapStore2
MapStore2 is mapping agnostic

19. Mapping with MapStore2
MapStore2 is mapping agnostic
Thanks ReactJS!

20. Mapping with MapStore2
MapStore2 is mapping agnostic
Thanks ReactJS!

21. Building a WebGIS

22. Building a WebGIS
MapStore 2 is pluggable

23. Building a WebGIS
MapStore 2 is pluggable

24. Building a WebGIS
MapStore 2 is pluggable

25. Building a WebGIS
MapStore 2 is pluggable

26. Building a WebGIS
MapStore 2 is pluggable

27. Building a WebGIS
MapStore 2 is customizable

28. Building a WebGIS
MapStore 2 is customizable

29. Building a WebGIS
MapStore 2 is customizable

30. Building a WebGIS
MapStore 2 is customizable

31. Building a WebGIS
MapStore 2 is customizable

32. Building a WebGIS
MapStore 2 is customizable
JSX
Template
XML
JSON

33. Building a WebGIS
MapStore 2 is Responsive

34. Building a WebGIS
The L&F has been done with care
Check it live at http://lf.mapstore2.geo-solutions.it/samples

35. Building a WebGIS
The L&F has been done with care
Check it live at http://lf.mapstore2.geo-solutions.it/samples

36. Building a WebGIS
The L&F has been done with care
Check it live at http://lf.mapstore2.geo-solutions.it/samples

37. Building a WebGIS
MapStore 2 is more than just mapping

38. Building a WebGIS
MapStore 2 is more than just mapping

39. Building a WebGIS
MapStore 2 is more than just mapping

40. Building a WebGIS
MapStore 2 is more than just mapping

41. Building a WebGIS
MapStore 2 is more than just mapping

42. Building a WebGIS
MapStore 2 is more than just mapping

43. Building a WebGIS
MapStore 2 is more than just mapping

44. Building a WebGIS
MapStore 2 is more than just mapping

45. Building a WebGIS
MapStore 2 is more than just mapping

46. Building a WebGIS
MapStore 2 is more than just mapping

47. Building a WebGIS
MapStore 2 is more than just mapping

48. Building a WebGIS
MapStore 2 is more than just mapping

49. Building a WebGIS
Easy map publishing

50. Building a WebGIS
Easy map publishing

51. Building a WebGIS
Easy map publishing

52. Building a WebGIS
Easy map publishing

53. Building a WebGIS
Easy map publishing

54. Building a WebGIS
Easy map publishing

55. Demo Time

56. Bells and whistles
 ReactJS
 Declarative Programming
 Components and Composition
 Configuration and Styling
 Redux
 Predictable State
 Serializable State
 Redux-observable - RxJS
 Reactive Workflows
 Epics

57. Bells and whistles

58. Bells and whistles
 MapStore2
 Plugins infrastructure
 Mapping components and state handling
 Themes (with Less)

59. Recent Work

60. Better 3D integration

61. New Background Selector

62. JS API for embedded maps

63. Support for dimensions in WMS

64. Better support for themes
Using Bootstrap and Less

65. Documentation Site

66. Downstream Products

67. Neftex WebMapper

68. CSI Piemonte SIRA

69. CSI Piemonte SIRA

70. CSI Piemonte SIRA

71. CSI Piemonte SIRA

72. Idaho Local Highway Technical Assistance Council

73. Idaho Local Highway Technical Assistance Council

74. Idaho Local Highway Technical Assistance Council

75. Idaho Local Highway Technical Assistance Council

76. NPA Terrain Explorer

77. NPA Terrain Explorer

78. NPA Terrain Explorer

79. NPA Terrain Explorer

80. SourcePole QWC2

81. Roadmap

82. MapStore2 future
Feature Editing (geometry and attributes)

83. MapStore2 future
Renewed Catalog

84. MapStore2 future
 More documentation
 More examples
 MapStore2 in the cloud
 More plugins and components
 More… what? Come to our desk
and tell us your opinion!

85. Resources
 MapStore2 documentation
https://dev.mapstore2.geo-solutions.it/mapstore/docs/
 Developing in MapStore 2
https://docs.google.com/presentation/d/13eCrCdOBiorICPM1MTfsPP8QV9xMsFS2bR
REb4QHCJ0/edit?usp=sharingMore
 Introduction to RxJS and redux-
observable
https://docs.google.com/presentation/d/1Ts-
yZGc12VMr9oG8xMqwptUmMjdsKI2uZh4Mr5shYhA/edit?usp=sharing

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