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.

MapStore 2, modern mashups with OL3, Leaflet and React

9,169 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MapStore 2, modern mashups with OL3, Leaflet and React

  1. 1. MapStore 2 Modern mashups with OL3, Leaflet and React Ing. Mauro Bartolomeoli Dott. Lorenzo Natali GeoSolutions
  2. 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. 3. Contents  What is MapStore2?  Mapping with MapStore2  Building a WebGIS  Bells and whistles (Demo time!)  The future (our RoadMap)
  4. 4. What is MapStore2?
  5. 5. What is MapStore2? MapStore2 https://mapstore2.geo-solutions.it/mapstore/
  6. 6. What is MapStore2? It’s a Framework Use it in a Lego-like way
  7. 7. What is MapStore2? It’s a Framework You can build many different applications with it
  8. 8. What is MapStore2? It’s a Framework And some more
  9. 9. What is MapStore2? It’s a Framework And many more
  10. 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. 11. What is MapStore2? It is also a Product Use it in an IKEA-like way
  12. 12. What is MapStore2? It is also a Product Use the available plugins to build your UI
  13. 13. What is MapStore2? It is also a Product Customize it a little bit
  14. 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. 15. Mapping with MapStore2
  16. 16. Mapping with MapStore2 MapStore2 is mapping agnostic
  17. 17. Mapping with MapStore2 MapStore2 is mapping agnostic
  18. 18. Mapping with MapStore2 MapStore2 is mapping agnostic
  19. 19. Mapping with MapStore2 MapStore2 is mapping agnostic Thanks ReactJS!
  20. 20. Mapping with MapStore2 MapStore2 is mapping agnostic Thanks ReactJS!
  21. 21. Building a WebGIS
  22. 22. Building a WebGIS MapStore 2 is pluggable
  23. 23. Building a WebGIS MapStore 2 is pluggable
  24. 24. Building a WebGIS MapStore 2 is pluggable
  25. 25. Building a WebGIS MapStore 2 is pluggable
  26. 26. Building a WebGIS MapStore 2 is pluggable
  27. 27. Building a WebGIS MapStore 2 is customizable
  28. 28. Building a WebGIS MapStore 2 is customizable
  29. 29. Building a WebGIS MapStore 2 is customizable
  30. 30. Building a WebGIS MapStore 2 is customizable
  31. 31. Building a WebGIS MapStore 2 is customizable
  32. 32. Building a WebGIS MapStore 2 is customizable JSX Template XML JSON
  33. 33. Building a WebGIS MapStore 2 is Responsive
  34. 34. Building a WebGIS The L&F has been done with care Check it live at http://lf.mapstore2.geo-solutions.it/samples
  35. 35. Building a WebGIS The L&F has been done with care Check it live at http://lf.mapstore2.geo-solutions.it/samples
  36. 36. Building a WebGIS The L&F has been done with care Check it live at http://lf.mapstore2.geo-solutions.it/samples
  37. 37. Building a WebGIS MapStore 2 is more than just mapping
  38. 38. Building a WebGIS MapStore 2 is more than just mapping
  39. 39. Building a WebGIS MapStore 2 is more than just mapping
  40. 40. Building a WebGIS MapStore 2 is more than just mapping
  41. 41. Building a WebGIS MapStore 2 is more than just mapping
  42. 42. Building a WebGIS MapStore 2 is more than just mapping
  43. 43. Building a WebGIS MapStore 2 is more than just mapping
  44. 44. Building a WebGIS MapStore 2 is more than just mapping
  45. 45. Building a WebGIS MapStore 2 is more than just mapping
  46. 46. Building a WebGIS MapStore 2 is more than just mapping
  47. 47. Building a WebGIS MapStore 2 is more than just mapping
  48. 48. Building a WebGIS MapStore 2 is more than just mapping
  49. 49. Building a WebGIS Easy map publishing
  50. 50. Building a WebGIS Easy map publishing
  51. 51. Building a WebGIS Easy map publishing
  52. 52. Building a WebGIS Easy map publishing
  53. 53. Building a WebGIS Easy map publishing
  54. 54. Building a WebGIS Easy map publishing
  55. 55. Demo Time
  56. 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. 57. Bells and whistles
  58. 58. Bells and whistles  MapStore2  Plugins infrastructure  Mapping components and state handling  Themes (with Less)
  59. 59. Recent Work
  60. 60. Better 3D integration
  61. 61. New Background Selector
  62. 62. JS API for embedded maps
  63. 63. Support for dimensions in WMS
  64. 64. Better support for themes Using Bootstrap and Less
  65. 65. Documentation Site
  66. 66. Downstream Products
  67. 67. Neftex WebMapper
  68. 68. CSI Piemonte SIRA
  69. 69. CSI Piemonte SIRA
  70. 70. CSI Piemonte SIRA
  71. 71. CSI Piemonte SIRA
  72. 72. Idaho Local Highway Technical Assistance Council
  73. 73. Idaho Local Highway Technical Assistance Council
  74. 74. Idaho Local Highway Technical Assistance Council
  75. 75. Idaho Local Highway Technical Assistance Council
  76. 76. NPA Terrain Explorer
  77. 77. NPA Terrain Explorer
  78. 78. NPA Terrain Explorer
  79. 79. NPA Terrain Explorer
  80. 80. SourcePole QWC2
  81. 81. Roadmap
  82. 82. MapStore2 future Feature Editing (geometry and attributes)
  83. 83. MapStore2 future Renewed Catalog
  84. 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. 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. 86. That’s all folks! Questions? info@geo-solutions.it

×