WebGIS Development from scratch using Openlayers/Leaflet & Geoserver with feature query capability

hello guys welcome back to another video so today in this tutorial video we will gonna see how to create a web gis application complete webgis application using the open source tools such as open layers jio server and post gis database so in my earlier video mostly i have used open layers app as a open layers library as a front-end api but in this video we're gonna see how to create application using the both open layers and leaflet because lot of people are using leaflet front-end api these days because they're very lightweight but still i will say open layers is a much more complete library than the leaflet but yeah you can use any one of those because more plugins are needed in case of the leaflet but in open layers very less number of plugins are needed a lot of functionalities are already given in the open layer so this is the application which we're gonna develop this using open layers and this is similar kind of application using leaflet so as you can see uh so first of all let me just show you about the open layers app then i will explain one by one so uh we'll be using this kind of thing like web server is will use tomcat so this is a web server is for basically serving your application you can even use apache if you're using xampp also so you can put your application inside apache also and gis server will be using jio server for serving our gis data so all the shape files and raster layer will be inside the jio server and then front-end api will use open layers and leaflet both will see how to create the application using both the things and database you can use so this is optional database if you want to store your data inside the database then you use otherwise there is no need of that you can directly publish your shape files and raster device using the jio server and also yeah we'll be using the bootstrap for making tables and everything tables drop down and everything okay and jquery also we will use so these are the few of the things which we need to so whatever i have created application folder this this kind of folder like this is for open layers so you have index your javascript file style file and all the libraries are already there so i will zip this zip this folder and give the description in the link so you can just copy paste this application inside the tomcat or apache whatever web server you are using and directly you can run that similarly in case the leaflet also i did the same lip folder index map style dot next style.css file so just you have to copy this thing inside the your web server and you can ready to go so only thing is this why i'm using the this um tomcat because i will be using the var file of geoserver and will deploy so there is no cross origin error is there because if you if you install the exe exe file of geoserver.exe file then you need to change some settings uh to to basically get away with the cross origin or if it's a very common order these days i have made a video for that also you can see i will give the link of that video in the description how to if you are your jio server is in others are uh like independent and you you have uh your apache server you're using or tomcat any server so it is not inside the same same container so how to the always cross regionality will come so how to remove that error i have made a video i'll give the description so that's why i'm use i will use the wi-fi of g7 will deploy inside the tomcat so first of all let me just explain the application what is the application so i have this is the basic application here you can draw the area and length you can measure the area and length everything and you can clear this then you can add a wms level whatever layer are in the jio server just fetching that then you can if you click here you can add layer to map so that layer will be added onto your map here let me just add another layer so this is how you can add whatever layer are available in the jio server those layers will be added here and after that you can use this activate get info by clicking if you activate this so now if you click anywhere you will get the information about a particular feature wherever you click so my pc is quite slow i think that's why otherwise in your case it may be no it will be very fast so suppose yeah i clicked here so you can see the information of both the because we have two layers so it is giving the information about the both of the layers suppose i switch off one layer so it will give you the information about the whatever layer is on so this is for that uh so you can add any layer let me just go for so it will zoom it to that particular like this you can see and you can change this base map also wherever using base map of osm or satellite like right now satellite image is loading so this is for zoom in zoom out you can zoom to max extent so i have given the extent of india you can change it to your country like that you can zoom in so much so if you clear it will remove all the layers everything it will zoom into the your starting extent of the map let me just try to you can add any um i can say you can any kind of raster layer also like this is the dem file so you can add that raster also you publish your layer inside the jio server and your dem will be loaded here and this is your scale bar this is where your latitude longitude cursor mouse position is there and this is also a scale then this is for searching also you can search any location on uh any location or any place on the other this search is basically powered by i think osm so it is using the osm database actually i think my internet is also quite slow that's why it is taking too much of time for loading otherwise this is quite fast like let me just again go for this and yeah here this is the legend also so it will show you the legend of the that map also you activate get info so whenever you click it will give you the information about that particular pixel so if you add another layer let me just go for another layer um punjab value lc so it will give the lesion for that particular layer also and if you just clear it it will just go like this this is about the wms thing and legend and everything whatever it is there and let me just show you the now degen and this is about wms now you can if you click on the query panel so you have two options select by attribute select by draw so let me just select by attribute you select any of the layer whatever layer are available in the jio server uh you just select let me just select india district whatever layer is loaded here and select district name operator will automatically change based on the attribute so this is string so that's why it's saying like so if you select a so it will highlight all the features starting with the a letter as you can see now so you can hide this so whatever you select here it will highlight that particular feature onto the map and here also it will give you the number of features also how many feature it has selected that also and vice versa also you select select here so it will zoom zoom into particular that feature like this and if you want to see okay gid is less than let me go for 50 greater than and less than also you can search so allow 49 feature it has selected similar thing it is doing and you can select in between also between suppose just you have to write 10 and 20 so it will select the feature between 10 and 20 so it has selected those particular features as you can see so you can if you clear it everything will go so it will remove everything from the map uh so let me just add one more time the same district and we have another option for select by draw you select the layer similar layer suppose let me go for india district you can draw anything let me go for polygon so if i draw polygon so it will highlight the feature select the feature intersecting the particular polygon and similarly if you select here like this like this like this like this so it will work similarly and also if you just make it a star whatever so it will highlight the feature of the intersecting the particular star you can see make a square so similar thing can be done you just hide this particular so you just clear it it will clear everything so this is about the application and similar application i have developed using the leaflet also in this front-end api is through open layers in this front-end api using leaflet so similar thing is there you just make open this one you just add any layer wms layer will be added it will give them this is added you actually will get feature info you click you will get the information about it deactivate it will go away you can switch on switch off okay one more thing i forgot here you can search suppose let me search for delhi this so this is all depends on the internet if internet is there then only it will work just click delete it will zoom into that particular area and it will create a pop-up of delay and you can switch always switch on the base map here so yeah here is activate deactivate you can activate anything you can click here and deactivate it similarly legend is there you add one more layers to add the legion for that particular so legion is added you can hide it on any time you can hide it let it do longitude values there scale is there this is the base map and after that you can have similar kind of yeah this is this is for zoom to max extent zoom in zoom out if you want to zoom in like this so this feature is for that this is for drawing length measuring length you can clear it this is measure area you can create the measurement you can delete this then similarly this is for zoom search anything these both two are for system from different search are there so these all are plugins of the uh basically leaflet and similarly i have given that feature of this attribute searching similar so you select particular india district gid less than let me go for 40 so similar thing will happen here you hide it give number a feature you select we'll zoom it to particular feature wherever you select it will zoom into that particular feature and if you click here it will scroll it to that particular this is similar to the earlier one let me go for some other like um pop persons is greater than 1000 so as you can see everything is similar to that so both are both applications quite similar but only the front-end api we are using different one in one we are using leaflet and other one we are using open layers so now let me just uh show you how to deploy this application so first of all we will download the tomcat web server so let me just go for tomcat just go on google type tomcat me go for google tomcat i don't know why it is every time opening you just go for tomcat just click here you just click on don't download tomcat 10 because jio server wire file is we are not able to deploy the var file of json into the tomcat and there's some compatible compatibility issue so just go for tomcat 9 click here and just download this 32-bit 64-bit windows service installer so we'll uh download this and then we will install by the time we'll see we'll go on google type jio server and just click on download and you just click here stable and here you will download you have windows server option also but earlier i explained you if you have windows installer and you have server then you have to make some settings so that cross origin error will not happen so i have a video for that also if you want to install the windows also that not a problem you can do that also but we will use this wi-fi web archive so now our tomcat war file has been installed oh sorry it has been downloaded let me just yeah this we have downloaded so we will just double click it we will install it so just click it next next and using you can host manager example you can check you can select both next here you have to give the port number so you can by default install on eight zero eight zero if you have already running some uh server web server kind of thing some application on eight zero zero just change it so i have eight zero eight three eight zero i think i will make it to eight zero eight four because already i have installed two three instances of uh [Music] tomcat so i will change to 8084 you can let it be like 800 only in the application part you have to change the port number in the later part i will explain and just give the username and username let me give admin and password i will give anything you can give password according to your and just make it yes next next and next so already i have a jio server with me var file installed with me oh sorry download it with me so first we will install this thing and then so let me just stop my earlier version of tomcat i will as we are installing the fresh version of so we'll start that application so now completing apache tomcat setup so just you can run the apache tomcat so it will automatically start the application for the tomcat which you have installed so yeah so now if you go if you now go to the c drive and program files apache tomcat so this is the one which will earlier i have already installed three version but this one and nine underscore four folder which i have given just go inside web apps so it means your tomcat has been installed to check that just you go here and type localhost [Music] 8084 because you have installed it on the port 8084 if you have installed it on 8080 just type eight zero zero so if you see this it's mean your juice your tomcat has been stored properly so now we will deploy the uh jio server so user r file which you have copy uh downloaded just copy that and you just put it inside the apache tomcat inside the webs folder you can paste it here and you just unzip it here no need to any do anything [Music] you extract the bar file here and just refresh it you'll see the jio server folder will be created automatically user folder will be created now what you have to do only you have to restart your tomcat again so just let me yeah this is my tomcat service just stop this service and just start it again after copy after basically extracting the var file in the web apps folder of tomcat so now again we will start the service after stopping it so now our service has been started again you will see our tomcat whether it is running or not just refresh local localhost 8084 and we will try to access the jio server also just go on browser type local host colon eight zero eight four slash jio server just enter it so you will be able to see the login page of the jio server so now server is started so i think it may take first time it may take some time to load the page otherwise after that it will be pretty quick [Music] so as you can see this your tomcat page has been loaded and geo server page so by default the password is admin geo server so now this is your juicer so by default so many layers are already loaded in the jio server so if i use that application so these many layers will automatically come these many layers but you can always upload your own list so i will show you how to upload one or two layers okay so just let me just first deploy our application so you just go similarly c drive apache tomcat your tomcat web app folder here what you do just copy these two folders which i already told you open layers and leaflet app so just copy these two folders both the application these are two application two separate folders just copy these two folder here nothing you have to do all the libraries and everything i have included so i have used open layers you can always go on google and type open layers.org you can download your own library but no need to do that i have already done done it you have to just copy paste that folder and here you just click on 6.14.1 then you can go on ayah here so here is option for downloading it or you can directly use these links also if you don't want to download so it is already hosted on the internet then you can go for the leaflet and you can download the d flat library from here you can click here because i think it has been moved from some other space yes you can always go on download from here and you can download this okay 1.8 is already there so 1.7.1 i have used you can click here you can download you can directly use this or you can download the uh this library from here and you can also uh use the npm package if you're using that if you're creating your application using node.js so you can download it from here so i've already done that no need to do that for you just i will cancel it and yeah one bootstrap also we have used [Music] so you can go on the google and type bootstrap and you can download similarly you can download the bootstrap so let me just show this open layers app so you can the ellipse folder i'll show you what all are the like so this is the bootstrap you can click here bootstrap and you can download the bootstrap from here go on download so you can download the cs you can download it or you can use this already hosted on the internet both the things you can do but here inside the folder i have already included so like this in open layers app this is my index.html map.javascript code this is styling inside library you can see bootstrap is there jquery and this is the this is open layer 6.13 version okay now recently they have installed 6.14 so you can later on so then layer switcher this is a third party plug-in so we are using for switching the layer so you can install the layer then geocoder for searching the place on anything that this is the third party plugin also this this is also pop-up is plugin so we're using three plugins along with this is uh jquery which is okay oh well cesium.js no need to you can delete this file there is no need of that i was trying to convert the 2d map into 3d so i try to use that also so all the libraries are already included and similarly in case of leaflet app you can see so many uh so many plugins we have to this is the leaflet then zoom bar for a different plugin from mouse position there is different bringing zoom slider different plug-in measure there is a different plug-in measure area measure length then geocoder different than leaflets are of course jquery so bootstrap already we are using it so for leaflet you you need to use lot of third-party plugins so uh let me go now let me just check so now if i load local host [Music] eight zero eight four slash the folder name is open layers underscore app [Music] sort of application should load but it may not load i think because we need okay it has been loaded but few of the things will not work like this drop down layers are not coming because we have to change some view port number you have to go into the map.js just click edit in the notepad plus plus because earlier i was serving my application in the port number 802 just we have to change the port number to 8084 on which we have installed our tomcat just go ctrl f find and replace find what localhost colon 8082 and replace it with the eight zero eight four so at eleven places it has changed like you can see here [Music] see all these are coming from geoserver 8084 so now our application if i refresh it it should work okay first time it may okay i have to refresh i have to delete the history also i think let me just you will pay source here let me check it is refreshed or not so it is still 8082 so just i have to refresh it again now it is 8084 so basically you have to clear the history or what we can do i can open it in the new browser you have to just change the you can you have to basically hard refresh your uh your browser so let me just open another browser or you can remove the history of past hour then you can load so it will work let me just copy paste this and let's see just double click let me just close it everything here yeah so now if i go for this and this now you can see under the layer all the layers inside the jio server are coming whatever layer are there and here also so let me just check automatically it has taken all the layers inside the geoserver only these many layers are available currently okay so like this one can you select here top states then automatically it will load the attributes persons you can greater than [Music] so you can click here select select you can zoom in zoom out like this and even if you want to select best state name like you can make it a so only three states are with the name of a you can change the base map also based on the satellite or osm let me use for osm because it's quite light my internet is not that much fast similarly if you go for select by draw similarly top states just make a box so it is you have to only whatever layer you publish inside the jio server it will automatically fetch all those layers here and here as you can see here you can go for this add to map state boundary to load and if we click activate deactivated just clear it it will remove everything and similarly now we'll see for the leaflet one just i will ctrl c ctrl v just i will change the folder name leaflet [Music] okay here also we have to change the sorry we have to change for leaflet app map dot js file we have to change the port number eight zero eight two two eight zero 8 4 replace all 10 occurrences so we can see somewhere whether it has changed now so we have to hard refresh it let us see we have to again i think refresh it properly map.js still 8082 so again we have to refresh now okay again so just clear our browser history so it will automatically so now you can see after refreshing it again so we just select the layer and this one persons greater than 1 000 just load it so your number of feature and everything you hide it similar kind of application you can make it leaflet here vice versa and similarly you can add wms layer or add and you can activate get feature info so it will give you the information here it is legion is coming here you can switch on switch off here okay then you can search anything like let me search delhi so you can [Music] zoom into that delhi here this is also a search you can search it here delhi so both these two both are the search for delhi let me search another thing gazebot [Music] yeah it will zoom into the gaza bar this is gazebo okay this is delhi this so you can clear it you can deactivate it so similar kind of application we have done and you can similarly measure and everything i i've already shown how to measure and everything deleted measure length you can remove it zoom in zoom out this is this one [Music] and similarly so those two i have just you have to install tomcat your jio server deploy deploy the jio server and copy paste this application you can similarly measure and everything here i've already shown you how to do that in this folder so now what we will do we will publish our own data and see whether those uh data sets can come in the jio server uh on our application or not so let me just open here you just you have to just go to localhost 8084 jio server you have installed geoserver just after logging just create a new workspace go on workspace add new workspace let me just create india and www.india.com [Music] you can give any namespace uri you save it so now we have workspace then go on store add new store you can add any kind of store shape file folder shift uh shape file raster file everything so i will add shape files add new store this option of directory of shape file or this three file so i will make go for directory of shape files you can go for post js database also so i will select workspace india data source name let me give india only and just browse it wherever i have my so let me just go in this folder i have uh let me see where is that folder c 4 4 okay so let me just copy this folder somewhere else first let me go for an e drive so simply i'll just go to the e directory and here let me just select which is indian district boundaries the folder here are all the shapefiles to showing so we will take two ship files one for state so simply just you have to select the folder and make it okay and just apply it so you can see all the four five shape files going inside the folder just click whatever you want layer you want to publish so i will publish district one just click publish and you can change the name so let me just give me india district okay this is the name and similarly just same name give to the title just give the same name epsg43264326 just compute from bound compute from bound and this is the geo property name is the zoom and publishing here you can change the style later on we'll see how to change the styling of the feature right now will not change just make it safe then you just click add new layer again select india india and you can publish another one like i publish india state boundary sorted similar thing i will just make it india state [Music] sorry india state let me just make it india state and epa four three two six we are using sim on this projection four three two six and just save it so now two layers have been published if you go on the layer preview in your restrict if you click here layer preview open layers so these two layers are here see this is the state layer this is the state one and this is the district one so both layer we are having here okay so now we will see whether these layers the now these layers should automatically come onto the because we have obvious two layers so when i go in my publication suppose for open layers you click here so automatically these two layers should come here now as you can see india stayed in the districts already these two layer has come if i had click district so now this layer will be added here as you can see now you activate gut feature info click here so you can get the information about the feature and further you can add in your state also we can change the style that i will show you how to change the style okay just click here you will get the information for both the layers like this if you switch off you can get the information about one only similarly now you can make it a query panel and here you will get the india district now you can do anything district name let me select district name suppose for gazia bad if any thing is there it will load so as you can see it has quickly zoom it zoomed it to that one wherever gazeboard is there similarly if i make it for uh c so any district name with the c it will query and it will load number of feature 30. these are the number of features this is the district shift file you can click which one is which one this is the see all the and if you select for object id i don't know id greater than or less than maybe less than just make it 20. so object id less than 20 to load okay so this is the way you can zoom it to that particular you can hide it so here i am using the epsg-4326 only that you have to see okay and now similarly you can use it by under draw also this will come automatically you have seen just you draw anything polygon it will highlight the features and it will given in the tables also it will select those features which are intersecting this polygon number feature 127. you can click anywhere you can make a square out of it and here it is legend both the legends are coming okay it's quite simple just you have to copy this application publish your layer inside the jio server and you're done everything similarly we can see inside the d flat also here let me just go for here as you can see in your district is there you add this so indian district layer will be added let me just refresh first yes yeah india district you just add in your district activate that feature info look at the information you inside the legion it will edit and query panel if you go you select india district similarly you can do the same thing district name like let me go for t when it is district name it is a lot of districts are named with the t okay let me just switch off first this so it's quite simple only you have to use the eps g4326 you're publishing your map and here one more thing you can do if you want to load only those layers of a particular workspace that that thing can also be done so suppose for the let me just first go for now one by one i will show you the application web apps open layers app so in the map.js only you have to change if you want to restrict the layers to the particular workspace like india workspace we have used now so what you can do here this in this drop down layer query line 208 this is for open layers get capabilities are there so here what you can do one thing very easily you can do let me just show you india district yeah like this if you write india here now india after geo server yeah here if i make it ash india so it will load under the drop down only layers inside the india workspace and similarly for if you go down below below um here also layer drop down for draw one so india slash and there is for wms layer there is yeah list of wm is there line after line 705 here geo server if you make it india slash so now if i save this and i will load my open layers app i will see only two layers are coming here because i have restricted to the workspace only two and here inside the query panel only two layers are coming so you can restrict this layers to your workspace also so if i change it to top so as you can see here only top workspace layer are coming so this this like this you can restrict the layer to your workspace only so you don't want to show you either you can delete all the user values and publish create your own workspace otherwise you create your workspace put all the layers inside the workspace only those layers you want to show to the user just i will make it ctrl z and do that so i think this is similarly now all the layers are added similarly you can change the same thing inside the leaflet map also now similarly for the leaflet you can go into map.js and you can change the this one yeah this one afterline this one india workspace name here and then if you change in this wms layer function here if you change it to india and save it and here also you will be able to filter only these two you will get these two one and in this tools you can you will get the this is how you can restrict it to your workspace so now i will try to explain the code one by one for both the application let me just go for the open layers first first we'll go open layers these are three files let me go for index.html first so these all are the libraries we have imported as you can see this is the bootstrap this is jquery this is the open layers this is the layer switcher plugin this is the geocoder plugin so if you go on google type open layers third party plugin [Music] you click here so i have used this one layer switcher this plugin and then geocoder plugin then this is the world pop-up plugin and this is a jquery ui for this one i've used it for this whenever you click this you're able to move this now for moving this model this this is called bootstrap model so for moving this i've used jq jquery ui and this is the style.css style.css means this file style file so all the styling information are there sorry that's the map query tab legend so it's the position and everything this position of legion map and all this all drop downs are there this is self explanatory if you go through go through it and after that this is the like map element this is the scale bar like we have two scale bars here one is this one this is by default of open layers this i have created this for two then w wms layer this is the button for wms layer this one then clear all means this clear and show and hide query panel means this button after clicking you can show and hide the query button then this is for legion and info button means this one info and this is for select measure drop down and this is the query tab means this query tab all the drop downs will be there these are the drop downs then this is our model when i will click on this this model it will load this table kind of thing this is that this model and then after that we are importing this js file dot map.js file we are importing here and after that we have to just this is the gs file uh javascript file so one by one i will try to quickly explain the code so in starting uh these are the few of the variables map geojson we are explaining here then this is the view here you can give the projection we are using the symbol projection the center of the map is 83 20 82 23 means whenever you open the map to load here you can change this if you change this latitude longitude it will open it somewhere else according to your location you can make it change you can change it so these are the two base maps means these two base maps satellite and osm so you can see here this is the satellite one and this is the osm one then overlays is empty right now because inside overlay there is no layer if you if i add any layer like this you can add also but we are clicking uh we are getting this wms layer from the user when we go on here and click select some layer then we are doing it otherwise by default also you can add one let me show you india state india state india india state if i do like this and overlays dot get layers dot push india state see now so you can see this layer this layer has been added so one layer will automatically come if you do like this you can always add any layer so just define one layer just give the name india india state whatever you have published inside the juicer on india india state like this you just copy paste here copy this and paste it there let me just remove this and after that this is the map we are defining target map means this one this map whatever id of map is there you have to write that id here then view is view this view you have already defined one variable view then map dot add base map overlays and then you are adding the pop-up whenever you're clicking on the map you're getting the mobile pop-up this is the mouse position control means this latitude longitude is coming then zoom to max extent means this one this e whenever you are clicking here it will zoom it to the extent then scale line means this one the scale lines then this is the layer switcher third party plugin we are using this this means this one then geocoder this is the also plugin we are using means this geocoder and then this is the scale function so one scale i have created this one so whenever you change it scale will change this is the function for that i'm i'm calculating the scale of the map this is the formula for that and scale bar one is the html uh div in which this is it is rendering then this is for legion as you can see this whole function is for region so it is finding the number of layers how many number of layers so as you can see now this it will first find how many number of layers are in the map and it will will get the legend from the jio server like this then this is for layer drop down query means this one this one then this is for attributes so whenever selecting any layer till this is coming from geoserver and this is for combo greater than less than everything this is for drop drop down for draw query means drop down for this and and this is the function query whenever you hit this button it will call this query when you will just load layer button it will call the query function it will get the values of layer attributes attributes and everything and it will send the url to the jio server and will give the output create a geojson layer and it will add the feature and it will zoom into that and also this this part of this code is basically for the feature table whenever i'm selecting anything like suppose indian state state name like a so for loading this table basically this part is for that it is creating a table it's finding out the number of features here like this so basically let me just show you what what feature we are fetching suppose for india state uh just if i select here geojson so this kind of data we are fetching and we are parsing this data this kind of link we are creating you see here this is the url sequel filter we are loading so if i copy this url pasted in the browser this kind of feature will come so this is this is called geojson wfs service so we are fetching the geojson format and we are parsing geo and this open layer has a property it can basically load the user like this geojson layer and we are passing this url here this url here passing this url here so it is sending this url to the geoserver and fetching it and loading onto the map and it is zooming it and this is all the tables and after that i am calling this function on single click so whenever you are clicking onto the map here like so it is seeing which feature is this and it will similarly highlighting highlighting onto the table already on to the map so this is for that this feature and this add row handlers also so this this is highlight function highlight so it is first finding whether feature is there or not okay then it is finding which feature it is in the table then it will highlight the feature this whole function is for that up to and add row hundred is just a positive it means whenever you are selecting this it is zooming to that so this add add row handlers this function for that okay this one so it is first it is it is getting the feature from the table here because this is the unique id of user india state one so it is taking this value and it is finding onto the map which of the feature is there it is highlighting that and this wms function layer is basically this one whenever you are let me just clear it first whenever clicking it it will create this feature uh so let me just show you this is the function so this is wms capability that was wfs wms this findings it is creating a table and it is fetching the number of layers and everything so if i let me just show you if you go to this one and if you copy paste this get capabilities so you will see this is the document this is the xml document it is loading and here all the information are there see all the layers are there it is many state boundaries everything is there so i am just reading these files these names this title these names from here as you can see this name title and abstract i'm copy i'm just fetching reading this xml file here xml dot find layer layer then name title and extract so i'm just using the jquery i'm reading it this xml document and finding these values and appending into the tables and again this one more functional address handlers means whenever you are selecting this so it is highlighting it and it is fetching the values and sending this to the user adding it like add layer so whenever you are selecting it and you click on add to map so it will call that function add layer and it will pass on to the jio server like this local host 80 layer name and it will add that layer onto the map overlays dot get layers dot push wms then we have it is zooming it to that particular uh layer also extent also so we are getting the bounding box also like this and it is zooming it as you can see here every layer has this bounding box so we are fetching this value for here so first it will find out which which layer i have selected and it will search here it will get the bounding box and zoom it to that like suppose tasmania roads add to the map so it will zoom into that so this function is for that this one response this one it is getting the bounding box extend layer object bounding box it is finding the layer name what is the layer name it is matching with the name and it is fitting it to map it is zooming to that particular text and this is nothing close window means whenever you are closing this so it will close that then get v2 get feature info is nothing whenever you're activating whenever you're clicking here so it will get feature info means it will fetch the information so it is also useful property so wms source then url of get feature info and we are putting into the pop-up then clear all is nothing whenever i click it it will clear everything all the layers it will remove as you can see geojson will remove everything it will all find all whatever the layers overlay uh overlay uh basically all the wms there it will remove all the wms layers also so it is removing everything then this is show hide query panel means this one this one this function show hide legend means this one that's nothing and then this is the draw type this is for basically nothing this one so whenever you change this it will call this function add draw interaction and it will call this function and it will it will see sorry no no no this is this one and draw type means this select draw this one whenever you change this it will find out whether you are drawing circle box star whatever you're drawing and it will find out if star blocks circle polygon so it will map dot add interaction draw one so it will add the draw function and then draw dot on draw at the end means whenever you stop the drawing it will find the extent of it this is it will it will send the layer name and extent of that particular as you can see coordinate of the geometry which you are drawing wk is well known text and format dot right geometric coordinate it is it will pass that to the so here one thing only you have to see this is the function intersects the gmwkt so the geom is basically nothing it is this one for particular layer so you have to make sure that whatever layer you or in all the layers the uh the name of sorry sorry sorry another yeah this one indian district you have to see the geometry name should be the zoom if it is if it is geom then you have to change it to the geo so that you because when you publish through the post gis database it may be geomod you can change that name if you publish through shapefile directly automatically it will take the zoom but it will publish if you will publish your layer in the geoserver through post gis you can change it to any name while uploading into the pos gis so you have to change only this thing okay then geojson layer it is similarly passing that url similarly again the table it is loading it is similar to the earlier one map on the single click highlight same tree and this measure type on change means this one whenever you are changing this here area line polygon so you will you are able to measure and if create it will clear the measurement so it is calling this function map add interaction this whole code is for that map add interaction measure type select player or this one area length so this whole code draw dot end so this whole code is for that so in short this is the code for the open layers app similarly so only you have to make sure uh you have to change the epsg code and you have to change the port number and you can load the layer inside the particular workspace also and you have to see that geometric column name so now we'll go for the leaflet f so this is our leaflet so there is one major difference in leaflet and open layers is that by default leaflet supports the projection of eps g3857 which is this spherical multi i think non-spherical multi marketer google marketer kind of uh just understand most of the open open source uh tiles are like osm is serving in the same uh projection three eight five seven a lot of e3 base maps are also served in this spherical marketer let me just show you what is this projection dtsg3857 [Music] let's just go google first [Music] ep sg 3857 so as you can see sudo marketer kind of so open state map are available in eps three fashion but g but open layers has a capability to it will automatically project these styles into the four through two six whatever projection you are using between four three two six and three eight five seven but ah leaflet cannot do that so by default if i use osm if i use projection eps g4 through 4326 in the leaflet so i cannot use osm it will not load the tiles because it cannot reproject it does not have a capability so that's why in the leaflet i have used the e3 base map satellite and hill shade so this is for osm i'm not using then you have to use the projection 3857 so then you have to reproject all your layers inside the 385 second then 3857 then you have to use it i will show you that but open layers is very robust in that automatically it can it now it is the tiles coming from open osm and in this satellite is 3857 but it is reprojecting it to the fourth by default based on the projection declared by the user but in case of leaflet it is not like this so let me just go for the leaflet also this is the leaflet app similarly the libraries are there all the libraries so let me go for the index.html file first this is the bootstrap jquery leaflet these all are the plugins zoom slider mouse position geocoder leaflet search polyline measure laser sorry measure then style.css similarly this is a styling file having map query tab all the positions and everything of tables and everything so no need to change that you can change that if you want to change the locations of all the buttons everything similarly the map component similar buttons are there query tab then model is there then table drop downs are there and map.js so now we'll see map.js so now similarly we have we have to define the map l dot map and this is our projection 4326 suppose if i make a comment of this so now by default it will take 3857 so these two will not load let me just show you see how these tiles are loading just going somewhere else so now if i want to use i have to just make a comment of this and if i use this tuna it will work because these are three eight five seven by default [Music] let me just and we have to change this hill shade to s m o s m base map o s m o s m so now you'll see it is fine it is loading this one perfectly fine yes [Music] so now you see osm and satellite it is working fine but the problem here it is let me just show you what is the problem now if i query layer india district okay not let me query just add this wms here india district it is loaded fine because this is 4326 if i activate get info if i click here it will show me it is not showing anything but if i'll click here it is showing india listing maharashtra but i am clicking gujarat it is saying maharashtra so due to this because my layer it is in 4326 projection but i have defined three eight five seven the base map is three eight five seven so it is it is a spherical coordinate system i have declared i've declared uh three eight five seven and my my layer it is in spherical coordinate system 4326 so it is not able to get the right coordinate so this is the drawback of the leaf leaflet so if i use four three two six now here because my all the layers are in four through two six that's why i have to use four through six other way i have to reproject or one thing can be done here you can while declaring here native you can give 3857 and you can use project native to declare so it will reproject it to that also so that is the issue only you you have to see the projection here so if i use 4326 and now if i refresh that then tile will not be the map data are not available because i am using 4326 but these two base map are coming in three eight five seven so that's why so these two i have taken from the e3 these two uh base map i have taken from because three also provide lot of base map freely so you can use that in your map so this is all are in four three two six i have checked it from the history so then i have to again let me just make it controls add everything [Music] just make it four three two six now it will be perfectly fine because now my base map are also in four three two six [Music] [Music] so now my base map are in four through two six everything is fine let me just what is there now so now it is okay now if i'll add india's district it will be fine because let's zoom it so now wherever clicking i am getting the right information so this is that's why projection you have to see the projection also so that's why i think open layers is much more robust than the leaflet so leave it let me go here so this is the map this is the two base map we have creating then we have creating the layer group one is the overlay layer group here this is this is only base map layer group and we are creating the overlay layer group also base layer group overlay so right now here overlays is empty because we have not added and added any overlay so layer control we are adding and under the layer control we are adding these two base maps then zoom bar mouse position scale geocoder so these all are things let mouse position scale this is the zoom bar everything is this one like polyline measure means this one this polyline measure this function then area and then again this function of legion is there so whenever you add any layer it will add lesion so what it will do it will find similarly for each and every layer it will run this function overlays dot each layer and it will go to the jio server get the legend image and it will render into that function and this is the sim simply drop down again this query drop down are there this drop down and this everything is there is the attribute drop down this is the lick combo and this is the query function again similarly it is good it will get the values pass this url to the jio server get the duration data loaded into the table and yes this is this one it recall this function and this is the function on each feature whenever you are clicking on each feature in your district uh let me go for district name let me go for b so whenever clicking here on feature this is for this function selected will give the red color it's giving this red color this is for that only then it will highlight the table similarly nothing fancy and this add row function is for just opposite whenever you click here it will zoom into that it will just opposite function opposite thing to find all the features get the id of that feature and get the bounce and zoom it to the bounce then this is for wms layers this one similarly this one nothing going to the wms capabilities giving the name to the table and everything and whenever you are clicking onto the add add layer to the map it is again passing adding the layer and is finding this bounding box as i told you like this function has this one [Music] it will go it will find the layer name whatever layer name you have like this these all are the indian districts so this is the bounding box useful it is finding that only x geographic bounding box as you can see x geographic bounding box south latitude west all four it is founding see so these all four values it is finding and it is zooming into that if you want to it will get the latest longitude if you want to get the extent in the projection which you have defined in jio server then you you just uncomment this piece of code and comment this piece of code so basically it will for this like i'm i can show you here as you can see this is the for this layer elevation this is the relative longitude but if you want to get the extent in the native projection which we have defined so you have to find this bounding box crs 598 this this this so then you can uncomment this and get uncomment this one and you can make a comment of this so you get the latitude longitude for that particular one then get feature info similarly whenever you are clicking here sorry not this one after adding this whenever you are clicking here you get the information this is for that so it is getting the point bounding box size of the map and it is passing this you are sending this url to the jio server and getting the information and it is adding it to the pop-up then clear all is nothing simply this one okay it is removing all the layers here then show a hide query panel show hide legion means this button and after that yeah i think that's it so it's just i think quite self-explanatory code so you can if you want to change anything you can always change in this code but i have just made a pretty simple kind of thing so you just install the tomcat server deploy put your layer inside the jio server whatever you need and just simply copy paste this application you will get everything there and further if you want to add the layer from post gis so you can create a store add new store um post gis select workspace data data store name let me just give any post gis let me get 4 js only [Music] [Music] data name of the database to save it so these are the number of layers are available in the pose.js database so if i go for pg admin i don't remember [Music] let me just go check it so in your district industry already it is there so you can use any kind of let me just go for countries i will publish it compute from this bounds compute from this bound as you can see now the name is jio so it should be but in my code it is the gm so you have to change it either going into the database or so let me just change it after going into the database the geom so you just use same for every layer otherwise it will be a problem or let me just make any other layer india post gis uh revenue let me show see what is this revenue so here all also you can see it is jio so that you have to see publish it save so now we have a revenue just go on the layer preview we have a one more layer called revenue and open layers let me see what is this layer i don't know oh this is this one so now if i refresh this one and if i add layer so india revenue i add to the map it will zoom into the particular layer this is the mind yeah like this you select to get the information about that this is how it is done and you can query this also but let me show you it will not work in one case only name revenue first let me see what is the name siana so let me go for name revenue like let me go for s so it will highlight all the features with the s as you can see i could quickly test done all the revenue which maybe new parcels starting with s some rolling see this so how if you just have to publish so this data is coming from posi is so i have published the post js database and similarly this should work in this also let me just try here also your revenue so for it's a pretty good application for anybody just activate it click get the information deactivate it try india revenue revenue e like d so this is for d you can go like this it will zoom into particular area similarly here you can select satellite as you can see how quickly it is zooming so only you have to publish your data and use this application for anything you are querying the data and everything as you can see here also my internet is slow that's why the satellite image is loading quite slow otherwise it may load pretty fast and you can always hide this here also you can add this and you can see but here in my open layers case it will not work let me just show you in case of draw it will not work because the name i have given the code geo select revenue okay let me add revenue one if i select revenue and select polygon see it will not select i know because in this case there is a problem i have used here you can see the name the zoom but if i will make a geo it will work for this layer but for other layer it will not work let me show you that first let me let add this revenue one polygon now it should work see now it is working perfectly so just keep the name of the geometry column same geometry oh similar for other layer it will not work now so in the database i have to change so now what i will do i will just zip these two application and i will give upload in the google drive and share in the description so you can directly download it and simply put it inside the tomcat and you are good to go you will be able to use the application so now let me just change the the jio zoom to the gm column name so it will work here let me just uh post gis database yeah this is the project database schema public tables this is the revenue so i will change the column name here the jio and i'll save it and again i will go back to my jio server layer the revenue and i will just reload the feature type the jio it has reflected the geo and i'll save it now it it may it will work select bed draw india revenue let me go for box so it is working pretty fast now you click it anything so i think and similarly you can add the layer you can publish the duty flare also if you have apart from the data so i think uh that's it from this one so i will share the application in the description link you can download and try to run it at your end so thank you thanks a lot for watching i hope this video will help

Channel: OpenGeo Lab

Views: 23,654

Keywords: WebGIS, Leaflet, Openlayers, geoserver, Tomcat, webgis development

Id: 64zKiHrt5PM

Length: 84min 50sec (5090 seconds)

Published: Sun Apr 10 2022