MapStore 2 Comprehensive demo

you see okay I will do a quick introduction using the slides from the latest foss4g just to give you some quick ins what we are going to talk in this couple of hours the main topic obviously is after to our web GIS product I will try to explain what is maps or to and to show basically all the main functionality of the product from a couple of different point of views we will show the developer point of view and the user point of view we will go deeper in other or the other it that depends on you I will ask you to tell me what kind of topics you prefer and I will talk more about them okay first of all from what I remember you are also developers so also the developers part should be of some interest for your right yes right and in this room we have someone developer sizzle okay so I will try to cover both the topics in these couple of hours the idea is to at the first hour where I talk and obviously you can stop me at any time if you have a question to ask and then probably the second hour dedicated to question and answers in general so let's start quickly first of all what is map store to as I said is not a single thing so I will try to show you all the different things that map tour to is obviously is a software and since is we are in the web era there is a website where you can learn everything about maps or - this is the link that you can follow this is not a static website is the product itself so from there you can see the product working with some sample data set okay so what it is the first point of view that we will try to explain is the framework point of view so map so - is basically a framework that you can use to develop different kind of applications when you think of Maps or - as a framework and think of use it using it in a lego-like way so you a small bricks that you can compose in many different ways to get many different final products so with the framework you can build the cellular products as I said these are some just some screenshots of the products that have been built using map so - I will try to show some of them working in a in a short amount of time there are just green shot map out there to make you imagine how many different things you can do with maps or to other applications that can be also very different one from the other otherwise and so on so since it's a framework obviously it's a also for developers because if you want to use a framework you have to have some basic knowledge of the way the frame of use works and also the technologies that are behind it here is a quick list of all the technologies that are used inside map so - and obviously you have a couple of options if you want to develop an application with maps or - the first one is to learn the basic knowledge about these technologies and the framework itself to use it to develop your own application or ask some external person or company to develop the application for you but since you are developers probably you're interested in learning a little bit how the framework works to bring some small application or bigger one it depends on the amount of effort you want to spend learning the framework itself but it's not only a framework it is also product by itself so if you are not a developer and you don't want to learn the way the framework works you can also use it as a standalone product I thought that the IKEA idea probably is good too to show how to use it basically you go to sort of store get the maps or to product mount it a little bit customize it a little bit and then you have the final product without writing a single line of code only some screws and something to mount and that's it this is the second point of view that we will show for using maps or tool and these are some screenshot of the default product obviously since is a framework the framework has been used to build the product so the our product is just one of the application you can build with maps or maps or to use as a framework but it's probably a set of most of the functionalities that are available in the framework itself so if you need something that is not really too much customized that just needs the functionality data reliable out of the box or the remote the product is probably enough for you you just need to customize the little bit and we will see that there are several ways to customize it and you can go okay as I said it's a product but it's not that you can you don't have to use it exactly the way it comes out of the box you can customize it some way for example you can choose a different theme so give it a different look and as I said if you are not a developer and you want to use the product to customize it you just need to edit some configuration maybe some basic CSS if you want to customize the look and feel using the documentation or we need to improve that it will be the documentation bit but we are working on it you can do this quite easily and if you are doubts if you need to some more documentation or some ins on how to do something we have a couple of mailing lists that you can use to ask us all your questions okay so maps to two we have talked about the two point of view framework and product but what I can do we bought the framework and product obviously I can do maps so map store 2 is basically a framework or a product to build and share Maps and what are the features that you can use in map so to to build your own Maps the first one is that this is something that is quite different from all the other choices that you can find on the market usually any framework that you'll find on the web the data can do mapping is based on one or at most two of the available basic mapping libraries I'm talking about leaflet and open layers and maybe also see zoom that is in addition to those if you need to do 3d like mapping but generally if you choose a framework you also choose the mapping library that you want to use some of them are based on leaflet such as map box stuff like that otherwise our openlayers but I think only maps or two at the moment can use all the two major mapping libraries are available so leaflet and open layers we chose it to make it mapping agnostic we say so you don't have to choose a mapping library immediately you can choose one do whatever you want to do change your mind at any time and it's not a big effort to change there might be library so currently we support both leaflet and open layer 3 currently open registry is not the real name anymore we got back to calling it simply layers because we are at version 4 and also see zoom for map Maps on the globe and in clearly is a quite simple to add support for other libraries if that is needed so since you are also developers the first example of how you do coding using maps dota 2 as a framework this is a small snippet of code of an application that you can build using the master to framework since we are using react GS as the basic technology everything is similar to looking at an HTML with some JavaScript code in it so what you can see is something that resembles HTML just the tags are different because each tag you don't have the usual div or span or stuff like that you can use them because react GS is a superset of HTML so you can use the classic HTML tags but in addition to those you can also use components that have their own tag names and that are usable like any other tag data they are just advanced the web components that add functionality to your HTML pages in this simple case we are just building it up the target map we are specifying the with the attribute map type which kind of mapping library we want to use we choose leaflet but we will see it's very simple to switch to using other layers we also configure the account loyal or a couple of layers for this map the first one is a WMS layer coming from our internal demo server so the Mojo solution dot it is the WMS server we are using and we are also specifying the newly named weather data some data about weather in this case we are also specifying another layer a simple OpenStreetMap background and that's it with this simple snippet of code we can build em up and put it on our web page and if we change our mind we are not happy of leaflet and lower because we need some advanced functionality just an example leaflet is not able to support advanced it coordinate systems just the basic ones so if you need an application that can use for example polar projections or stuff like that these letting is not able to do that currently so you need to use open layers but it's not a problem if you change your mind after a couple of months of developing your application because reaching that to open layers is just a matter of doing this just changing the attribute map type to open layers and you will get the same application basically just using a different mapping library so if you need the advancing functionality that's already been looking layers you can use them from now on and you don't lose two months of work for just changing your mind on the map library ok I think it's time for the first demo just to show that is it this is not something that is written on the slide but it really works let me switch to my map store here it is not this one this one okay this is the URL that I showed on some slides a group visit the website main website for map so - this is basically a sort of market or shop where you can configure your maps share with people and build your own list of maps to be shared from there you can go directly to the map viewer product that I'm talking about for example I can open this map and you can see the product this is the standard product so it's not customized but this is already usable with many functionalities I will do a quick tour about them in a in some minutes but for now I just want you to show a quick example of the ability to switch the might be libraries in amount of seconds as I said in addition to the maps that are configured on the bottom of the homepage you also find some examples of how you can use the application the framework maps or - instead of the final product so there are some examples here I'm going to show you one that is I it's called the plugins example but usually call it in a different way this is our playground it's basically an example where you can play with the framework and see how it works in in enter in an interactive way so you have two areas in the screen the one on the right is the application the real application so the map and other functionality that we are going to add for the moment is empty there is only lab but if you remember in the snippet of code that I showed a couple of minutes ago this is exactly the example of math but it was implemented by the code so there is a map with an open street map background and on top of it there is a WMS layer with weather data the one with colors green and red mainly so this is exactly the example that I have shown in the slide and then on the left side we have the real playground set of buttons and controls that can be used to configure our application on the right the first one is exactly the one that allows you to shoot to choose the mapping library that you want to use this map is currently using leaflet I can choose from the combo another option I don't know if you can see it through WebEx but the map has been basically redrawn please note that the application has not been refreshed so we didn't reload all the code and the webpage will just change one attribute in a JavaScript object and everything has been switched to using the new mapping library it's more evident with like for example change to using caesium Jas okay now you can see the same app is loaded in cesium jessa I think this is more evident and I can switch back at any time just changing the point of view I can switch back at any time using another multi library and everything is synchronized so what I can see on one map can be seen on the other so the layers and also the current center of the map the zoom everything is basically the same in every multi library data I use okay if there are no questions so far I can go back to the slides good I take this as no questions so as I said probably I didn't set but I can say it now mobster 2 is also a pluggable system so the framework can basically be used I show the legal-like slide where you can see the bricks in mobster to a greatly is called the placket plugin it is more NIT word than a brick plugins are basically simple pieces of code that you can add to your application it's very simple you just need to edit a JSON configuration file to add a new plug-in to your application and when you add a new plug-in it will immediately work you don't need to do anything you can do some customization of the plug-in just editing in a configuration file and that's it did you hear a way of using the application you choose the plugins that you want in your application you configure them a little bit using a just configuration file and probably some CSS if you want to also change the look and feel a little bit and then you have your custom product so what does it mean that is pluggable that I can add new plugins for example one to show the mouse position when the mouse moves on the page or another one to choose the current scale L of the display or other tools in a right position toolbar many more tools you can choose and I can show this interactively let me go banker parties it is okay so if we go back to the playground the other part of this section here on the left is about the plugins so this is a list of plugins that can be added to the application I can simply click on one I a new I have a new zoom plus button here I can add a zoom out etc etc so it's really really simple to add the functionality from the framework to the final product just a matter of configuration obviously the playground is just creating a simple JSON file where everything is stored so that you can build your own customized version save it and then publish your final application when you're good with okay let's go back no question yes yeah we have one question here yes so assume we have already implemented using the leaflet framework are there any finite steps to migrate from an existing implementation through the master well this is the let's say the tough part of building the map so to framework is building the bridge between react GS and the framer so if you have some custom components and controls that are for leaflet it depends the effort of work to by rating them - after - it depends if you want to support this kind of actuality all your leaflet like the controls that you already have or also add the ability to use them from other mapping libraries because if you need to support that kind of functionality and it depends on leaflet very much it depends only on how much that code depends on leaflet or is Java Script independent code the Java Script independent code is not a problem to integrate them to master - if it depends only flat a obviously building a wrapper around it for making it work you map so - is not that complex if you also want to make it work with the other model libraries is a little more work to do that but we can help if you if you need to do this kind of work because we did it and we do it everyday for many different things so we have knowledge I don't know if you already know anything about reactor yes the way it works yeah we are actually using background is in our application and be a little custom plugin for leaflet handle own plugins button that can work with leaflets so that was the reason why the question of migration came to okay are plugins that you developed or you took them from the internet it's a mixer we have written some plug-in and also we have Susan unplugging from the case of some open source plugins okay okay understood just some sameen's on how we usually do that if you don't know react Jes react to this basically as I said is a framework to build web components so you can build a component then call it map and then you have some code that implements that and builds HTML as some JavaScript coding it and stuff like that there are also some methods in a component I can show you probably one of them so it's more clear let me see can you see my editor okay so this is the source code of the master - I'm going to the component for the map so there are different components this one for example okay this is the code for implementing the leaflet map and you can see there are some methods some functions some JavaScript function that you have to implement that are called lifecycle functions they are called life cycle because are they're called automatically by the system at certain moments in time of the life of the component for example this component will mount is a function that is called immediately before the component is rendered so it's drawn in the page so if you need some initialization code that you need to call before everything is rendered you can put your code here so this is to say that if you want to wrap your leaflet controls and use them inside maps or two you will probably need to build a component that is similar to this so have some life cycle meters one for example it is called before the rendering that where you can build your leaflet control you do new l dot name of the controls with the options and stuff like that then you have to implemented other functions to destroy the component at the end something like that so is not the easiest thing to do but it's not also the most complex one you need some knowledge in how reactions work and also know how your plugin work and if you know both things you can build them it's not the difficulty if you need L to convert some of them we can do together so we can try to convert and one together and then explain how to do that and you can decide if you want us to work on the conversion or you can do it yourself when you have the knowledge okay another question is around the framework so get know how we can configure it using react is there any possibility of some similar configuration do not want to use react maybe we want to use backbone or angular or or any other day strain work okay that's possible because react Jes is a basically a technology that does not cover everything so it's just matter of UI as you have seen we are building component which you can using something that is similar to HTML for example in angularjs you have something similar they are called directives where you can build your components and there are also libraries that allow to bridge angularjs directives to using react.js components so it's surely possible and in this case you will probably don't want to use all the maps or to frame or functionality but if you need to integrating an application that using different technologies you will probably need to integrate parts of it for example the map and some basic controls and you can you can obviously do it because maps go to as many advanced and functionality but can also be used as simple components and integrated in application d'un done in different ways and also from the backend point of view you are not bound to any back-end so you can use any kind of web service that you want and what i wanted to say in addition to that i had another thing in mind but it got lost okay let's move other question about this kind of topic you can do ok that's good ah yes sorry I I remember what I wanted to say there is another way of using maps or two if you don't want to build a reactor yes application we will also have a Java Script a simple JavaScript API so the way you use example Google Maps will include an external javascript and then you have a basic JavaScript object with function that you can call to include a map so to application into your page without having to bother about the react Jes and stuff like that so you just include our JavaScript API both the JavaScript and CSS for styling and well you can build your own application around that it's a very simple I can show you how this is done another example that you find here is the API example in this case the map that you see on the left is a complete map so two application that is used from a completely completely external web page so it's not a mobster to application itself is a simple web page that includes the JavaScript the API JavaScript from map store to and just with this snippet of code as you can see here probably I will zoom it a little bit so you can when you include our JavaScript I will have a master to global object you can say create the application inside that is container and you can also choose which plugins you want to include and configure them inline and you will have your Maps or to application included into your your webpage totally this is the simplest way to use a mobster - if you don't want to develop inside it so using react CS and stuff like that and obviously you can also interact with the map it's not that you include it in the page and you don't that away from your application to do things here for example we have a button that sends an event to the map store to application for example - to zoom in to a different bounding box or also to turn layers on and off so you can basically communicate with the API back and forth you can send the events they are called to the mobster - application to make it do something you can also listen for events from the map so - application to do to see what is happening in react to events that map so - is a running okay we are good with this okay okay go back to the demo sorry we we were talking about customization so customization is about for example changing the look and feel here you can see that we have buttons that are different from the standard ones this can be done using CSS but in the research nation we have built a complete theme system where you can use less as you know if you know the language less is a similar to sass they are high level languages to configure CSS yeah okay so using less so you can basically build your own team or customize the base one if you just need to change small things and you can also build the very different applications this was I don't know if you believe it or not is done using the same framework the same components of the ones that we have seen previously I will show it running in some minutes and other ones let me just go back to the example you as I said also the themes can be chosen so if I switch to another team you can see everything changes in the page all the colors and fonts and stuff like that and it's very simple to build your own team because usually what you want to do is just to change some colors add some logos and stuff like that and you can build your own less on top of the 61 you don't need to build a complete new CSS from scratch you just add your overrides let's say to the standard values and then the new theme is compiled and used for your application okay let's I can show you these in in practice let me see if it works in the playground you also have some ways to interact with the system very very deeply for example you can edit the team in real time this is LS file it's very simple you define some variables with the colors and stuff like that and they are used in many places too to create your final your final team let me see where is I wanted to change or it is one sorry the way that I don't use it maybe so this one let me try yes yes okay I'm sorry I did it wrongly I shanked too many things let's go back but as you may have understood it's very easy to build your own less change in just some of these variables and change for the color of the buttons for example and stuff like that and also to show you an example of how you can build your plugin if you need to add to the system just a very basic function let's say this is good not that long I'm not going to explain it in detail because since you are not familiar with the react Jessie should take too much time but just this part probably is enough it's basically the definition of our component is more piece of dynamic HTML what this plug-in does is this I'm adding a button in the page with the plus in it whenever I click on it a counter is incremented and a new label is shown in the page you should say oh it's so trivial maybe we want a deeper example but this is our visit to show you that integrating your own code in a map store - is very very simple in two lines of code basically I added a button that is interactive and stuff like that so you can use basic JavaScript and basic HTML and basic CSS just wrapped with some react.js bells and whistles but at the end our basic web technologies and so it's not that complex if you want to add your own plug-in with your own functionality directly to the framework and build your own plugin at the end then we have access from our own plugin to data some just special diseases with everyone Elmer yes let me show you this I go back to every instance of the application that is running locally okay this is a this is running on my machine currently and where you are developing you have the ability to go in the bat mode with a simple flag on the URL I am just reloading this application in debug mode so that I can show you something using the wrapper tools of Chrome can you see the developer tools yes okay there is a next time of chrome that is called the Redux dev tools we tax is another library we use addition to the axe is to manage the state of the application there is something that is available independently of react.js for example there is a bridge also to use it from language es is a simple JavaScript library it is not dependent on react yes so you can use it to manage your state application independent of the technology used for the UI the most important things of Redux is that you have a place where all the state of the application is stored so it's also very simple to see everything that is the current application state in one place and from a debugger like this one I'm currently showing the state of my application and if you are interested for example in the state of the map you have an object that is called mapped we managing eastery so we have the present map that we can also have the past and future maps in the present web we have several attributes I don't know if you can see it I'm going to make it a little bit bigger so in the present map view for example at the current Center the coordinates for the center you have the room and this is automatically available to every component and plugin of your application so you can interact with the state to read it from this place and also change it the way you change the state is sending events to the system basically create GS together with Redux works with a particular event system where everything that happens on the webpage for example if the user clicks on a button generates an event and then there is a sort of dispatcher that takes the event and applies the business the business logic code for that kind of women even and that updates the state for example you can see that now we are at zone five if I go back to the application and do a zoom in operation I switch back here I can see the Dow's zoom is 6 and that happened because of these let me see action where is it here you have ear only on the left get the list of events that are that are allowed by the system so for example I did this one change zoom level with the new zoom of 6 and the state changed this way this is a very powerful debugger that you can use with every react GS and Redux based application basically but in particular to form of store - this is very useful when you have problems bugs and stuff like that - to understand what is happening because it lets you basically see everything that is happening all the events that are on how the state of the application changes and stuff like that ok ok good anymore question one question regarding the plugin yes indeed eight people list of plugin are these plugins a superset of all the plugins that are available in the three Mac mapping library the t-shirt or other any plugins that are specifically created by masters with support any map library okay most let's say 99% of the plugins are not dependent by a my pin library so our pure map store to code because well you can imagine that supporting three different mapping libraries at the same time means so that if you want to do to write different code for all the libraries it's a big amount of time to do that so if we need to write every piece of code three times for example because now we support three different mapping libraries we need too much time to do that so our basic decision is to implement wherever it is possible all the plugins independent from the mapping library I can go back to the source code if you have a look you can have a look on get up on the repository of maps or tool if you are curious but basically all the code that depends from the mapping libraries are inside this folder components map everything that depends from an apple every is here so we have an implementation for leaflet of relation caesium everything else that is out of this folder is just JavaScript code for example let's do something in practice the plugins for jump zoom plus and zoom ins are not the controls for leaflet or controls for of the layers are just simple buttons simple buttons in our case we use the bootstrap library to create buttons but obviously you can create but I swear em in every way you want so the mobster to code were what the mobster to code does is to create a UI that does not depend usually on the mapping library for example a button you don't need a leaflet control to do a button for zooming you can just do a div with the some styling and when you click on it there is an event the event that I show previously they change the zoom level the changes the state of the application so the zoom in the map object becomes six and then only the final bridge from mobster two to the mapping library so the map JSX component in this case can basically subscribes to the event is a listener subscriber method so whenever something changes in the state of the application the components can be notified of it so when the zoom changes the map component is notified of it and it changes the map elibrary zoom and everything works like that so everything you see here in the screen apart from the map itself and some basic controls that we are going to replace when we can so for example the bar scale here is a dependent on the map library but for example the scale combo box does not and as I said 99% of the component do not depend on the mapping library this is the way we can support many mapping libraries if we had to implement everything for 3 different map libraries it would be really an an amount of work that could be done in a couple of years ok so this means in future if any of the mapping libraries leaflet or open openly introduced some cool new features that will be available through the masters not automatically we we usually choose to implement the features that we that we need for our customers and so it depends on how many people ask for it and we are going to implement it that advanced feature uses the reason why I said usually we don't do what you were asking so if we have a leaflet control we integrate it in a map so - if we choose to do a different way if it if it is possible we try to re-implement the user interface of that control and just call the map in library for the real functionality the zoom control is the simplest example so if you need to zoom you don't read the button that use leaflet or Peleus code you just need the button and at the end the only part of code that needs to call the mapping library is the one that updates the bounding box on the screen so you only write that piece of code that one the one that updates the mapping library VBox expand and we implement just one single button that is good for other layers leaflet on whatever puppy library we want to use in the future do you have an example of this control so that you have four leaflet adjust to understand we have used some custom draw tools and clipping those which work on top of leaflet as a plugin so that was the reason why the question came around the plugin okay okay we probably have most of the functionality available so but if you have specific use case is also in in the following days you can send me those and I can have a look if they have an equivalent already in map store to or how is difficult to have that kind of functionality inside the framework good any other question okay let's go back here so we were talking about customization obviously every web application nowadays is responsive so it can works on different kind of devices in particular for for master to this means that all the plugins can have different behaviors and looks depending on the device or both using CSS and also conditional code a well do you need to support mobile devices for example in your application yes not in this current form because we have dedicated mobile platforms but our interfaces right now does not scale to mobile application okay do you want to have a 5 minute break probably Toro small engine in do you the smallest viewport that we support right now is the tablet okay we're saying if you want whether a quick break before moving on okay listen since uh I think the first hour is gone maybe it's time if I'm a notes more okay five minutes continue okay we were talking about responsive we already talked a little bit about that you can feel themes stuff like that so I'm not going to talk too much about it I think probably is time to see what you can do with the maps or two products I will do a quick tour of the currently available functionalities so you can already see if a plug-in for what you need is already there on or needs to be developed in any case okay let's go to the product first a quick mention to the fact that this is the stable website so where we deployed latest stable version of lobster too so it's not today so it's not the latest and newest version it's an in this case I think it's about one month or more hold but we also have websites where more updated versions are published basically every day more times a day because we have a continuous deployment procedure in in place we basically do a deploy of every commits that comes to the master branch of data on a specific website that is the same perfect with the dev dot prefix if you go here you get the very latest version it's been published probably some hours ago with our latest commit every time we merge a new pull request a Jenkins job our of our build machines runs all the test cases or the compiling stuff builds the documentation and stuff like that and then publish the new application on the developer website so this is the same application just with more functionalities this is the reason why I will use these for showing you what you can do okay let's start from the web GIS map viewer we'll go back to the on page later here you have several parts of the screen where you have different functionalities I will try to show all of them quickly obviously in the center there is the map we are building a map framework so the main topic is having them up on the screen that takes most of the space and all the rest is used to work with the map itself so for example we have here on the right bottom part a set of buttons in what we call the toolbar these are navigation buttons mainly so you have the ability to do zooming to go to the maximal extents and stuff like that all the classic navigation controls that you have in any mapping application we also have a 3d mode so you can switch automatically to using the zoom version of our application as you can see we also have some tutorials I am using the Italian direction I will go to the English one so you can better read if you want to just give me a minute also the ability to have different languages is implemented in maps or two and it's very simple to switch from a language to another one country we have the five languages that are directly included in the framework you can add anyone just to writing a text file with a property file basically with a row for each for each message that is in the system and the related translation in your new language so if we switch to English everything is reached automatically to English messages here is our tutorial that is called in some situation for example when you switch to 3d we you have some instruction on how to work with its reading mode but we also have a tutorial on the classic to the map and this is configurable so if you want to add new cards for your own functionality you can add them to the tutorial so your users will know about your custom functionality and it's very interactive so we will show you how to interact with a 3d map we show the use of the compass and stuff like that when you are good with it you can close it this is the 3d map tool as I said most of the functionality is available in all the mapping libraries obviously there are some things that are not that makes no sense having in some environments so the the UI is configurable depending on the multi library you can have more or less functionality if you have a look here we are a menu with some advanced advanced you can see there are some options if I go back to the 2d mode I got more for example currently we don't have a measure functionalities working in 3d mode this is what I was saying previously it depends on which kind of functionality is more asked by our customers and we in which environments so for example we decided that for now it's not worth to implement in a measure functionality in 3d so he is not there it would be probably in the future if someone's asked for it or contributes it all because we also assets obviously contribution for from external people and we add some contribution for from other companies that we have integrated in in our product and to continue with the functionality in the toolbar the toolbar can be expanded to show more or less buttons you can configure which buttons you want to see always which ones do you want to see all only in expanded mode and stuff like that this is everything of this is configurable in a JSON file I never show you the JSON files of probably time to have a quick look at it JSON file is basically where all the general application stuff can be configured obviously not the map itself because in map so - you can have several maps you can switch between them so the maps are configured as well but all the configuration that is common to all the maps and all the overall application can be can be configured here I will show you so only some of these I won't go into detail for all of them for example the plugins and that you want to use in your application are configured here and you can choose which plugin unavailable for example in mobile mode and a different set of one in desktop mode so one of the way you can customize your UI for mobile devices and your PC is to build a different set of plugins or plugin configuration for the two modalities to configure a plug-in you just specify a JSON object like this one the name of the plugin in this example map and some options to configure it let me see one simple one okay this is what I was talking about for example the locate button it's the one that you can use to move the map to your current location if your PC is enabled to give your coordinates to the browser it is useful for example on mobile where you want to go to your actual position and this is the way you decide for example if the button is always visible in the toolbar or only when it is expanded and stuff like that so everything is configurable in this JSON file all your UI so the plugins that you want include and the custom configuration let's go back to the application itself another important function is the ability to query the map so if I enable this tool I can then click on the map and add some information on the objects that are under the mouse position I can also be informed about the coordinates and also use a river geo coder to have an address I can choose to query my map using a different format here in the Settings panel I already used it to change between several languages I also have the ability to choose which format I want to use for querying the map by default we have a text format that is usually supported by all the WMS servers available in the world so this is the reason why we chose text by default but you can also ask for HTML the same result are shown in an HTML format or in JSON if you ask for JSON we have a template for showing all the properties in the JSON file but the template is configurable so you can also in the front-end I mean you can configure different different templates of also featured by feature if you want so for every feature you can have a different template or you can configure a generic template that overwrite the default one for all the JSON features it's up to you let's move to the other part of the UI we have a footer do you is quite new in this footer you have basically the scale functionality like the scale bar and you also have the possibility to see the mouse coordinates in different coordinate systems you okay let's let me shake this button here on the top is the locate button a chrome by default doesn't allow look locating functionalities in in the browser if you are if you didn't enable it on purpose so it's not enabled in this case but for Firefox usually disease is it enabled or on mobile it's available then either on the left bottom we have a big round selector where you can switch between the backgrounds that you are configured this is a list of a common background but you can add new ones or remove the one that you don't want use for example you can use being background Google OpenStreetMap or also your own WMS you can configure any kind of layer to be part of the background selector list and this is another example where we have a different behavior between the desktop and the mobile I will show you the mobile version of the same application just a moment I'm using the Chrome emulator to show the same application in a mobile see the UI is similar but not exactly identical for example the toolbar here on the right doesn't contain all the buttons and also when you have collapsed it there are a small set of it available the program selector difference is that in when you have a limited space we chose to use a vertical layout instead of horizontal and also to have a set of arrows to show only a limited amount of backgrounds and be able to scroll on them to show more so you can really build something that is very responsive using plugging and plugging configuration and officiating them between mobile and desktop these modes mobile and desktop are just names you can be ro modes and be by them two different configurations so it's just up to you a very configuration you want for your application and how to use them by default you get two different modes for desktop and mobile cannulas would you person would be possible to rock this one in so that you then load from App Store sorry I didn't get you it would be possible to to roll this yes my pal my pal after the CC now so in just web app Oh show you me in a native mobile yes okay well this is a web application at the moment there are technologies to build a real native application like react native for example that is very similar to react the yes that is for the web but allows to build application that are really not if so they work on most of the mobile platform I as void Microsoft and stuff like that as I said react native is similar to react yes but is not exactly the same so if you want a real native application you have to build another different framework you can probably use part of the code not all I'm not sure about the percentage of code that can be reused for sure whole the business logic and it is not dependent on the browser itself and for example you cannot use the mapping libraries because leaflet and open layers just work on the browser they don't work on a native environment so I think one of the most important parts of this kind of frame or so the mapping libraries needs to be rewritten we can be the wrapper around a mobile solution for mapping but it's not available in the moment ok ok let's go back to the desktop version just let me load okay just to finish related to the layers that you have on the map here on the left you have the table of contents so here you have the layers in a sort of tree this case we have a very simple map with just one group and one layer inside just notice this table of contents part has been or factored reviewed recently so if you add a look at map store one week ago probably now it's quite different because we did a complete UI refactor of this part so there are more functionality available at the moment and also the UI the look and feel that say is quite different but basically from here you can interact with all your your layers you can click on one of them and make it feasible or not - and do some operations like zoom oh let me go to different part loom on the layer or change some properties of the layer currently we can change the title also a bit in different languages and move it to another group let's say we want to add another group then we basically rename the default group - to another we can choose the level of opacity of the layer and we can choose some rendering properties like having a single tile request for WMS or doing tiling request using the cache or not the format for the layer in the map if you want to use a PNG PNG 8 image or jpg for example give all the format supported by WMS for this layer can be chosen here we can switch the style if the layer has more than one style available in your server for example and stuff like that we can also remove the area we can work on alphanumeric data we will see in a moment but we can also add new layers from here so the table of contents is configurable not only from an administrator point of view but also the final user can add its own data on the map here with the head layer we basically have the ability to browse one or more catalogues that are available in the best product we already configure three different catalogs with two different three different kind of protocols all of them pointing to the same due server instance basically but one is using serious W protocol the other one is using WMS and another one for W ml w mts services we have so support for catalogs using all these three formats country but new kind of protocols can be added doing some developer work if you choose cutter for example WMS you can search on the catalog and get a list of valuable data for you can also filter the data doing some search and then add the new layer to the map the new layer has been had here we can move items in the talk so that we can decide which data goes over the other we can see the legend and we can also do some filtering here of the talk imagine that you have a very long table of contents if you need to go directly to one layer you can filter here and just show there was that are matching the current filter and in addition to that as I said we can also work with the deal for numerical data so web story is not only about mapping we can use all the Odyssey protocols to work with spatial data also wfs is supported if we switch to alphanumeric mode we have a grid here on the bottom of the page with data from the selected layer we can go back working the data through pagination we can select data and see them highlighted on here on the map we can zoom to a particular record we can also filter data doing some matching on a particular attribute you can you live in the VFL it doesn't matter these are jus several layers so it can be a shapefile it can be party i guessing can be in oracle everything that can be served by the server and user by the WSS protocol in this case is justified is a shapefile with its DBF the states layer that you find in this geoserver sample data when you install it but you can add your own data whether it's a database or a shapefile or any other format supported by your server or are also other service not only just entered obviously map server any kind of W and W FS server is okay and you can export your data in some different format for example in country we have the CSV and shape file but we can add basically the format that our support by wfs such as DXF and geo package and other formats supported by w FS can be exported from here just needs to be configured and we can also do some advanced searching because with the filtering capabilities you can do simple filtering for example search all the states with Carolina in the name but if you need to do complex searching you can use the advanced search functionality it's basically a query builder where you can add new conditions can choose an attribute or you should use the English version sorry I switched to the target let's go back to English okay here we are as you see as reaching from my language to another doesn't reload all the application most of the state was maintained so it's worked very quick to go back to our search you okay okay I chose live but I should have chosen I like sorry about that you you okay obviously this is this was a very simple search but you can do more complex one for example you can add a special filter then within say session sorry and we compounds the same filter self-assertion currently this is not possible but is a nice thing probably we can add it in a later version the ability to to save searches okay okay you can for example do this oh sorry gone yeah additional question here if you just speak about execute filter right and if you click filter search that means it will be it was the only table right so with maps with responders out but on the map they receive the whole state is under development right now he has a developer that is working on it today the ability to filter the date on the map accordingly to the filter you add on the table so your very own the other things probably tomorrow or or early next week it will be available and the additional question it may be a little bit late but still here regarding release management suggestions after every release we have to upgrade our library also read and if it is your application it is developed like NPM package or maybe any other packages that we can reuse well for now we didn't publish the map so to framework as an NPM package this is something we are probably going to do in the future what you can use if you go for the for the API version is to use our online API or publish it on your own server but there is no NPM packages for now we ask you to download the source code a and let's say integrate it in your bill the procedure ok s was the lion powder yes in prod just a moment well this is an example of a product from another company that used an integrated basically map store to in their own product to be build a client for QJ s basically with this client you can publish on the web let's say projects that you do in QJ s then you publish your map and your data and you have a web client that automatically reads the the published data from QJ s so you have basically a web map viewer for a QGIS project and you can also use some qhs QGIS services like the printing service so this has been customized using the master 2 library to add support for other services like the QJ s printing services and it's a good example of how maps or two can be used with different backends and also customizing the look and feel and stuff like that okay thank you so additional maybe moment questions that came from the mind is regarding filters and additional layers for example we blend so we let's maybe from 0 point I opened map store in in web right here on your site then I added some filters in or somewhere there and I want to come to that state for example in two three five days later and not to configure it one more time so there may be my book those in May the main project is to have some state yes I'd must or in your cloud to which I always come back and play okay and that for only user by user base I imagine so it's something that the user saves for for himself and then can go back to that particular state and move on from that yes yeah it's interesting as I said probably is just something that can be built on the other question so having the ability save searches well the technologies for in particular redux you have seen the state the bugger that I've shown previously that's the place where everything about the castle current user interaction is saved so if you basically save that as a JSON and this is possible currently we when we say the map for example we say part of it not everything but we can save more in and you can save it for example in local storage or on an external database using services and stuff like that and then you will have the same the same point replicated when you go back so it's something the technology make very easy for you so thank okay if there are no more questions I can try to finish the I as doing this passion filter so I chose for example a rectangle filter let me redo I can choose a rectangle and search here I will get no results because we are combining re Arizona with the filter that doesn't include that its owner so I shouldn't get results and that's it so we can build a complex filter using the advanced query filter so you have the choice if you just need something simple you can filter directly on the columns if you need to build something more complex you can use the advanced search to combine filter on attributes and you can make them complex so for example you can have or and boolean condition and also add group of operations so you can combine filters together to build a final query that is very similar to an SQL where closed including also special filter conditions and is a good suggestion to make these savable storable some way because probably someone will build complex searches and doesn't want to create them every time okay let me see if there is more that I can show you on this part probably not good I think the top management as has been explained so we can go to the last part of our viewport the one on the top right zone here we have a set of tools so the first one is a geo coder so I can write here for example master Rosa that is the place where we are located and I will get a list of result this is using the over Street Band Baaja coder but it's configurable to use also a services not only one you can configure more than one service and for example if you have your own database of addresses that can be used in addition to the home base treatment one or in substitution of it obviously we can zoom on it and add the related geometry shown you have the ability to go to your own page we will do that later you have the ability to log in because some functionality is all available to log 18 users we currently deliver with the map store to a small database internal database let's say that can be used to store user related stuff like the available users groups and stuff like that and also to store the maps that you can save from the application these are small database is called the do store and if in java technology is developed by a solution using java technology the set of rest services to interact with it it's automatically installed together with the map store if you want to because we chose to basically have master to concentrate on the front end so it's mostly JavaScript code but there is a small back-end so that is usable out of the box but it's also easy to replace it with other backends other storage mechanism and so on for example recently we made some integration with the geo node that use a completely different environment so it's Piton based as its own set of services database storages and so on this is because the backend part of Master 2 is so small that you can replace it in a very quick way there are only some quick calls at the beginning of the application to load the configuration data from the internal storage so the map configuration on users for authentication purposes and stuff like that and all the rest is implemented on the client-side and can interact basically with any kind of services obviously the OGC services like SS that we face but also other services if you want to build custom applications also you can integrate your own system for authentication so you don't need to use the internal storage for users and the internal services for for authentication you can use your own and you can integrate it if you don't have one then you are good with using our own it's available out of the box so we can log into the system and when you are logged in you get some functionalities in addition the most important one is the ability to save the map because each map can be saved by users who are allowed to do so there is a complete permissioning system so you can create new maps and I decide you can view them change them save them and stuff like that I am an administrator now so I can do basically anything but it depends on what you are when you log in you can save them up created by someone else for example so we can log in for for sure we can log out we can change our password ACK we can see some information about our account there is a complete user management system we will have a look if we have some time and if you are interested in it the last menu is the one let's say with the advanced functionality so for now we have seen functionalities mostly related to navigating the map seeing some information doing some handling of the table of contents and stuff like that we have the most advanced functionalities in this menu for example the ability to print having a preview choosing the printing format etc etc you will get a PDF at the end for example in the other product qwc the princess air is what completely different we was using the QGIS server printing services while this one is using the new server printing based on based on matte fish we have the ability to load shape files let me see if I have one handy I can upload a shapefile immediately I can style it a little bit and then add it to the map the shape files are not stored on server these are loaded directly on the front-end and can be saved with the map when you save the map you can also save shapefile information that you had uploaded so its vector data basically that is saved directly in the map context and not on a server you can also query the vector data this is not information at the moment but if it has some information attached on it you can wear it let me see what else you can do you can obviously do some measuring I won't go too deep in this you can do distance measuring area measuring also bearing so angles if you have something that you want to seem in greater detail just let me know I can spend more words on it the tutorial that we have mentioned before just show some of the tools that are available and how to use them you can customize it for your own personal application you can share your maps because now we are I'm going to talk a little bit about the main functionality of the standard product so this product what can do is apart from the map viewer functionality that we have seen is the ability to create Maps configure layers to go on it then save them and share between the users that have accounts on the system so it's about creating building and sharing maps you can obviously use it the way you like but all the functionalities are mainly created to be able to do that one way you can share your maps is through a link so if you build your maps you save it you can create a link and send it to people so that we can see them up that you have created you can share them directly on a social network or you can embed them we already mentioned about the ability to use the JavaScript API to embed your own application but in addition to embedding the application you can also embed the configuration for the application so a particular map book this is particularly useful if you add a website where you want to publish maps but the website is not about Maps it has to contain some laps inside it and you can build it using map so - and then and that the map in the place you want in the webpage you can use two different ways of embedding the first one is a more classic one using an iframe the second one is using the API so you have example of both the year you can cut copy and paste the code from here to your website and add the embedded version as I said you can save your map and you can also have a look at the output and one more thing that I have to say is that we have been to recently a documentation website so all the documentation for maps or to is a value from here currently is mostly developer documentation and we are going to add also user related ones and also for the developer documentation needs under heavy work so it's now not really complete but we are building more and more every day so here you can find some guides on for example out the plugins architecture worker you can be into your own plugin or you can configure them and you also have a reference for the framework is not complete as I said but there are section for example for the plugins let me see what they are maybe here you have documentation for all the plugins the ones that is already documented the other ones will appear one by one with the example of configuration properties that you can use to configure and stuff like that okay just to complete to the tour I will click the on button because basically in the master to product you have two main pages the first one is this one the map viewer the other one is the on page in the on page you have the ability to see the maps that are available and manage them now that we are logged in we also have the ability to create a new map we can search for maps filter them and we can manage them so for example we can create a thumbnail we can change the scriptures we can manage permissions as I said I can create them up and decide you can have a look at it you can change it and stuff like that obviously we can remove it or we can just display it the way we are used to if I create a new map I will get the usual product with an empty workspace so the table of contents is completely empty and we can fill it obviously using the catalog that's the way we can use to create our maps from here we can use one of the available catalogs or create a new one I can for example configure a new geo server URL or any other kind of WMS service save it something wrong in my now maybe it was also this one sorry about that day as I said this is the latest and greatest and probably there is something that is not working right now but it will be fixed right away by our our developers okay let's go back to the on page just to show the latest functionalities in addition to managing maps you can also manage users from here Travie you have a complete list of available users and group so you can create new ones and there is the available ones obviously it's up to you if you want to use if you need to use our internal user system or you want to integrate your one let me see if there is anything else I can tell you about this but maybe it's time for me to stop talking and just leave the room for for other questions

Channel: GeoSolutions Group

Views: 1,913

Rating: 4.7777777 out of 5

Keywords: MapStore2, WebGIS, GIS, GeoServer, OGC, WMS, WFS, WCS, OpenLayers, Leaflet

Id: Uc74YJOQbVw

Length: 100min 55sec (6055 seconds)

Published: Sun Oct 22 2017