MapStore 2, modern mashups with OL3, Leaflet and React

Video thumbnail (Frame 0) Video thumbnail (Frame 2933) Video thumbnail (Frame 4363) Video thumbnail (Frame 6675) Video thumbnail (Frame 8985) Video thumbnail (Frame 11002) Video thumbnail (Frame 12976) Video thumbnail (Frame 13523) Video thumbnail (Frame 14705) Video thumbnail (Frame 16086) Video thumbnail (Frame 17994) Video thumbnail (Frame 19707) Video thumbnail (Frame 20690) Video thumbnail (Frame 21823) Video thumbnail (Frame 24191) Video thumbnail (Frame 25249) Video thumbnail (Frame 25955) Video thumbnail (Frame 26845) Video thumbnail (Frame 27420) Video thumbnail (Frame 27964) Video thumbnail (Frame 28492) Video thumbnail (Frame 31919) Video thumbnail (Frame 39676) Video thumbnail (Frame 40460)
Video in TIB AV-Portal: MapStore 2, modern mashups with OL3, Leaflet and React

Formal Metadata

MapStore 2, modern mashups with OL3, Leaflet and React
Title of Series
Part Number
Number of Parts
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.
Release Date

Content Metadata

Subject Area
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.
Revision control Web 2.0 Software 3 (number) Set (mathematics) MiniDisc Right angle Mereology Product (business)
Collaborationism Texture mapping Server (computing) Image processing Projective plane Java applet Client (computing) Open set Evolute Sequence Java Enterprise CAN bus Geometry Word Computer animation Software Visualization (computer graphics) Data fusion Family
Point (geometry) Texture mapping Building Multiplication sign Decision theory Electronic mailing list 3 (number) Content (media) Cartesian coordinate system Complete metric space Product (business) Web 2.0 Computer animation Phase transition Family Resultant Library (computing)
Addition Complex (psychology) Android (robot) Presentation of a group Service (economics) Texture mapping Key (cryptography) Multiplication sign Sampling (statistics) Set (mathematics) Cartesian coordinate system Field (computer science) Product (business) Web 2.0 Facebook Computer animation Visualization (computer graphics) Statement (computer science) Software framework Software framework Quicksort Library (computing)
Classical physics Functional (mathematics) Texture mapping GUI widget Software developer Cartesian coordinate system Product (business) Product (business) Web 2.0 Computer animation Vector space Internetworking Configuration space Library (computing)
Functional (mathematics) Texture mapping Computer animation Mapping Calculus Data structure Web browser Cartesian coordinate system Open set 2 (number) Library (computing)
Web page Complex analysis Zoom lens Multiplication Functional (mathematics) Scaling (geometry) Multiplication sign Moment (mathematics) Event horizon Product (business) Mathematics Different (Kate Ryan album) Configuration space Right angle Configuration space Library (computing)
Web page Zoom lens Mapping Mapping Connectivity (graph theory) Sampling (statistics) Set (mathematics) Bit Mass Cartesian coordinate system Food energy Category of being Computer animation Personal digital assistant Computer configuration Configuration space Configuration space Pressure Summierbarkeit
Zoom lens Functional (mathematics) Mapping Texture mapping Matching (graph theory) Mapping Connectivity (graph theory) Moment (mathematics) Database Limit (category theory) Type theory Computer animation Term (mathematics) Configuration space Library (computing)
Web page Mapping Texture mapping Computer animation Building Cartesian coordinate system First-person shooter Plug-in (computing)
Metropolitan area network Zoom lens Functional (mathematics) Texture mapping Electronic mailing list Menu (computing) Average Cartesian coordinate system Different (Kate Ryan album) Cuboid Arrow of time Software framework Configuration space Escape character Summierbarkeit Position operator Plug-in (computing) Library (computing)
Zoom lens Manufacturing execution system Computer animation Personal digital assistant Connectivity (graph theory) Configuration space Real-time operating system Configuration space Value-added network Newton's law of universal gravitation
Metropolitan area network Zoom lens Manufacturing execution system Moment (mathematics) Cartesian coordinate system Web 2.0 Phase transition Configuration space Configuration space Game theory Figurate number Summierbarkeit Plug-in (computing)
Email Presentation of a group Mapping Computer animation Building Configuration space
Revision control Mobile Web Slide rule Mapping Bit rate Building Mobile Web Cartesian coordinate system
Metropolitan area network Zoom lens Manufacturing execution system Sample (statistics) Lecture/Conference Building Configuration space Cartesian coordinate system Summierbarkeit
Functional (mathematics) Sample (statistics) Multi-agent system Building Expandierender Graph Average Summierbarkeit Product (business) 19 (number)
Mapping Computer animation Building Multiplication sign Demo (music) Special unitary group Wide area network
State of matter Connectivity (graph theory) Multiplication sign Combinational logic Perspective (visual) Declarative programming Computer programming Product (business) Revision control Latent heat Single-precision floating-point format Configuration space Texture mapping Software developer State of matter Coma Berenices Cartesian coordinate system Computer programming Declarative programming Component-based software engineering Arithmetic mean Wind tunnel Computer animation Intrusion detection system Connectivity (graph theory) Configuration space Library (computing)
Web page Complex (psychology) Functional (mathematics) Token ring Connectivity (graph theory) View (database) Multiplication sign Real number 3 (number) Student's t-test Mereology Food energy Attribute grammar Different (Kate Ryan album) Software framework Maize Position operator Physical system User interface Cellular automaton Moment (mathematics) Projective plane Cartesian coordinate system Computer animation Blog Phase transition Video game Configuration space Cycle (graph theory) Musical ensemble Local ring Library (computing)
Computer animation
but here hi everybody and
welcome to the 1st session in the tunnel of the falsity 2016 and we have 3 excellent talks provided for you and we will quickly start with the first one by Motorola and he will introduce himself so have fun no thank you want my name is my world but only only very difficult to say about and to have so just call me if you need it and you can also called our real as many English people used to spend my name I were for a solution just use the company based in Italy and we get a lot of work mn many based solutions all this was 1 of maybe today we're going to talk about 1 of these solutions aimed at Web GAS developing the disk or month 2 from the day you can spot this is not the 1st release of this product that to her suggest that there was a mobster 1 in the past basically 1 year ago much so 1 became so hold this we couldn't improving data and evolving it anymore and so we decided to go do a complete right of the software their previous version was based on NGS and opening still the new 1 is based on a new a completely new set of technologies you can see 2 from the title of by the asphalt history the flat and basically react yes that is the real there are 2 new part of the product soldiers solutions is the
company I worked for um up so
too is an open-source project that is open to collaboration and contribution but currently is being developed mainly internally by just solutions in the open you can find it on the other hand you can collaborate and contribute to if you like a brother dissolution was founded in Italy and in 2006 and work Jiji open GAS field you now many ways mainly for in did you server evolution and developing and also with our solutions like maps but we collaborate to other open-source project light your network could you know the sequence and so on our customers are both the public agencies and private companies or around the words we have the customers in the United States ceiling Germany in the whole Europe unlike the United Kingdom and so on but the
list of talking about to these are the main points we are going to talk about I was describing what might start to his uh what you can do it must 1st master to and many mapping as you can imagine that not only mapping there because the final result this should be a complete web GIS applications of you don't simply do your simple maps like you would do we'd OpenLayers that by themselves if not you can use the fact you want me to anything more but if you need to something complex uh just a mapping library is not enough so products like maps the thing that you could use to build the more complex applications where you do something because I was trying not to be too boring this show what you can really do with the product not just talking and whispering about something that you you did you can see at the moment and with that can be done was about the future of what we are going to do from now on In the next year probably since it's been year 1 from when we started developing the product and now it's seen a phase where we can say it's quite stable and ready for production we already at the summer deployed brother application for our customers it's a good time for you to know about much store and decide if not story is good for your not
OK so what is not sought to
laughter so this is the the most side if you want to have a look at their product itself and that they're related documentation and everything you want to know from that apart from what I was saying induce presentation basically it is a framework so it's sort a set of libraries the basic technologies and our own libraries be used to do that To realize complex web GAS applications is based on their set of common technologies mainly reactor yes as I said the flat always a straight and also sees ingenious In addition to will react yes we also use a redox that is a common statement and framework all these products are from the Facebook so if you are in there and I where the guy and to develop the field you should do you already know about them so with a framework I can be the application use of some screenshot sample screenshot of what you can realize the first one is the 1st deployed applications do we give 4 months to do the key is an application for Android and deaths company that can uh visualizer and uh service to the data from the geological time so it is a quite uncommon application for mapping you could
also do many other things and he also only some some samples of what you can do but you can talk to me after his presentation to more insights on how you can use the framework to realize or your applications also mobster
is not only a free market it you can use to develop your own application but is so 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 and we will see that the complete application deciding which kind of of uh widgets and you wanted your application which kind of functionality you want to just by configuration OK these are screenshots of the product as you can see the Tasmania uh tool bars menus functionalities and also it's all look and feel of the product that is created to be able to publish maps so we don't product you can create your maps and the the yeah said and new data save them share them with other people or just public application with your data choosing the function that you wanted it the main thing you can do use
of the mapping so you can use a mapping library to create maps had the roster or vector data to it and use the usual navigation function you have classic Web GIS application we decided
that much to do should be a agnostic might be good enough to give practical you should be able to decide which mapping library you want to use today I want to use the flat because I want to build a light applications something that needs for example to be embedded in the next several applications that is completely different from the map 1 so leaflet is now I don't want to many advances functionality that I can have with OpenLayers I choose which I believe with make my application with flat using structure I will show you briefly how you can look that but if you decide that you want to use a police 3 because your application is more complex need more functionality this is not a viable nearly flat you can switch to open a history you can't really do which I will show you how in just a few seconds or also you can do
something more about so like getting there global we based on season JS or something similar to what about the colleges for your on your web browser and this is quite simple we to I will reach some so that it's not so boring OK this is
the 1st the a page that I would show you about multiple this is not the product and we show the probably later this important out playground that we created so that you can they we not to have to and its configuration capabilities and see a Fourier and what you can do for you you can see here on the right the reason I when and met with the classic but also scale and all of you this is based on the fact that the moment you can see it here In this almost as I told you you can switch from 1 library to the other and you can do it this way
can use for other events something changes but it's not really very visible for example this K and they but for the overview of different because they are contrasts of the library so we are currently using the OpenLayers land but please the we were be using that if at once has this is good because have you can do it and not only here we have time like KDD but and develop a time you can switch from 1 library to the other at the moment you decided to leave it is not enough because you realize that you start with leaflet because a you need a certain functionality than a customer asked for they're very complex function either the leaflet is not able to do it which then history the problem also the same
configuration can show the same amount of this J and so on there all can it be done he called that's not so difficult this is a
sample of the data sets that is the way you develop your application in reality as if you know a bit of reality as basically uses syntax it is very similar to HTML or XML to represent the with components so each of these uh liveliness of much of 2 is simply a component for the energy as you can see it here for example 2 components the 1st 1 is the map so when you want to put em up on your page just write them up dead like you we would do we did the 1st 5 and similar in HTML you give it properties and then you can and nested children for example in this case I also specifying that they wanted a Europe that is the pressure from the BMS we certain options and so on In this case I have 2 layers of the the 1 that 2 from mass and the other 1 is always treat disease exactly this configuration so you have
OpenStreetMap and that some of you mentioned properly so if you
want to switch it will open you have to do this does change the map type of their were component then you ultimately get the same exact match with the same as that functionality using the other mapping library obviously there might be others are not equivalent in term of terms of functionality so what we have tried to do is to guarantee that the database is set of French writer that can be implemented by people or 3 . 3 diversity we count the support is all dramatically compatible from those reaching from 1 library to the other there will be probably at there is also in in at the moment of some function this is supported only by some kind of so you want that it when you switch to the other 1 this is the only limitation of the moment but it is just a matter of implementing it for or the mapping of OK let's
move on and it'll be too quickly apart from doing maps so as I said when laughter is useful because you could be
complex application not only with not sufficiently upset is by the world is made of bodies aware you can see the main 1 is did is this is the main them up idea that you see in the acts on the previous page but you can add more plug-ins for example something to show you the current coordinates so and so on but I was which
do more than gain because our playgrounds arrows you not only to switch between different mapping libraries I with respect
briefly but also to confuse
URI the functionality for your application because here on the left you have a list of flight that alignable in the current framework and you can just enabled and you're done as you like for example if you wanted the most position I just click here have the most position it is not just this I can add other plug-ins for example escape box here this is working to I can also add
the the search but something went wrong because now the look and feel it is not so good I cannot only add that this but I can also configure them it's very simple for example if I want to compute the most position but I can go here as bright as a leader Jason the I he with the world sorry but I have to take the microphone also right his mother OK and just writing a very simple configuration in this case and just applying in applying some starting to my component but it has been applied to it as it moved L this can be done in real time has see but can also that by configurations so you can say that what you have done you can do it also in the playground we I can say what they have done here however a lot of data just to be sure that we start from the beginning and then
I carried all the game my considerations and again
Michael figural application that I say I can add then the next phase we probably to publish his application on data so that anyone can use it is not a very useful application at the moment but you can imagine that from now on you can do whatever you want to just a new plug-ins or that of your own plug-ins and added to the configuration and you can build your web just Web GIS application in a the matter of minutes let's go back I
will variable only the quicker because we are at the end of the presentation of the results for customizable you can use a CSS and configuration to make it look like you want the some examples of the look and feel it you can get this is a very different look and
feel for example then it's quite easy just we CSS and adjacent alterations to get it working in this way is that there are
many example in the slides you
can probably have a look at them I want to go to the harder I just want to say
just the some more things for example that is 1 of the reasons we needed to develop a new version of the story uh is that we weren't able to get more and more than application anymore we did at the culture that we are using so the new version is more by rating so is our sponsors that everything you expect from mobile radio applications
and also the and feel has been done with care previously we were using that the as standard style so that so common that anyone can imagine that your application was done with the as so without any doubt now we created our own look
and feel that is for sure more modern OK this is the
product of this and other no more the playground there be a product where you have a to laboratories expandable menus and many many functionality did you can spot you can school they are
you just find examples of the earliest flight is
desirable I would spend too much time on them if
you're interested you can come that were both did solutions will further and we can show you more and talk about hostile to in detail to
just 1 or 2 of you a
couple of things about the technology is we use is more for developers of obviously not not the users of the product but uh this is so simple from the using perspective so for example the fact that you can switch between the libraries just changing adaptive to in HTML like seeing that so is due to the technology that we use that reaction against the tunnels declarative programming so you just declare what you want to uh the libraries of uh do the uh the the staffer for you so you change the activity for reality in this in your edit or and you get the application completely change because of that this is because the programming and also we use this competence and composition doctors because basically everything you BFGS is a component should you just have to write your components and composed and the way you like to get the work done and the ability to do configuration assigning throughout the use of a simple xml like that seem we also use redox for managing the status of the application and is made for example saving loading the complete state of all the application in a shop so when you say that what you have done in the playground it is just because we saves everything single of your application without uh you don't have to to worry about their library does it for you with possible we just added to the data knowledge is the ability to these bodies that was not the the in in reality yes and redox but is by are basically a combination of components leader did or attached to that component and we also have the specific components for mapping so you will have to use our combinative wanted mapping not just new react yes alignable once and also the ability to do the meaning so you can switch your country as you wish I have done that I don't know if
we have time for questions OK and then the European finding so for our automatically provided versions of mumps or also to the proposing and so on and if you have questions this is directed
thanks for the excellent tokens thing completely time things so on any questions commander there was a lot of stuff 0 yeah this was nice well it's just a small 1 so I wonder you use react so what 1 like why would you choose this 1 like over some other frameworks like angular is there special reason for this yeah at the moment we needed to choose something as to replace X z as we did a very view want to was available and we get the pros and cons of every library at the end we realized that we had GSO was probably simpler and lighter than other solutions like a hundred yes and as a tool not to choose something that would be uh a framework for everything probably we needed to speak to between different libraries what we want to do because we basically that that experience with yes because we needed to rewrite the brother because at the didn't allow to just changes some part of the application if you choose uh a yes you needed to do everything music as so we decide to use something simpler BFGS is only about use for example it doesn't dictate how you went all your application's data are you do your project schools and so on so you are basically mixing and matching libraries that do a simple thing as well instead of having a complete framework for doing everything just the reason so we we so someone from the audience that there is a blog post on the 2 solutions web page this is because I know in such sectors local cells for out for more details on this more questions here's 1 I can imagine it did the selected openly has become more competitive position of the 2 cesium systems to cope and I can imagine that the user interface has to be completely different for example may showing comic opus quite different I think that need to be there at can you will mention the challenge she's so 1 of the approaches have take through to integrate students basically with what we did this to about what we did for to the library so the functionality that we have on those 2 matches the last available also Susan JS so at the moment that we just have to do a similar configuration for all the all the libraries that we use uh the chances are that you need to implemented all the functionalities for different libraries and this is done in using the energy as life cycle of the medical because there is the real uh do we difficulty in realizing mother was to integrate them libraries react yes it is a good library but if you need to integrated with something that is not a reactor yes Bayes that that's really a tough part of the world so we needed basically during implemented the same basic interface so that you have the same component the same article on the same component with the same attributes for each and every library this is not an easy work and it basically it can be done in intercepting all the phases of the component life so when the component is created you'd need to interact with a library of which isn't story calling the methods of them at the library at the base in my opinion this is the real complex part of talk to but when we have evaluated then everything from the outside is so transparent you don't need to care about OK I think we can take 1 short question so that there is enough time to switch rooms if you want to but the next speaker is also well so may I ask you that you just as this in the last row of OK so I repeat the question so the question was so what about the license so here's the light curve licenses thing yes the
you can find it here by the use of Bézier very open is based on as you can basically everything you want with them with multiple especially collaborating with us was something if you are here also talk all sensation questions and answers were well so thank you for this