WebGIS application development without any programming using MapStore framework and Geoserver-part1

hey guys welcome back to another video in this video we will gonna discuss about the web.js development without any programming if you want to develop a web gis application or you want to publish your geographic data onto the web gis so this video is basically for you so we will gonna use a map store web gis framework for creating a basically a web js application very quickly so if you have any geographic data with your shape files or you have data site inside the post gis or you have raster files so you can very quickly develop and web gis application you can basically publish your data online very quickly if you want to show someone you want to develop a application for your thesis or for your small project so very quickly you can basically only configuration you need to do so what we'll do basically uh so we'll need a container web container for basically installing the this map store deploying this web map store so we'll be using a tomcat java container for that so we have to install tomcat first and also we'll be needing a any gi server such as jio server because your data will be inside the jio server and then you can call any wms or wfs service using this map store so map store is basically a web js framework front end web gis framework so you can configure very quickly and you can readily you get the like built-in tools such as get picture info or you can even do the editing of the attributes or shape you're styling your data you measure and charts and all like attribute tables you can show the attribute tables you can create the charts so basically nothing is on the server there is no server side dependencies everything is on the client side so this is basically map store if you go on google and type the map store so it's a basically open source web gis framework developed by the jio solutions and it basically based on the open layers reflect react.js and also you can basically visualize you can visualize the data as a 3d basically you can overlay that on the 3d globe so it uses cesium and js for that and there's a lot of documentation is also available like user guide so if you want to like publish the data very quickly so you can use it as the as a product as an application directly and for developers also developer can also basically develop their own application based on the framework so first of all what we will do we'll download the tomcat so you go on the google type tomcat and just install the version 9 because we will be deploying the jio server also inside the tomcat and jio server is compatible with the version 9. so basically jio server this is the tomcat is the web server web container and jio server is basically the middleware where our data will be geographic data will go in the jio server and our client side is basically map store so jio server is in between the web server and your client side so just go on the google type the tomcat click on the version nine and here you can [Music] download the windows service installer so in my other video also i have basically shown how to install the tomcat and how to deploy the user inside there but very quickly again i will do that so after downloading it just you have to double click the exe file and just go and click next next just check this host manager examples next here you can change the port so you can let it be 800 but i have installed several tomcat basically two three i think tomcat on my machine so that's why my a two eight zero eight zero eight one eight zero eight one and eight zero eight supports are already running the tomcat so i will install it on eight zero eight three and you can give the name like nine point zero five you can give any name to it and just give the username and password also and just it will install i think in few minutes in the matter of seconds it will install so you can click on let it be like just uncheck the show readme and you can let it be checked run apache tomcat just finish it so now it is starting the service of the domcat so if you click here your service has been started so very quickly we'll go on the browser and just type localhost eight zero eight three you have to type your port localhost colon eight zero eight in your case it may be eight zero eight zero eight zero eight one it depends on you so like that we have successfully installed the tomcat now we will deploy the map store and your server both inside the tomcat so just go on the google type the jio server go download and you can download click on the jio server you can now you have to download the web archive version so i have already uh downloaded it like here is my jio server you just copy it and just go inside the program c drive program files apache tomcat and there is a folder called this 9.05 which we have given the name and here inside the web apps you just you have to copy paste your var file here and similarly what will do so now you can see it has created the folder called jio server similarly we'll download the map store you have to go on the google just type map store let me show you just type map store on the google and just go in the map store too [Music] and i think here below you can click on the quick start [Music] and you can go on the release page or download the wi-fi from the latest release click here and here there is option for map store dot var so i have already downloaded it like here is my map store. war file so you can copy this bar file and you can also similarly paste it inside the tomcat web apps folder [Music] like this so now we have to restart the basically tomcat let me check with this you're able to see the jew server right now okay so we have to restart our tomcat then we will be able to see the [Music] just you go on there yeah just here you just stop the service [Music] so now our service has been stopped so again we will start the service so now we have installed the tomcat and then we have deployed both jio server and map store inside our tomcat so just we have to refresh it so like eight zero eight three your poor slash jio server so you should be able to see the server application and similarly for the map store if you want to see just you have to type here juice localhost 803 map store [Music] because we have restarted the server so it may take a bit of a time so now as you can see we are able to see the jio server home page and also for the map store so first we will see the jio server because some dummy data is already there inside the server by default some data is already loaded in the jio server so you can also load your geographic data so whatever data you want to publish it should go inside the jio server so you can publish your shape file raster file post js database inside the jio server if you don't know how to do that you can go to my earlier videos i have made several videos on that how to publish your shapefile you have to basically publish a shapefile and restart inside your server so you have to create a workspace then you have to create a store and store you have many options such as shapefiles post js database or jiotip files if you click add new store here so whole lot of options are there raster source vector vector data source so finally when you publish your layer you will be when you go under the layer preview so your layer will be listed here so like already there are many layers are already inside this if you click here open layers so like like this you should be able to see your layer after publishing it's like this is the usc layer [Music] so basically this so basically this is our map store so if you type on localhost call on your port number slash map store so you'll be able to see this home page of the map store basically so this is basically your client side uh so just you have to configure it to publish your data basically to visualize your data onto the portal so what you have to do here uh just click here and just click on login so by default the username password is admin and password is also admin so username is admin password is admin just sign it so now here you you are able to see three things one is new map new dashboard new jio story so in this video we will i will show you how to create a new map even you can create a dashboard and use story but i think maybe in the later video i will show you so this is framework is basically using open layer leaflet and react.js so just i will click on new map now this is the home page this is your basic map so now you can add your own data in this page so if you click here there is option for add layer just to click here so by default it is coming it is asking for some service like jio solution your servers uswms so this is basically the access in the remote jio server but you have already installed your jio server like here i've already shown you so how to load the data just click on the plus button add the select the service like wms or wfs i will select the wms um just give any title like i will give the blue my gio server wms you have to give the url so just this is the url like localhost 8083 this is the port number then slash geoserver slash wms request equal to get capabilities just save it so now your service has been added now you can add any layer inside the user or so whatever layer you will publish inside the juicer will be listed here like when i click new say here or let me search directly your layer name population so like this where i am able to see this usb population which i have already already shown you the same layer will be added just click here add button same layer has been added onto the map like this you can add the another layer also multiple layer you can add let me go for another layer usa so the second layer has been added so i will close it now so from here you can zoom in zoom out like this also what you can do basically let me switch off this one layer like this you can add another service like if you click your add layer you can add the wfs service also like i will add another service i will select wfs and let me go for title my user wfs you can give any name and just you have to similarly give localhost 8083 geoserver slash wfs so it will load your wfa service and you can again search population to this layer so i'll show you what is the difference between these two like i will close this so now you can see [Music] so let me remove this layer first i will show you only for this layer so as you can see this is my wfs this is the actual feature basically and this is wms means image styles are coming non-actual feature is coming the data has been served in the tile format basically if you click here you will be able to see the information about the data like highlight feature if you click here you will be able to see the feed that i have all the attributes here similarly for the wfs layer also you can do that okay [Music] so i also drop this i will switch on this so now i will show you how to configure and how to use the other tools like if you click here you will be able to see the legend of the particular layer like here sorry here and you can change the opacity of the layer from here and if you click on there you you will get the load of options are here you can zoom to the particular like here so it will zoom to the particular layer extent you can select the select layer settings so you can change the title from here a lot of things description you can change about the display means you want to see the tiles in which format what is the tile size opacity a lot of things you can basically change here then you can even change the style of this layer like here you can click you can basically change the style how layer is looking like this so you can select in default polygon so it will show you like this population states to show you like this to show you like this so basically what you can do you can edit the style you can change the sld file or you can basically switch it to the visual mode so you can change like this so whole lot of things are basically available you can basically give the different style you can even change the styling from here i will not change the style i will little bit like this only and even you can create a new style base sld so all those things you can do here then feature info you want to disable them basically you know on click you don't want to get the feature info so it will not give you the information and this is the format you how you want to get the feature so like if if you select this text one so you will get the feature info like this if you select the html one so you will get the feature in this kind of format basically html kind of like this format or if you select this one so you will get this in this kind of format so let me save it like this so whenever i will click now it will give me the information in this format and if i will select this highlight feature so it will even highlight the feature of this one okay so i will close it now and further there is a option of like create a widget means you can create a chart so you click here so you want to create a bar buy your line chart let me create a bar chart so it will ask you about the attributes on the x axis so let me give the state name then attributes on the y axis let me give the persons and you can select this one color of this one then you can click next you can give the title usa population and you can save it so this is how you can add the chart also so whenever you zoom in it will change the chart according to the number of feature inside the map so you can basically publish your own data inside the your server and just call it you can even create a graph and you can basically create another widget called any even table you want to show the attribute tables like so it will it will add the attribute table also give it next you can give any title let me give this and just add the widget so now it has added the attribute table also okay let me just reduce the size of it a bit like this so you can basically collapse these widgets also like this even here you can basically see the data show chart data whatever data is showing in the chart you can see in the tabular format you can download download the data in csv format so all this thing you can do [Music] so these are the widgets you can add basically so let me just collapse all these widgets further you can basically compare it you can swipe the data like this here there is another option the spyglass you can see data like this then now even you can basically do the editing in the data just click here on the attribute table after selecting the layer here just click on the open attribute table [Music] just synchronize it so whenever you select on this attribute your feature will be highlighted here as you can see here this one this feature has been added highlighted now you can even basically edit the attributes like you just go on the edit mode so you can basically change the name arizona one two um you can change this one value also anything you can give and further you can basically save the changes okay so it is change the attribute as you know one two it has changed the attributes here also now even you can basically create a new feature also [Music] uh just click on the uh edit mode then add new feature so as you can see a one row has been created now add shape to the existing you just click here [Music] and just to give any name let me give test and let me give this abbreviation tt and person let me give any value okay now you can save the changes so as you can see now new feature has been added here okay so like this you can do the even editing so just close it so now you can see when i will zoom in zoom out your new feature has been added now if i click here you will get the information about this feature so like this you can basically do the editing also using this further if you want to delete delete a particular feature so you can very quickly editing mode let me select this feature so here is option for delete selected feature delete geometry anything let me go for delete picture so now the feature has been deleted okay so like this you can very quickly do the editing on the map basically this there is no client client side dependency you can do everything on sorry no server-side dependencies everything is done on the client side so this is a client-side framework you can do any all these things so like you are able to add the widgets you are able to do the editing so n numbers of layer you can add here basically these about the styling and everything and graphs [Music] further you can basically even do the measure also like you can measure length you can measure area here there is option for that and measure bearing also basically and clear measurement you can export the data to you json and everything and further basically also you can basically open [Music] the shapefile directly here like you select import here so there you select file so either you can directly open the geojson format data or if you want to open a shapefile data so the shapefile data should be in the zip file like i have this zip file or all the shapefile and associated files are inside the zip file so it will open the data it will asking something what would be the stroke and what should be the fill value let me go for it i will select this one okay and i will finish it so as you can see now this is my vector data which has been loaded so like this you can even your local uh file also you can edit okay so you select this file and you can click here so now you'll be able to see the attributes about this file also so what i will do i will remove this file it's a quite heavy file let me delete this also and also there is option for like 3d if you click on 3d so your data will be rendered on the globe like so it is using the czmgs library for that like this is the data so i will again go back to the original one so like this you can do basically very quickly as you can see you are able to now just when you have added all your layers and everything your charts and everything what you do just you save as click save as and you just give any name like i will give you my map so it has been saved now so you can basically share this link to anybody or you can basically either click here share so you can basically give this qr code or this link to anyone so directly if you open this if you have deployed everything on the server so this map will be directly if you share this link so that person will be able to see this data set directly so like this you can add n number of layers and then you can share the link and everything uh so now if i will go to the home page i will leave it so as you can see after saving it there is option called maps one my map basically my map has been saved you can save n number of apps you click here directly that application will open here so whatever layer you will add all the layers will come here you can further add so many layers okay [Music] like this you can create a dashboard also in the later video i will show you how to create a dashboard basically in dashboard what you can do to create new dashboard like skip the dashboard will be empty one by one you have to add widget like map you want to add suppose add a map you select [Music] empty map you can create empty map then you can add a layer to it no it is seeing no layer then you can add a layer to map you can search like usa again i will add the same layer [Music] so now [Music] this is the map has been added in the dashboard so like this you can add n number of digits so the later on in the video i will show you you can add the charter chart you can add the basically counters and everything a lot of thing you can add in the dashboard so in the later video uh i will show you how to do that so in this video i think that's it from guys from this video so i think this video will help you you can already you can always go to the uh user guide of map store like here there is two kind of guide user guide and developer guide if you want to directly use this framework okay as a product you can use it so you can go go through this exploring this managing and all this thing and you can even use the developer guide for developing your application according to you so you can even develop the application using this web gis framework on your own here you can search also a location i will search delhi so i forgot to tell you here's a direct search is there so it will zoom into that so i think you can go through this all documentation you can further develop your application also so i think uh that's it from this guy from this video guys i hope this video will help you please like the video give a thumbs up to the video and do comment about the video and if you if you face any problem please let me know in the comment section i will try to help you so thank you guys that's it from video thank you thanks for watching

Channel: OpenGeo Lab

Views: 16,587

Keywords: WebGIS, MapStore, Geoserver, Tomcat, Leaflet, ReactJS, webgis development using mapstore, how to develop webgis using mapstore, mapstore for webgis

Id: 62g1hSr3CpY

Length: 27min 24sec (1644 seconds)

Published: Wed Aug 04 2021