WebGIS Development from scratch using Geoserver, Openlayers 6 and Postgis

so hello friends welcome back to my channel so today in this video also i'm gonna talk about webgs development only like in the earlier videos i received lot of messages in the comment section that they are facing problem in the query panel in the drop downs or get feature info so i thought that i will make a video that how to develop a web gis from the scratch like from downloading this softwares installing them like tomcat jio server and post gis and also like downloading the apis like open layer api is another jquery and all that so what i will do i will show you the all the links from where i have downloaded the software and how to install then we have to put your libraries and you have to put your html file and how to get the output so first of all i'm going to show you the already i have downloaded which i'm going to show you what are the softwares we're going to download like apache tomcat host gis postgresql open layer uh library jquery so these are the basically libraries where these are the softwares you're gonna download and then we're gonna see how to install them and how to develop a web js from the scratch so this is gonna this video gonna be very long i think so you can skip and wherever you uh you're facing the problem you can you can basically see that part only so like first of all we're gonna download the our web we need a web server so we're gonna use uh apache tomcat so if on google if you type tomcat and also like you can click on apache tomcat so here one one more thing we no we're not gonna use apache latest for uh tomcat latest version 10 we're gonna use nine so like right now because we're gonna deploy the jio server inside the tomcat so right now the latest jio server isn't is not compatible with the tomcat 10 i've tried several times but on the on the google i searched actually so i found out that they are not compatible so tomcat 9 is compatible with the jio server so what are we gonna do we're gonna download the tomcat version nine so on the left side you can see there is a tomcat nine you can click on that and here you can find the 32-bit 62 this windows service installer you can click on that and you will be able to download the apache armchair so i will cancel this because i have already downloaded this so now what we will gonna do we are gonna install apache tomcat so first of all this this is the version so just click on the exe make it next next download host manager examples check on that next so it will ask you the port number like eight zero eight zero by default it will take but i have already installed i have to i i already two copies of the tomcat installed at one at eight zero eight zero one eight zero eight one port so i will change it to eight zero f two if you don't have any other service running on eight zero eight zero you can direct you can leave it like eight zero zero but or you can change it so i am changing it here eight zero two here window service name also you can change like i have already installed uh tomcat nine so i will change it to like this nine point zero point four four you can change you can give any name to it either you can leave it like that only and here you can give the username password according to your need so next it will take the java you need you need to have a java on your machine if you don't have just install the java also this is the prerequisite of tomcat and click next and install so now it will install the apart it will take either hardly one or two minutes only it's very fast so by the time it is installing yeah it has already installed so either you can start run apache tomcat directly also otherwise you what you can do if you go on and you can when you go in the program files like c drive program files apache so as you can see i have already installed 9.1 version so but this is the version i have installed right now 9.0.44 so i will go inside this so what you can do you can you can go in bin and you can click here and here from here you can start the service inside the bin folder of the tomcat so before that what we will do we have now we will deploy jio server inside the inside the tomcat so first we will download the jio server so on google just type jio server so there are a lot of versions here zip file and all these things but what we will do we will download the web archive dot var file click on this so it will automatically like it is saying your download will start shortly so i have already downloaded it so as you can see here you will get the zip file two point nine two point one nine point zero dot dash or zip so you will get the zip file so i will cancel this also as i have already download this now what you will do you just unzip this this is geoserver.var right so first of all what we will do we will check whether our tomcat is working or not so we'll double click this like apache software foundation tomcat bin just start the service service has been started services started so if i go local host you should remember your port i have given 808 to if you go on manager app it will ask the password which we have given the username and password there while installing we just give that username now for deploying jio server what you can do here there is option of select var file to upload you just choose the file here and you select the var file from desktop and you can deploy but before that one thing we need to change like our jio server file is more than i think the size of the var file is more than 100 mb i think it is as you can see here more than 100 mb but uh tomcat by default it will deploy up to i think 50 mb or 19 90 mb i don't know so what we will do will go inside this program files apache tomcat and web apps after that manager web inf there is a web.xml so what you can do you can edit this file and there is a you can search this file max this this text basically makes file size so it is i think 52 or mb or something so what you what you can do just make a two on the left side and here also two so it becomes 250 mb so now you can deploy the var file up to 250 mb earlier it was 50 it was 50 mb only so if you deploy directly you will not be able to deploy your server so you need to change this xml file now i will save this file xml and now again we have to restart the service of tomcat go on program files apache tomcat inside bin this just stop the service because you have changed the xml file so you need you have to start the service again now again start start the service yeah service has been started so i'll refresh it okay now i'll go in the manager app and now select var file to upload choose file desktop webgl software's jio server dot var and just click on deploy so as you can see you can see it is now deploying the jio server it will take i think one or two minutes maybe maybe more than that so when it will be deployed so the in this table there will one row will be added with the name of jio server so basically these are the two main software which we need to download and by the mean time it is uh deploying what we can do we can download our api such as open layers so we can go on that and open this org so on the home page you can find the latest open layer version 6.5.0 you can click on that and you can download this zip file version 6.5.0.0 includes all above plus examples also so you can click here what is downloading i think i have already downloaded this file so what i can do i can directly i have already downloaded this so i'll copy this here only version 6.5. so we have downloaded the open layers also let me check whether we have deployed you can see here jio server has been deployed jio server and it the service has been started so you can click here on jio server your jio server will be it will load the user or directly you can go on here you can write local eight zero eight two slash jio server so basically let me cancel let me check if something is downloading i will cancel it okay let me cancel this so now you can see inside the tomcat if you go inside the tomcat folder again inside web app so everything your application will be inside the web app so you can see here jio server or one more thing you can do if you don't want to deploy like this like browse and deploy what you can do you can just copy the var file inside the web apps just copy the bar file inside the web apps and we then stop the tomcat service and again is that start service by that we also you can deploy the user so your jio server is here inside now so yes okay so we have installed this also and we have downloaded open layers also and apart from this also like this current open layer does not have layer switcher so we will download the third party layer switcher so you can write on google open from github we will download so the this is the link walker made well layer switcher you you can click here so it will go on the github website and we will download this here you can go to code and you can now you can click on download zip so you will be able to download the zip file like this i have downloaded already oh well they are switcher master dots okay so we have open layers we have layer switcher we have already installed apache tomcat we have already installed jio server inside the tomcat and few other libraries we need like jquery ui and bootstrap these are basically for uh basically for the the query panel which we have we will develop for the drop down and all the in the later on as i'll show you the web page later on i will show you or otherwise right now i can show you if you this jquery api what you can do you can just write j query so here you can get all jquery ui download so from here you can download the jquery file you get the zip file like this so i have already downloaded the zip file this one jquery ui 1.2 12.1 and another one is the bootstrap so you can go on the google boot strap go download this version 5 or anything you can download here is option of downloading you click here so you will download the bootstrap 5.0 whatever in the zip file so here already i have downloaded this so now we have download one more thing like post gis also postgresql we can also but with the in this tutorial what we can do we can use without using the post gis or postgresql also we can develop this application but in the later on video uh in the later next video what i'm gonna show you that how to without jio server also you can develop a web js application where all um gis data will be coming from the postgis only without your server so post gis also i'll show you from where i have downloaded and how to install this postgresql and post js basically post gis is the special extension of the postgradual by the use by using that you can uh save your you can basically upload your shapefile inside the database store you can store your share file so you can go on downloads and here there will be option of windows and there is version 13 so you can just click on download the installer and the latest version is 13 you just click on download here windows 86 basically 32 bit and 64 but you click here you will be able to download the postgre sql and then post gis also just click on download this is the extension of postgresql you need not to download postgres when you install the postgresql it will the after that it will there will there will be one option called download extension from stack builder so it will download from there and then you can install purchase or otherwise you can directly go on post js windows download you click on download sorry windows download and if you go down there will be option yes here is a pen installer file click here so it will ask you which for which version as we have downloaded the 13 versions you click on the pg-13 and you can download this dot exe file the pos js also you can download from here so postgresql so now we have downloaded all the softwares apache tomcat we have downloaded we have installed it we have deployed the jio server inside that we have downloaded the open layers and the layer switcher for open layers and jquery bootstrap and for the software we'll click on postgre sql.exe file make it next next next next now it is asking the password just give the password it is asking the port number it by default it will take five four three two i think but already i have a version 11 gre installed on my pc so that's why it is taking the 5433 you need not to change the port let it be 542 5432 now it will start installing the software it will gonna take some time so i will have to wait i think it will take five to ten minutes to install the software so now the installation of postgresql has been completed so like it is asking you would you like to launch the stack builder so you can download and install the post js through stack builder also or you can download the setup and so i'll show you how to you just check this and just finish so now it will launch the stack builder now to launch the stack builder now you select here postgresql 13 like i have installed the two version so that's why it is showing two so in your case it will show only one like postgresql 13 then you make next then it will ask then it is showing the downloading application list what are the extensions or the softwares you can download from stack builder so you have to click here spatial extension then the version so i think you can click here and then next and it will ask you from where you want to download direct download and install just click next and you can click here skip installation either you want to download it or you want to install it you can you want to download it and install it so you can click here skip installation so you can manually install it to download in that path so whatever it is showing all the installation files have been successfully downloaded because i have already i think downloaded earlier that's why it is showing otherwise in in your case it will take few minutes to download the application then you click next here now it will install the post.js just click on i agree then you just click here check this create special database it will create one database inside the postgresql then make next next just give the same password which we have given while installing the postgresql you can change the name of the database also but let it be like this we'll create one special database inside the postgresql just click stop so now it will install the post json just click yes to everything whatever it does just make it yes yes now it is creating the special database so now the setup is completed just close and make it finish so now we have installed everything on our pc so we'll check just write eeg admin and click here we will see our o's pr sql database also you can check out your jio server like here i will write server i will close every other thing so here it is your job server by default the username password is username is admin and password is your server you can always go on the settings and you can change this password by default it is admin jio server inside jio server by default i think there are 1990 layers already available but i will show you how to publish your layer also so what we will do i have two shape files so what i will do you can directly publish from the your machine or what you can do you can upload those shapefile inside the postgresql then you can publish it so i will show you the later version how to upload in the postgis and then you can how to publish publish through server so these are the number of layers already available so i think it is taking quite a time to the first time actually and first time it will take some time to load but post postgresql database so this is our postgresql database you click on server so i have installed multiple versions so in your case it will only postgresql 13 will be visible to you you will click here it will ask the password which you have given while installing just give that password login so as you can see it has created the one database post gis 31 sample this is the this is basically a special database so what we will do we will create a new database you just right click on database create new database so it will ask you the name and let me give what should i give you give any name and then definition you can here from template if you want to create a special database if you want to upload your shapefile inside the database you just select this inside the template select this push j31 sample tablespace you can let it be pg default and just let any other thing just that would be like that and just save it as you can see there is one database called india has been created now to upload the shape file just search post gis okay yes [Music] here i have multiple version installed that's why otherwise you will get only one i have earlier version point 2.0 but i will click here this is the version 3. so yeah so you what you do first view connection details so you have to give the username of the username and password for your post postgresql database postgres username is postgres password is which you have given while installing it then database in which database you want to upload the share file so i will write india as i've created so it will ask you the localhost and port by default 5432 but i am changing it to 5433 because i have installed uh the version 13 in 5433 if i will make it 5432 so it will directly go to my another version of database so you need not to change this i am changing because i have installed it on 543 so i'll make it okay so connection is succeeded now add file so you can go wherever your ship files are there so i will upload two shape files um indian district boundary and yes state boundary just upload it this is the name of the jio uh geometry column you can let it be geom or i will change it to the underscore geom later i will show you why i have changed this because in the code i have you i have given the name the underscore zoom otherwise you can let it be like gm and in the code you can change you so like this here you can change the name also what i will do i will change this also whatever name you want in the database you can change that so what i will do here srid basically is i know because e psg code projection so this is in geographic lat long gcs so that's why i'm giving 4326 in your case it may be utm and anything else so you you have to give the srid according to your projection eps record you can go on google and find a psg code for your projection for your basically projection and everything now you just import it so it is importing now one file has been to file imported so now if you go back to your database uh just click on this india in schemas like by default it will go inside the public schema so click public and tables so you will be able to see the two india district industry let me query something this is a or if i make it district so this is the district file these are the columns are there and this is the geometry file okay so we have two tables we have the data here so now i will show you how to publish these two shape files in jio server so first of all you have to create a new workspace inside jio server add new workspace i will give it a name of india name space url save it so i have now workspace named india now one has to create new store so click on store add new sorry add new store so here there is you have option like what kind of store you want to create directory of share files directory of shapefiles means if you have your shapefile inside the directory you can click on here and you can give the name you can give the path of the directory so all the shapefiles inside the directory you can publish like this uh and but what i will do i will show you how to do how to publish from post js so i will use this option post js database for raster there is um other option like go to file you can publish so i will click here post gis new data source workspace select india data source name because if you're installing first time by default it will take the five four three two only just me you have to just you need not to change this i am changing because already one eleventh version of postgre is already installed on five four three two port that's why and database i will write india because the database here it is india this name we have to give then schema is public as i already told you you can create a schema also but by default then give the username and password so i will give it and just save so it is showing these are the four tables available inside the database so you can one by one publish this why first i will do i will publish india state i will click here and [Music] you can change this you can reproject the projection also but i will leave it like this just compute from data compute from native bounds and i will save it or you can change the style of publishing you can go on the publishing tab by default it is taking the polygon style like this if you see this if you preview this layer so it will show you in the gray color polygon but you can change this basically this is a style of you can create your new style inside your server and then you can give the style here you can like a lot of styles are available by default but you can create your new style for your share file and you can give here i will just save it then what i will do i will add another layer so what you can go on layer add new layer it will ask you from which store so i will india india so this green tick means your this this layer has been published now i will publish second layer same thing you can change the name if you want to change other by default to stick in your district then same compute from data compute from data if if in your case the cpsg is not coming just declare the apsg whatever projection you have used declare you can type because if you have if you have forgot to give the psg code while uploading to the pos gs database this will be empty in your case so you can write directly here so it will take that one and i will save it so now i have published the tool here so you can go on the layer preview and you can see india district click on this open layer see this is the district boundary it is coming in under clear current you can always change the style here this is state so if you want to change the style what you have to do one has to let me go to the styles add a new style you can suppose i want to create a new let me take india state like this only on okay you can edit the all already available style like i will go polly this style isn't basically xml it's a xml file so i can edit here like fill i don't want to fill it so i can remove this fill so you just validate it and save it now if you want to change the style of your layer you go on layer india state click here and under publishing tab you change the style from here by default style i will make it indistinct so now i will show you how your layer will look you just save it now go to the layer preview again you click on india state open layers so now your layer look like this so you can change the your style according to your name so i'll close this close this so now your layer whatever layer you have has been published through jio server and your layer is inside the process now i will show you how to develop a web gis how to basically put your data on the web now what you do first of all you just go in program files your apache tom tomcat tomcat folder web app create any folder inside this suppose i will create webg yes inside it like open layers this one jquery and bootstrap these four okay now i will unzip it one by one first i will unzip extract here this one now i will unzip this layer switcher and now i will unzip the jquery now i will use it okay for the bootstrap what we can do let me check what is inside i we need only only two file from the bootstrap so what we will do basically you extract here no problem but from the inside just what you do css you just copy this one and paste it outside and from js copy bootstrap.js and paste it outside now you can delete this bootstrap no need to keep and you delete everything from here okay this because you have accepted you can delete all these things here now inside webgis we have libs folder all the libraries we kept it here okay now i have created two html page inside the code is there i will explain this code also just copy and paste this code inside that web js folder which you have created you can give this name to anything like according to your name i have given it web gis just copy paste this to html file i will upload this html file inside my basically google drive and i will share the link inside the description of this video so i will first we will check this wms wfs query i will edit it with the node at plus plus so you can see i'll show you i have given the reference like localhost 8082 web libs version you have to check this folder name should be your uh this should be meshed properly like libs now i will open the slips folder so localhost 8082 webgis labs then version 6.5.0 cl os so this folder name is okay this is okay then ool dash layer switcher but here it is master so what you do just rename this to layer switcher because on my web page i have given it like this overall layer switcher okay now it is fine player switcher their switcher is fine this one is fine like in libs bootstrap dot min dot css bootstrap dot min dot css okay whatsapp min.js bootstrap.min.js then this jquery the dash ui.1.12 inside that so another way to check this also what you can do you can basically click on each and every link like this so you'll be able to see if it is loading it means it these libraries are at the right path and you are able to your webpage is able to access each and every library like this okay so my every path is okay this is fine this is fine resources fine this is fine so these all our things are okay so i will close this one by one now one more thing i want to change on this webpage just one or two two things oh i want to update this layer like india district is fine india india state is fine uh okay this i don't have layers so i will change this layer name to maybe so let me now run this page so what you can do you can just type local 0 to whatever your port is you have to change the corner webgis the folder name which you have i have given web gis then this page name of the page html page query.html so as you can see i am able to load all this page let me check whether this okay these three layers haven't as you can see here base my base map is osm these three layers i am fetching from jio server top states india state indian district okay this is these are the layers so if you install everything and this is my basically uh basically the query panel this is basically the legend will come this is the available wms layer if you click on this or whatever all the layers are available inside the jio server will come first time it will take some time to load now it is load but next time it will be okay so these all are the layers which are inside the jio server so whatever layer you publish through your server will automatically come here and you can add or you can any layer you can add what i will do let me let me remove one layer from there then i will show you just do in two later i have loaded the state file this this two times i have added and this is the register file so now if you click here if you want to add any layer another layer so you just click here top states add layer to map so it will zoom to that and there will be added let me go to some other this one so this is basically a wms service only okay and so this is it so it is it will add here also and you can see the legend will also automatically come here like states so whatever layer you will add automatically like let me go for tasmania roads so you can see roads layer has been added and also let me close it this is one year old the legend is also coming okay you can always already you can always like minimize this you can switch on switch off okay so this is the available wms layer for you and then get feature info option is there you activate this click on the layer it will show you the information about that feature here also i click here okay and one more thing this is the fit to extend i have given the extent of my india that's why whenever i will click on e it will go to my india you can change this extent according to your name or you can give the whole globe extent so like for one more thing i want to show you suppose you have two three layers at same place like india state and in your district like this switch down okay so you activate this get feature info if you click here so it will give you the feature of the two layers because you have switched on two layers so if you suppose you switch on three layers you click so it will give you all three as you can see here two times india state one time in register so if you switch off this switch off this and you click it will give only one so whatever layer are switched on in your uh basically visible basically not switched on which are visible on this map for those this uh this get feature info will give you the information about those so you can always deactivate this you just click on deactivate to deactivate that this is the major one you can click length okay this is for area and this is clear measurement and you can already or you can always clear from here i i'll show you from here here okay so now i will go to this one select layer this is my this is everything right now we have installed post js but there is no rule of those years as of now because this query panel and everything is from the made from the jio server wfs service and this is from jio zero wms service but i have installed this post gis here because in the next video i'm going to show you how to without jio server you can implement these query panels so that's why i just shown how to install the exposed gis so whatever layer available inside the jio servo it is coming in here so suppose i will let me go for india district only attributes i think first time it will have gid state name so let me go for district name then operator will like because this is text if you go for gid this is numbers are greater than less than it will come so let me go for district name and i will go for uh operator is like and i will type g and you just create load query what it will do basically it will find all the district with the name g it will give in the table the list here and it will highlight the feature here you click here so it will highlight on the table and vice versa also if you click here it will highlight there it is highlighting that side like this it will zoom it to zoom also zoom to that feature just click here okay um let me go like gid is less than i will make it to suppose to load the query so it will highlight the feature click here this is the basically feature query panel if you don't want to zoom it to i will show you whatever what code you can make it comment so it will not basically not zoom only it will select the feature it will not zoom to that feature that you can deactivate by yourself so this is the query panel from using the geoserver okay so let me check for on any another layer like pop states go for like suppose male greater than i will make it is highlighted this is basically this layer usa layer so it has highlighted the feature of these menu click here okay you can click here so you can run any query like this okay so this is one page and there is another page i will show you um [Music] this one is this wms wfa special query in this i have added one more basically one more tool like this is a feature query after that you can give this but you can do the special query also okay let me change this layer because this layer is not available in this so i will run this page also i will show you special query this is the webpage it's the same page everything is same you can do everything like this same and like you can add add two map everything is same um tiger poly tanzania tasmania state boundaries it will zoom into that it will add it will add the legend and everything so everything is fine here i'll show you upstairs my piece is quite slow not able to but one more feature which i have added here let me refresh this page first i think it is getting one more feature which i have better to select but draw like select by attribute otherwise everything will work fine fine like activate if you activate this you switch off only one layer suppose district so it will give you the information of one feature if you see switch on this it will give you the information of two feature basically if you had nine layers if you click here so it will give you the information about the nine layers available at that particular point so i will deactivate this i will measure is same okay you can clear here from here also so now the select layer is same let me show you again india district um district name i do like all the strings starting from eight will come here to show you you can select it like this like this like this vice versa also okay if you click on clear it will remove everything like select by draw select draw means let me go for india district select shape uh let me go for polygon i will make if you make any polygon here so what it has done basically it has highlighted all the features which are intersecting that polygon particular polygon okay same thing will work like this okay [Music] yeah it is working perfectly so i will make another shape such as square you can create square so it will highlight all the features okay intersect the square if you click here it will highlight the feature same thing you can you just clear it so you can clear that you can make a star so it will highlight all the feature intersecting this star okay so this is basically everything is coming through jio server only this fwfs service is coming from jio server if you see my earlier video view server services nothing basically when you go here if you select any layer like this if you go for layer preview any layer select here wfs this geo json i am using the geojson layer wfs this ghsn this is kind of data it is accessing everything attribute shape and everything and this is uh just clear it so yes um and this wms which is it is adding this uh this is basically the snapshot basically jpeg or png is the images of that only tile by tile it is not an actual feature but this is uh this query is it is querying the actual feature it is loading the actual feature so this is from json and same thing can be implemented from post gis nothing from joe server so in the next video that's why i have installed i've shown you how to install post js directly from post gis and using the open layer you can render your features from post js directly that i will show you but in that case we will use the jsp we have to use the java server pages back-end programming we we have to do so that i will show you how to do so this everything can be done using uh directly from post.js no need of jio server so what i will do basically i will upload as i will in the description of this video i will give the link of the each and every software from where you can download each and every api so you can download those you can put all the apis inside the libs folder you can see this video and you can install every software put this these two html pages inside your inside this tomcat and just you're good to go so roughly i will show you what is this basically code these are the links i have explained already these are we are using these apis then this is basically the style html body basically the body of full html page like this is the hundred hundred percent then map is basically this one title is basically uh four percent height means this this title this web js application is written this is the this is basically the title then map is this 80 percent weight 96 percent right this is the map this is my query panel this is legion so basically this is the html part all the basically the styling of the html page is like this is style then this is the html elements measurement type area length this is this one this drop down these drop down these buttons and everything and this basically this form this is that and from here from this javascript this whole code belongs we're using javascript here using open layers for that so basically this is my view this is the center of the map like like when you first time open it it opens on india so it will the center i have defined the lateral root longitude of the center zoom is five and also one more thing overview of map is there here it is overview map so this is basically this one view overview same uh that type of longitude then base map is open uh osm then overlays means these two layers india district india state i have added in your district india state i have added this osm base map then map we have defined a map we've added the overlay then map dot earlier base map map add layer overlays is the function to add the layers then another if you want to add another layer i have given the layer called rainfall you can give this name any any name again i have added the india state you can give you can add any other layer of your choice or either you can you you can remove this if you want to remove the third layer okay then mouse position mouse position means when you are basically moving your mouse the mouse this position is coming on the right side this is the mouse position then slider zoom in zoom out basically this is zoom in zoom out this slider also zoom in so then zoom to max extend this is for full screen you can make it to full screen like this okay then layer switcher this is the layer switcher means this one this is the layer switcher and this this legend legion function oh yeah one more thing for the region function one thing you you must do basically whatever when you are adding the learner so you are giving the title so always give this title similar to this name this is coming from jio server this layer image india state this is from jio server i assume localhost 8082 wms layers india and yesterday so basically i am just just cop whatever layer you want to add just copy the name from here in india district or india state this just copy this just give the localhost 8082 you can give your report joshua wms service i am using just give the layer name here and just give this name india state here title also title should be similar to this name otherwise your legion will not come this region in this map will not come if you change the layer the title if you if i will change this title name to something else like india's tier 2 or something else state only so this legion will not come because in this legion function i am using like that only like title the title name should be same as the layer name then i'm calling the region function then get get feature info function get which info means this this function this function on click you will get the information and like this via measurement this is the measurement all this code phase for measurement which are length measure area okay then this is wms layers means when you click on this this function is for this only as you can see wms this function and some other functions is a very big code actually an ad layer function is similar to that then these are for drop down layer name attribute drop down these are for these drop downs these drop downs okay attribute drop down then operator combo feature overlay these are the functions all the functions when you're clicking when you're querying the feature it is highlighting the feature so these are the all functions for that only this is the query function when you click here so it will call this function this query function as you can see function query this query function inside that i i'm getting all the values of the layer attribute and everything and i'm styling it this is the basically this is the require this url this url is going to the jio server and it is fetching the data fetching the data and this is the geojson the url is the uh this url it will fetching the data from this url and then it is adding to the map it is done basically it is dynamic then it is creating a table like this only and clear all button means this one this button so this is the basically page if you go through this page you will be able to understand and same for the special query one more extra function i have created like after query there will be one more function search for draw let me show you this is for drawing shape like draw layered up dot drop down and this is for draw shape circle and everything this is for that this code is for that okay this up to end this code for you for that so i will uh i will attach this to uh web pages on my google drive and i will give the link in the description so you can you you have download change in this vector only this layer names according to your jio server whatever layer you want to add okay these two these three basically one or two and these three either you can remove this part this third layer so the only these two things you have to change otherwise whatever layer you will upload on jio server automatically it will come in the wms from here from the wms from here okay so guys the that's it from this video in the next video i will implement the same webpage but not from jio server only purely from postgres i hope this video will uh help you like a lot of people a lot of i was getting a lot of messages that they are having problem in executing the page i hope uh this video uh from the scratch you can install the software and you can you will be able to run the code or you will be able to develop a web gis similar to this thank you hope you like it please give the thumbs up to this video if you like it if it if it helped you and share this video to your colleagues or anyone and you to your friends and your colleagues so thank you thanks a lot thanks for watching this video you

Channel: OpenGeo Lab

Views: 14,997

Rating: 4.937304 out of 5

Keywords: WebGIS, Geoserver, Openlayers, Postgis, Postgresql, Tomcat, GIS, Spatial Query, Query Panel

Id: eAQcBGMPQTk

Length: 71min 14sec (4274 seconds)

Published: Fri Apr 02 2021