MapStore 2, modern mashups with OL3, Leaflet and React
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Bartolomeoli, Mauro (GeoSolutions Sas)
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.
 Yeah. Hi everybody. Welcome to the first session in the tunnel of the forceful G 2016. We have three excellent talks provided for you. And we will quickly start with the first one by Mauro. And he will introduce himself. So have fun. Thank you, Mark. My name is Mauro Bartolomeoli. Very difficult to spell and tell. So just call me Mauro if you need it. You can also call me Mauro as many English people are used to spell my name. I work for Geosolution. This is a company based in Italy. And we developed many GIS based solutions, open source ones, mainly. Today we are going to talk about one of these solutions aimed at WebGIS developing that is called MapStore 2. From the name you can spot that this is not the first release of this product. The two suggest that there was a MapStore 1 in the past. Basically one year ago MapStore 1 became so old that we couldn't improve it and evolving it anymore. And so we decided to do a complete right of the software. The previous version was based on XJS and Oble.js 2. The new one is based on a completely new set of technologies. You can see it from the title. You can spot Oble.js 3, leaflet, and basically React.js that is the real new part of the product. So Geosolutions is the company I work for. MapStore 2 is an open source project that is open to collaboration and contribution but currently is being developed mainly internally by Geosolutions in the open. You can find it on GitHub and you can collaborate and contribute if you like the product. Geosolutions was founded in Italy in 2006 and works in the open GIS field in many ways. Mainly in the Geoserver evolution and developing and also with our solutions like MapStore. But we collaborate with other open source projects like GeoNetwork, GeoNode, Seekern, and so on. Our customers are both public agencies and private companies all around the world. We have customers in the United States, here in Germany, in all Europe like United Kingdom, and so on. But let's start talking about MapStore 2. These are the main points we are going to talk about. I will describe what MapStore 2 is. What you can do with MapStore 2, mainly mapping as you can imagine, but not only mapping. Because the final result should be a complete web GIS application, so you don't simply do your simple maps like you would do with open layers or leaflet by themselves. If not, you can use leaflet and you won't need anything more. But if you need something complex, just a mapping library is not enough. So products like MapStore 2 are the thing that you could use to build more complex applications. We will do some demo because I will try not to be too boring and show what you can really do with the product. Not just talking and whispering about something that you can't see at the moment. We will talk a bit about the future, what we are going to do from now on in the next year probably, since it's been a year when we started developing the product. Now it's in a phase where we can say it's quite stable and ready for production. We already have some deployed applications for our customers. So it's a good time for you to know about MapStore and decide if MapStore is good for you or not. Okay, so what is MapStore 2? MapStore 2, this is the demo site if you want to have a look at the product itself and the related documentation, everything you want to know apart from what I will say in this presentation. Basically it is a framework. So it's a set of libraries, basic technologies and our own libraries built to realize complex WebGIS applications. It's based on a set of common technologies, mainly ReactJS, as I said, Leaflet, OpenLayers3 and also SeasonJS we will see. In addition to ReactJS we also use Redux, it is a common state management framework. All these products are from Facebook, so if you are in the web client development field you should already know about them. So with the framework I can build applications, these are some screen shots, sample screen shots of what you can realize. The first one is the first deployed application that we did for MapStore 2. It is an application for an oil and gas company that can visualize and search data from geological times. So it's a quite uncommon application for mapping. You can also do many other things and here are only some samples of what you can do, but you can talk to me after this presentation to have more insights of how you can use the framework to realize your applications. Also MapStore 2 is not only a framework that you can use to develop your own application, but it's also a full-fledged product that you can use by itself without being a developer to publish and create your maps and share them on the internet with other people. Not only maps, you can also customize, we will see the complete application deciding which kind of widgets you want in your application, which kind of functionality you want just by configuration. These are screen shots of the product. As you can see, it has many toolbars, menus, functionalities, and also its own look and feel. The product is created to be able to publish maps. So with the product, you can create your maps, add layers and new data, save them, share them with other people, or just publish an application with your data, choosing the functionality you want in it. The main thing you can do with MapStore 2 is obviously mapping, so you can use a mapping library to create maps, add raster or vector data to it, and use the usual navigation function you have in a classic WebGIS application. We decided that MapStore 2 should be agnostic, mapping agnostic in particular. You should be able to decide which mapping library you want to use. Today, I want to use Leaflet because I want to build a light application, something that needs, for example, to be embedded in an external application that is completely different from the mapping one. So Leaflet is enough. I don't want many advanced functionalities that I can have with open layers. I choose Leaflet, and I build with my application with Leaflet using MapStore 2. I will show you briefly how you can do that. But if you decide that you want to use open layers 3 because your application is more complex, needs more functionality, is not available in Leaflet, you can switch to open layers 3. You can really switch, I will show you how in just a few seconds. Or also, you can do something more advanced like having a globe with based on Season.js or something similar to Google Art and similar technologies on your web browser. And this is quite simple with MapStore 2. I will switch to some demo so that it's not so boring. Okay, this is the first page that I will show you about MapStore 2. This is not the product. I will show the product later. This is a simple playground that we created so that you can play with MapStore 2 and its configuration capabilities and see for real what it can do for you. You can see here on the right, there is a map with the classic buttons, scale and overview. This is based on Leaflet at the moment. You can see it here in this combo. As I told you, you can switch from one library to the other and you can do it this way. Can you spot the difference? Something changed but it's not really very visible. For example, the scale bar and the button for the overview are different because they are controls of the mapping library. So we are currently using the OpenLayers one, while previously we were using the Leaflet ones. This is good because you can do it not only in real time like I did it here, but at the developer time you can switch from one library to the other. At the moment you decide that Leaflet is not enough because you realize that you start with Leaflet because you needed certain functionality, then a customer asks for a very complex functionality that Leaflet is not able to do. You can switch to OpenLayers three, no problem. Also, the same configuration can show the same map in CISM.js. So how can it be done in code? That's not so difficult. This is a sample of a JSX that is the way you develop your application in ReactJS. If you know a bit of ReactJS, basically use this syntax that is very similar to HTML or XML to represent web components. So each of the plugins of MapStore2 is simply a component for ReactJS. You can see it here, for example, two components. The first one is the map. So when you want to put a map on your page, just write a map tag like you would do with div or span and similar in HTML. You give it properties and then you can nest children. For example, in this case, I'm also specifying that I want a layer that is fetched from WMS with certain options and so on. In this case, I have two layers. One took from WMS and the other one is OpenStreetMap. This is exactly this configuration. So you have OpenStreetMap and some WMS on top of it. So if you want to switch to open layers, you have to do this. Just change the map type of the web component and you automatically get the same exact map with the same exact functionality using the other mapping library. Obviously, the mapping libraries are not equivalent in terms of functionality. So what we are trying to do is to guarantee that the base set of functionality that can be implemented by both or the three libraries that we currently support is automatically compatible from switching from one library to the other. There will be probably and there is also in at the moment some functionality. This is supported only by certain kind of libraries. So you won't have it when you switch to the other one. This is the only limitation of the moment, but it's just a matter of implementing it for all the mapping libraries. Okay, let's move on a little bit quickly. Apart from doing maps, as I said, when MapStore2 is useful because you can build complex applications, not only with maps and layers. MapStore2 is plugable. It is made of plugins where you can see the main one. This is the map plugin that you see in the JSX in the previous page. But you can add more plugins, for example, something to show you the current coordinates and so on. But I will switch to demo mode again because our playground allows you not only to switch between different mapping libraries, I will switch back to leaflet, but also to configure the functionality for your application because here on the left you have a list of plugins that are available in the current framework. And you can just enable and configure them as you like. For example, if you want the mouse position, I just click here, I have the mouse position. It's working. It's not just a screenshot. I can add other plugins, for example, a scale box here. This is working too. I can also add a search bar. Oh, something went wrong because now the look and feel is not so good. I can not only add plugins, but I can also configure them. It's very simple. For example, if I want to configure the mouse position plugin, I can go here and write a little JSON. Sorry, I have to take the microphone also, right? It's not that simple. Okay. I'm just writing a very simple configuration. In this case, I'm just applying some styling to my component. Okay, it has been applied. You can see it moved. And this can be done in real time, as you see. I can also done by configuration, so you can save what you have done. And you can do it also in the playground. I can save what I have done here. I reload the page just to be sure that we start from the beginning. And then I can reload again my configuration. And I get my configured application that I saved. Then the next phase will be probably to publish this application on the Internet so that anyone can use it. It's not a very useful application at the moment, but you can imagine that from now on you can do whatever you want. Just add new plugins or develop your own plugins and add it to the configuration. You can build your Web GIS application in a matter of minutes. Let's go back. I will go a little bit quicker because we are at the end of the presentation. Maps2.2 is also customizable. You can use CSS and configuration to make it look like you want. Here are some examples of the look and feel that you can get. This is a very different look and feel, for example. It's quite easy just with CSS and edges on configuration to get it working in this way. There are many examples in the slides. You can probably have a look at them. I won't go too further. I just want to say just some more things. For example, it is one of the reasons we needed to develop a new version of VAMP Store is that we weren't able to get a modern application anymore with the technologies that we are using. The new version is mobile-ready. It's responsive and everything you expect from a mobile-ready application. Also, the look and feel has been done with care. Previously, we were using just the XJS standard styles that were so common that anyone can imagine that your application was done with XJS without any doubt. Now, we created our own look and feel that is for sure more modern. This is the product. There is no more the playground, the real product, where you have a toolbar that is expandable, you have menus, and many, many functionality that you can spot. Let's go fast. Here, you just find examples of the various plugins that are available. I won't spend too much time on them. If you are interested, you can come at our booth, the Juul Solutions booth. We can show you more and talk about Mox Store 2 in detail. I just want to tell you a couple of things about the technology that we used. This is more for developers, obviously not the users of the product. This is so simple from the user perspective. For example, the fact that you can switch between mapping libraries, changing an attribute in an HTML-like syntax is due to the technology that we use, the React.js, that allows declarative programming. You just declare what you want, the libraries, do the hidden stuff for you. You change the attribute for real in your editor and you get the application completely changed because of that. We use the component and composition patterns because basically everything in React.js is a component. You just have to write your components and compose them the way you like to get the work done. The ability to do configuration and styling through attributes and a simple XML-like syntax. We also use Redux for managing the state of the application. This is made, for example, saving and reloading the complete state of the application in a shot. When you save what you have done in the playground and reload it, it's just because Redux saves everything of your application without you don't have to worry about. The library does it for you. With Mapstor 2, we just added to these technologies the ability to build plugins that was not built in in React.js and Redux. Plugins are basically a combination of components with behavior attached to that component. We also have specific components for mapping so you will have to use our components if you want to do mapping, not just the React.js available ones. And also the ability to do theming so you can switch your look and feel as you wish. I have done, I don't know if we have time for questions. OK, then you can find links for our automatically deployed versions of Mapstor also to the GitHub repository and so on. And if you have questions, this is the right time. Thank you. Yeah, thanks for the excellent talk and staying completely in time. Thanks. So are there any questions? Come on, guys. That was a lot of stuff. Oh, yeah, this one. Nice. OK, well, it's just a small one. So I wonder you use React.js. So, like, why would you choose this one? Like over some other frameworks like Angular? Is there a special reason for this? Yes. At the moment, we needed to choose something else to replace XJS. We did a review of what was available and we get the pros and cons of every library. At the end, we realized that React.js was probably simpler and lighter than other solutions like Angular.js and allowed us to not choose something that would be a framework for everything, probably. We needed to split between different libraries what we wanted to do because we basically had a bad experience with XJS. We needed to rewrite the product because XJS didn't allow us to just change some part of the application. If you choose XJS, you needed to do everything using XJS. So we decided to use something simpler. React.js is only about views, for example. It doesn't dictate how you handle your application state or how you do your Ajax calls and so on. So you are basically mixing and matching libraries that do a simple thing well instead of having a complete framework for doing everything. That's the reason. There is a blog post on our website. Yeah. It explains the concept. So someone from the audience said there is a blog post on the Geosolutions webpage. My boss. Yes, he's your boss. I know him. Yeah. So check this blog post out for more details on this. More questions. Here's one. I can imagine that leaflet and open layers is more comparable than to cesium. Cesium is a globe. And I can imagine that the user interface has to be completely different. For example, measuring on a globe is quite different, I think, than in 2D. Can you mention the challenges or the approaches you take to integrate 2D and 2D? Basically, what we did is to adapt what we did for 2D libraries, so the functionality that we have on those to match the ones available also on cesium.js. So at the moment, we just do similar configuration for all the libraries that we use. The challenges are that you need to implement all the functionalities for the different libraries. And this is done using React.js lifecycle methods, basically, because the real difficulty in realizing MapStore 2 was to integrate them up in libraries. React.js is a good library, but if you need to integrate it with something that is not React.js-based, that's a real tough part of the work. So we needed BASICAL to implement the same BASIC interface so that you have the same component, the same map component, the same layer component with the same attributes for each and every library. This is not an easy work, and it basically can be done intercepting all the phases of the component life. So when the component is created, you need to interact with the library with cesium.js or if it's calling the methods of the mapping library at the base. In my opinion, this is the real complex part of MapStore 2. But when we have done it, then everything from the outside is so transparent that you don't need to care about. Okay, I think we can take one short question so that there is enough time to switch rooms if you want to, but the next speaker here is also well. So may I ask you that you just passed this in the last row? Okay, so I repeat the question. So the question was, what about the license? It's BSD-like license, I think. Yes. You can find it here. But it's basically very open. It's based on BSD. You can basically do everything you want with maps or two. Especially collaborating with us. Also paying, if you want. Yeah, awesome talk, awesome session, questions and answers very well. So thank you for this.
 Yeah.  Hi everybody.  Welcome to the first session in the tunnel of the  forceful G 2016.  We have three excellent talks provided for you.  And we will quickly start with the first one by Mauro.  And he will introduce himself.  So have fun.  Thank you, Mark.  My name is Mauro Bartolomeoli.  Very difficult to spell and tell.  So just call me Mauro if you need it.  You can also call me Mauro as many English people are used to spell my name.  I work for Geosolution.  This is a company based in Italy.  And we developed many GIS based solutions, open source ones, mainly.  Today we are going to talk about one of these solutions aimed at WebGIS  developing that is called MapStore 2.  From the name you can spot that this is not the first release of this product.  The two suggest that there was a MapStore 1 in the past.  Basically one year ago MapStore 1 became so old that we couldn't improve it  and evolving it anymore.  And so we decided to do a complete right of the software.  The previous version was based on XJS and Oble.js 2.  The new one is based on a completely new set of technologies.  You can see it from the title.  You can spot Oble.js 3, leaflet, and basically React.js  that is the real new part of the product.  So Geosolutions is the company I work for.  MapStore 2 is an open source project that is open to collaboration and contribution  but currently is being developed mainly internally by Geosolutions in the open.  You can find it on GitHub and you can collaborate and contribute if you like the product.  Geosolutions was founded in Italy in 2006 and works in the open GIS field in many ways.  Mainly in the Geoserver evolution and developing and also with our solutions like MapStore.  But we collaborate with other open source projects like GeoNetwork, GeoNode, Seekern, and so on.  Our customers are both public agencies and private companies all around the world.  We have customers in the United States, here in Germany, in all Europe like United Kingdom, and so on.  But let's start talking about MapStore 2. These are the main points we are going to talk about.  I will describe what MapStore 2 is.  What you can do with MapStore 2, mainly mapping as you can imagine, but not only mapping.  Because the final result should be a complete web GIS application,  so you don't simply do your simple maps like you would do with open layers or leaflet by themselves.  If not, you can use leaflet and you won't need anything more.  But if you need something complex, just a mapping library is not enough.  So products like MapStore 2 are the thing that you could use to build more complex applications.  We will do some demo because I will try not to be too boring and show what you can really do with the product.  Not just talking and whispering about something that you can't see at the moment.  We will talk a bit about the future, what we are going to do from now on in the next year probably,  since it's been a year when we started developing the product.  Now it's in a phase where we can say it's quite stable and ready for production.  We already have some deployed applications for our customers.  So it's a good time for you to know about MapStore and decide if MapStore is good for you or not.  Okay, so what is MapStore 2?  MapStore 2, this is the demo site if you want to have a look at the product itself and the related documentation,  everything you want to know apart from what I will say in this presentation.  Basically it is a framework.  So it's a set of libraries, basic technologies and our own libraries built to realize complex WebGIS applications.  It's based on a set of common technologies, mainly ReactJS, as I said, Leaflet, OpenLayers3 and also SeasonJS we will see.  In addition to ReactJS we also use Redux, it is a common state management framework.  All these products are from Facebook, so if you are in the web client development field you should already know about them.  So with the framework I can build applications, these are some screen shots, sample screen shots of what you can realize.  The first one is the first deployed application that we did for MapStore 2.  It is an application for an oil and gas company that can visualize and search data from geological times.  So it's a quite uncommon application for mapping.  You can also do many other things and here are only some samples of what you can do,  but you can talk to me after this presentation to have more insights of how you can use the framework to realize your applications.  Also MapStore 2 is not only a framework that you can use to develop your own application,  but it's also a full-fledged product that you can use by itself without being a developer to publish and create your maps  and share them on the internet with other people.  Not only maps, you can also customize, we will see the complete application deciding which kind of widgets you want in your application,  which kind of functionality you want just by configuration.  These are screen shots of the product. As you can see, it has many toolbars, menus, functionalities, and also its own look and feel.  The product is created to be able to publish maps.  So with the product, you can create your maps, add layers and new data, save them, share them with other people,  or just publish an application with your data, choosing the functionality you want in it.  The main thing you can do with MapStore 2 is obviously mapping, so you can use a mapping library to create maps,  add raster or vector data to it, and use the usual navigation function you have in a classic WebGIS application.  We decided that MapStore 2 should be agnostic, mapping agnostic in particular.  You should be able to decide which mapping library you want to use.  Today, I want to use Leaflet because I want to build a light application, something that needs, for example, to be embedded in an external application  that is completely different from the mapping one.  So Leaflet is enough. I don't want many advanced functionalities that I can have with open layers.  I choose Leaflet, and I build with my application with Leaflet using MapStore 2.  I will show you briefly how you can do that.  But if you decide that you want to use open layers 3 because your application is more complex,  needs more functionality, is not available in Leaflet, you can switch to open layers 3.  You can really switch, I will show you how in just a few seconds.  Or also, you can do something more advanced like having a globe with based on Season.js or something similar to Google Art and similar technologies on your web browser.  And this is quite simple with MapStore 2.  I will switch to some demo so that it's not so boring.  Okay, this is the first page that I will show you about MapStore 2.  This is not the product. I will show the product later.  This is a simple playground that we created so that you can play with MapStore 2 and its configuration capabilities and see for real what it can do for you.  You can see here on the right, there is a map with the classic buttons, scale and overview.  This is based on Leaflet at the moment. You can see it here in this combo.  As I told you, you can switch from one library to the other and you can do it this way.  Can you spot the difference? Something changed but it's not really very visible.  For example, the scale bar and the button for the overview are different because they are controls of the mapping library.  So we are currently using the OpenLayers one, while previously we were using the Leaflet ones.  This is good because you can do it not only in real time like I did it here, but at the developer time you can switch from one library to the other.  At the moment you decide that Leaflet is not enough because you realize that you start with Leaflet because you needed certain functionality,  then a customer asks for a very complex functionality that Leaflet is not able to do.  You can switch to OpenLayers three, no problem.  Also, the same configuration can show the same map in CISM.js.  So how can it be done in code? That's not so difficult.  This is a sample of a JSX that is the way you develop your application in ReactJS.  If you know a bit of ReactJS, basically use this syntax that is very similar to HTML or XML to represent web components.  So each of the plugins of MapStore2 is simply a component for ReactJS.  You can see it here, for example, two components.  The first one is the map. So when you want to put a map on your page, just write a map tag like you would do with div or span and similar in HTML.  You give it properties and then you can nest children.  For example, in this case, I'm also specifying that I want a layer that is fetched from WMS with certain options and so on.  In this case, I have two layers.  One took from WMS and the other one is OpenStreetMap.  This is exactly this configuration.  So you have OpenStreetMap and some WMS on top of it.  So if you want to switch to open layers, you have to do this.  Just change the map type of the web component and you automatically get the same exact map with the same exact functionality using the other mapping library.  Obviously, the mapping libraries are not equivalent in terms of functionality.  So what we are trying to do is to guarantee that the base set of functionality that can be implemented by both or the three libraries that we currently support is automatically compatible from switching from one library to the other.  There will be probably and there is also in at the moment some functionality. This is supported only by certain kind of libraries. So you won't have it when you switch to the other one.  This is the only limitation of the moment, but it's just a matter of implementing it for all the mapping libraries.  Okay, let's move on a little bit quickly.  Apart from doing maps, as I said, when MapStore2 is useful because you can build complex applications, not only with maps and layers.  MapStore2 is plugable. It is made of plugins where you can see the main one.  This is the map plugin that you see in the JSX in the previous page.  But you can add more plugins, for example, something to show you the current coordinates and so on.  But I will switch to demo mode again because our playground allows you not only to switch between different mapping libraries, I will switch back to leaflet,  but also to configure the functionality for your application because here on the left you have a list of plugins that are available in the current framework.  And you can just enable and configure them as you like. For example, if you want the mouse position, I just click here, I have the mouse position.  It's working. It's not just a screenshot.  I can add other plugins, for example, a scale box here. This is working too.  I can also add a search bar. Oh, something went wrong because now the look and feel is not so good.  I can not only add plugins, but I can also configure them. It's very simple. For example, if I want to configure the mouse position plugin, I can go here and write a little JSON.  Sorry, I have to take the microphone also, right? It's not that simple.  Okay. I'm just writing a very simple configuration. In this case, I'm just applying some styling to my component.  Okay, it has been applied. You can see it moved.  And this can be done in real time, as you see. I can also done by configuration, so you can save what you have done.  And you can do it also in the playground.  I can save what I have done here.  I reload the page just to be sure that we start from the beginning.  And then I can reload again my configuration.  And I get my configured application that I saved.  Then the next phase will be probably to publish this application on the Internet so that anyone can use it.  It's not a very useful application at the moment, but you can imagine that from now on you can do whatever you want.  Just add new plugins or develop your own plugins and add it to the configuration.  You can build your Web GIS application in a matter of minutes.  Let's go back. I will go a little bit quicker because we are at the end of the presentation.  Maps2.2 is also customizable. You can use CSS and configuration to make it look like you want.  Here are some examples of the look and feel that you can get.  This is a very different look and feel, for example.  It's quite easy just with CSS and edges on configuration to get it working in this way.  There are many examples in the slides. You can probably have a look at them. I won't go too further.  I just want to say just some more things. For example, it is one of the reasons we needed to develop a new version of VAMP Store  is that we weren't able to get a modern application anymore with the technologies that we are using.  The new version is mobile-ready. It's responsive and everything you expect from a mobile-ready application.  Also, the look and feel has been done with care. Previously, we were using just the XJS standard styles that were so common  that anyone can imagine that your application was done with XJS without any doubt.  Now, we created our own look and feel that is for sure more modern.  This is the product. There is no more the playground, the real product, where you have a toolbar that is expandable,  you have menus, and many, many functionality that you can spot.  Let's go fast. Here, you just find examples of the various plugins that are available. I won't spend too much time on them.  If you are interested, you can come at our booth, the Juul Solutions booth.  We can show you more and talk about Mox Store 2 in detail.  I just want to tell you a couple of things about the technology that we used. This is more for developers, obviously not the users of the product.  This is so simple from the user perspective. For example, the fact that you can switch between mapping libraries,  changing an attribute in an HTML-like syntax is due to the technology that we use, the React.js, that allows declarative programming.  You just declare what you want, the libraries, do the hidden stuff for you.  You change the attribute for real in your editor and you get the application completely changed because of that.  We use the component and composition patterns because basically everything in React.js is a component.  You just have to write your components and compose them the way you like to get the work done.  The ability to do configuration and styling through attributes and a simple XML-like syntax.  We also use Redux for managing the state of the application.  This is made, for example, saving and reloading the complete state of the application in a shot.  When you save what you have done in the playground and reload it, it's just because Redux saves everything of your application without you don't have to worry about.  The library does it for you.  With Mapstor 2, we just added to these technologies the ability to build plugins that was not built in in React.js and Redux.  Plugins are basically a combination of components with behavior attached to that component.  We also have specific components for mapping so you will have to use our components if you want to do mapping, not just the React.js available ones.  And also the ability to do theming so you can switch your look and feel as you wish.  I have done, I don't know if we have time for questions.  OK, then you can find links for our automatically deployed versions of Mapstor also to the GitHub repository and so on.  And if you have questions, this is the right time.  Thank you.  Yeah, thanks for the excellent talk and staying completely in time. Thanks.  So are there any questions?  Come on, guys.  That was a lot of stuff.  Oh, yeah, this one. Nice.  OK, well, it's just a small one.  So I wonder you use React.js.  So, like, why would you choose this one?  Like over some other frameworks like Angular?  Is there a special reason for this?  Yes.  At the moment, we needed to choose something else to replace XJS.  We did a review of what was available and we get the pros and cons of every library.  At the end, we realized that React.js was probably simpler and lighter than other solutions like Angular.js  and allowed us to not choose something that would be a framework for everything, probably.  We needed to split between different libraries what we wanted to do because we basically had a bad experience with XJS.  We needed to rewrite the product because XJS didn't allow us to just change some part of the application.  If you choose XJS, you needed to do everything using XJS.  So we decided to use something simpler.  React.js is only about views, for example.  It doesn't dictate how you handle your application state or how you do your Ajax calls and so on.  So you are basically mixing and matching libraries that do a simple thing well instead of having a complete framework for doing everything.  That's the reason.  There is a blog post on our website.  Yeah.  It explains the concept.  So someone from the audience said there is a blog post on the Geosolutions webpage.  My boss.  Yes, he's your boss. I know him.  Yeah.  So check this blog post out for more details on this.  More questions.  Here's one.  I can imagine that leaflet and open layers is more comparable than to cesium.  Cesium is a globe.  And I can imagine that the user interface has to be completely different.  For example, measuring on a globe is quite different, I think, than in 2D.  Can you mention the challenges or the approaches you take to integrate 2D and 2D?  Basically, what we did is to adapt what we did for 2D libraries, so the functionality that we have on those to match the ones available also on cesium.js.  So at the moment, we just do similar configuration for all the libraries that we use.  The challenges are that you need to implement all the functionalities for the different libraries.  And this is done using React.js lifecycle methods, basically, because the real difficulty in realizing MapStore 2 was to integrate them up in libraries.  React.js is a good library, but if you need to integrate it with something that is not React.js-based, that's a real tough part of the work.  So we needed BASICAL to implement the same BASIC interface so that you have the same component, the same map component, the same layer component with the same attributes for each and every library.  This is not an easy work, and it basically can be done intercepting all the phases of the component life.  So when the component is created, you need to interact with the library with cesium.js or if it's calling the methods of the mapping library at the base.  In my opinion, this is the real complex part of MapStore 2.  But when we have done it, then everything from the outside is so transparent that you don't need to care about.  Okay, I think we can take one short question so that there is enough time to switch rooms if you want to, but the next speaker here is also well.  So may I ask you that you just passed this in the last row?  Okay, so I repeat the question.  So the question was, what about the license?  It's BSD-like license, I think.  Yes.  You can find it here.  But it's basically very open.  It's based on BSD.  You can basically do everything you want with maps or two.  Especially collaborating with us.  Also paying, if you want.  Yeah, awesome talk, awesome session, questions and answers very well.  So thank you for this.
foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_0_215.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_216_263.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_264_719.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_720_767.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_768_2999.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_3000_6683.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_6684_6743.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_6744_7127.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_7128_11243.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_11244_16091.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_16092_16403.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_16404_17999.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_18000_18179.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_18180_20699.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_20700_24191.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_24192_24239.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_24240_26159.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_26160_27347.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_27348_27875.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_27876_28019.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_28020_28415.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_28416_32327.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_32328_32639.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_32640_32903.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_32904_33143.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_33144_33227.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_33228_33311.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_33312_36167.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_36168_36671.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_36672_38867.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_38868_38915.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_38916_39299.png foss4g-2016-1285-mapstore_2_modern_mashups_with_ol3_leaflet_and_react-hd_39300_40619.png