COVID WebGIS development from scratch using openlayers, Postgis & JSP (without Geoserver)

hey guys welcome back to another video today in this video we will gonna see how to create a web gis application using open layers front-end api and post js database only so we'll not be using any gi server such as jio server map server so we'll be using only two components one is database for storing the data and open layers front-end api for rendering our data onto the web and of course we'll use a web server for serving our applications such as tomcat and we'll do some kind of back-end programming so like in my earlier video i have used jio server postgis database and open layers all the three of three these three things for developing a web js application so jio server always work as a middleware in between your data and front-end api so you put your data inside the jio server and then you leverage and use the wms or wfs service of the jio server to put your basic data onto the web using the front-end api so here we will remove the jio server and directly we will fetch the data from the database onto our web web page or html page so what we'll do basically we have to do some we we need to do some kind of back-end programming such as i will be using java server pages you can use php also that depends on person-to-person so we'll use jsp java server pages for basically parsing the data uh from the database in geojson format or maybe you can you can parse it to gml format and then you can render onto the map so we'll do some kind of javascript basically backhand programming so sorry so first of all we'll see these are the components which we're gonna use such as first one is the tomcat web server for servicing our application and also java server pages will run inside the tomcat and second one is basically post js database postgres is the database and post js is the extension of the post uh postgres database for storing the geographic data such as your shape file and all and this is the open layers front-end api for basically showing your data onto the web we'll use the open layers you can use leaflet also if you are more comfortable in the leaflet there is no difference this is only just to render the data such as geojson or gmail data and this charges for basically for uh showing the data in the chart format like as you can see on the screen uh we will see how to develop a covet kind of application and these graphs also will develop so we'll use chart.js api then jquery and bootstrap also bootstrap is nothing in bootstrap is basically just to make your website more responsive such as these buttons and all these buttons and all are using bootstrap so basically more stylish you are making more responsive and more stylish website if you do not use bootstrap also doesn't matter these values come up but you have to then give some styling to it you have to create style for that some css styling and jquery is also for basically making more responsive or basically this is also free api javascript api okay feature the javascript library it makes your like your html documents event handling and animation very easy so we'll this is also free and open source available so all the apis and everything which is being used here is open source and finally we'll do some kind of back-end programming such as js java server pages will use you can use php also but we'll do basically we're using this java server pages will pass the data inside the database in geojson or json forward geojson for this map kind of data as you can see here sorry here this this data is in basically in the geojson format and this data is coming as in sorry json format so geojson is just the extension of json format so we'll use back and i will use our server pages for parsing the data in these geojs and json format so first of all let me show you how our application looks like what are the component so here this is the kobe data this i have downloaded from the internet that is also all already available free really onto the internet i think our data our world and data or something our data involved something kind of website is there from where i had i have downloaded the csv file so it's a time series data a country level data for whole world so like this this is the two day start date and end date and these are the parameters confirmed quizzes test vaccination these are the counters these are the graphs so right now what it is showing this map is showing between one one to twenty twenty two thirty one seven twenty don't even conform cases if i change to deaths so this map will update and this graph will also update as you can see and now you can see this this map has been updated this legend has been updated and this graph is also has been updated like deaths are there right now if you make a test so now this this legion will also update as our layer is loaded and this graph has been updated and similarly if you change the date suppose i change the date to something like from march 2nd so this graph and everything will change and here let me confirm test so this count these counters will also change this map will change this graph is also changed you can see that this counter will also update depending upon this date and parameters so this is the covid cases between these two this date and you can of course you can change the base map from satellite to osm and these are the graphs and if you hover it over the graph you can see the particular day this is the daily cases this is the cumulative cases up to that date so to kind of you can create multiple graphs this is just an example for that and also there is one more thing if you click on any country so what it will do it will the graph will update according to the country like right now this data is for india country only like if i select this usa so data will be updated for usa this is brazil that i will update for brazil by select india and i will update it for india and also in pop-up it will show the covet cases whatever parameter you select it will show that like for australia if you see let me go for this indonesia so so we'll see how to develop this kind of application so first of all one by one we'll go we'll download and install these whatever the software is required so first of all tomcat web server what we'll do we'll go on google and type [Music] and you can download this tomcat version 9 version 10 i have already uh downloaded the tomcat version 9 you can download 10 also so here if you go you can find this 30 to 64-bit installer windows service installer so i have already downloaded it so what we're going to do we're going to directly um install this uh this is the apache tomcat so this is the our web server in which we will be serving our application we'll go for next so here like port by default it will take eight zero but i have already three four instances of tomcat so i will make it eight zero eight five and just give any username password oh let me just change this name which is saying already it is been installed because i have installed several version uh several instances of tomcat desktop saying already the name of the service has been installed with the same name that's why i have changed it in your case it would not happen because if you are installing the first time or the first instances so it will not be a problem so it will hardly take one or two minutes to install the tomcat so now you can you can check this run apache tomcat so it will start the service also after installing now it is starting the service so now we will check after starting whether our tomcat has been installed just go in browser type localhost 8085 and enter it so here i think this is the service has been started so if you are able to see the on localhost 8085 in your case this port number may be different it doesn't matter you should be able to see this page it means you have successfully installed the tomcat so now we'll move to the next component of our database so i will not show how to install this database because already if you uh in the earlier video i have shown i have uploaded a video called web js development from the scratch in this one of the chapter i have shown how to from where to download this database and how to install the postgres database and then how to install the postgis extension so you can go through i will give the link in the description of that video so you can go through that video and you can install the uh post this postgres and post js database just very quickly i'll show you from where you can download this if you go on google and type post guest so just go on the downloads directly here and just go for the windows installer here this option for windows and download the installer you click on download the installer you'll be you can download the different version so you can i i have down installed 13 version you can go for the latest one like this download this and just make next next next it will ask you the few things username password for access in the database given username password it will ask you for the port 5432 is the default port you can change it if you have already installed database on that port otherwise let it be 5432 and just finish it and after finishing it what it will do it will ask whether you want to open a stack builder basically in the stack builder further extension of the postgres are available so you just open you just you just click yes open for open stack builder and in the stack builder just select the special extension post gis so it will download the post.js and then install the post js also so no need to separately download the post gis and also while installing the postgis extension it will ask you to create a dummy not dummy basically a sample post js database so you can select yes for that while installing the post joys also okay otherwise after installing this you can download post gis you can type on google and typos gis and you can download the post js from projects app server so but no need to doing that when you finish installing the postgres it will ask you to run the what stack builder and then you can from the stack builder you can install the special extension oppose great square otherwise from here also you can download the postgis extension you can go on the download here there will be option for the windows so you know windows windows download so you can download from here and you can install so i think you can install it and when you install it you just go and search after installing just type pg pg admin okay then you can open this vgn for version 5 i have installed so after that you should be able to see this kind of window now click on the server and i have already installed three different versions so i will go for the latest one just double click to that it will ask you the password this is the same password which which you have given while installing the postage database just click ok so now as you have after installing a database we will create a new database let me delete from the database then we'll create a new one like i have already already created code database but i will i will show you how to create a new database so let me first show you what is the data which we will gonna upload in the database i think here it is ah this is i think yeah this is the so we'll we will be uploading the shape file uh uploading the shape file and our time series database so this is the database uh this is the cov data time series data which i have downloaded from the uh source website i think our data our world in data i this kind of some kind of website was there so this is the time series that i daily cases total downl means up to that date what is the cumulative number of cases daily cases mean on that particular day then similarly total daily death daily test total test positivity total vaccination daily vaccination so all these feel so is the time series data i think lacks around one lakh uh entries are there so this is only a simple simple data there is no geographic data in this but uh this the geographic data is this this is our uh basically shapefile so i'll show you how our shapefile looks this is nothing just a boundary of the world for each and every country so now you can see this is the so what i have done basically in this the name of each country is similar this name of each country is similar to this one this field so while when we're running the query in the database we will join the data based on this field only okay so this is the data we have i'll just remove this data and also when you install the post gis so after that you will be able to see if you type on post gis so this gui will be installed on your pc post js shape file and dbf loader so if you click here so now you can load your shape file geographic data and also dba files mean if you have any data data in excel or csv file you can upload that to this using this loader so for that what one more one more step which i did basically the csv data for converting into dbf there is open source free software is there apache open office [Music] open office this is the free software if you go on google type open office it's a very small software you can download it it's just like a microsoft word so it has document also excel also so we will convert the csv to dbf file using this so here is option text document so just click on the spreadsheet so like as you can see this is the spreadsheet so just drag your csv file or your excel file here just give that this csv file so it is separated by comma just make it okay okay read only because i have already opened that's why it's showing view only otherwise you can open it so now as you can see this is the data now if you go on the file save as so you will get the option to save the data in the various different formats and you can select the dbf file here and this is a dbf file so you can save this file in the dbf i have already saved it so i will not do that again this is the db file and this is the shape file so these two things we will upload in the database so for that as i already told you after installing the postgres and post js data post js extension you just type on post gis here so this is the shapefile and dbfloater just open it just you have to make a connection first view connection detail you have to give the user name which is postgres postgres and password is the same which we have given while installing the post database this is a local list this is the port which you port number which you have given while installing the database i have given 5433 in your case you must have given 5432 by default and then you have to give the database name so for that before we will create a new database here just create new database here right click over database and get give the name i will give forward one and then definition just give template this is the pose ji sample if while installing the post gis extension it will ask you to create a sample database so if you check checked it yes then this you will be able to see this sample database and you can select because we are creating a special database that's why we have to select template projects if you have not done that that doesn't there is no issue after creating a database you can run a simple query i'll show you create extension postgis then also it will make it a special enable tablespace pg default and just save it so now it will create a new database called kovid1 and if you have selected this template so it will it will it will be a special database but if not you have not selected the template of 4.js doesn't matter you can do you can run a query after that i'll show you yes this is the cov1 database right now if you uh you can one more thing you can do to make it specially enabled right click just run query tool and here it is just right create extension gis and if you just click here run this query so now it is shown extension post.js already exist because i have while install while creating database i have selected the template database of post js that's why it is showing other showing otherwise must have created this again so i will close this so now you have a special database now what we'll do i'll show you how to upload the data so here in this connection i see you postgres the database we have given the localhost is the server then port number which you have given while installing the database now you give the database name which one this is the database which you have created just make it okay so now it is it has shown connection successful now here add file go to the folder first we will upload the shape file this is the shapefile and you just make it open and here srid means this is the coordinate system eps g code 4326 is there this can be different for your case whatever projection you are using coordinate system you are using and this is the geometry column whatever name you want to give i i will let it be go em only because this is by default this is a geometric column it will add and just you click import so now it will import a file import completed just remove it now we will import the dba file for that one thing you have to do by going to the option here just select this load only attribute data because now we will gonna upload dba file which is having only attribute data there is no geographic data no basically a geometric column and yeah i think that's it okay now again gonna add file here just select dbf and select world kobe data dbf open and just import it so now you have your geographic data also inside the database and you have your attribute data inside then let me just close it so now if we go under this database schemas public let me show you okay this is tables as you can see this is world kobe data is your attribute data this is country data so you can rename this and these are the fields you can rename anything here these are the columns so you can rename but you can delete the unnecessary fields or air from here if you want to see any row you can just make like this view edit data first 100 rows so you can see how your data looks like this is your data this is the data yes it is loading so this is the data as you can see here and where is your geometry field this is our geometry film in the last so if i click on the geometry field it will show you the shape of that also this is the okay first first hundred rows because we have seen that's why so you can click here you can get the information also this is the new feature in the latest version you can geometry viewer is there okay so you can rename any field click properties you can rename field according to you after that you can rename this name also from here properties okay like here this is columns also from here also you can rename here also you can rename this table name so these all things you can you can do so and second data is the world kobe data here you can see this data also first hundred rows so what i will do basically for this whole database i will take a backup of it and i will give the link in the description so you can just directly come here and you can restore the database like it's very easy to restore the data after creating a database just you have to right click here and there is option for restore and that backup file which i will share just make uh just select that file from here and just make click restore so those two tables will be restored the database two tables will be created so i have already basically uploaded and already i have changed the name and the column name everything so i will give the backup of this only the table as you can see i have renamed countries this world cup data and also i kept only necessary uh field only here similarly in this data also i have renamed it properly like total cases daily cases total cases daily cases up to this is accumulative of particular data these are daily cases like this so now we are done with the data part so now we have data we have web server installed and we have our data inside the database now we'll see next what we have to do and also let me show you some of the queries which you can run here let me show like this is the kobe database just let me close this queries first now i'll show you what postgres can done basically you can just select here query tool so you can write a simple query select star form select star means select all the columns from you can give the tab table name table was countries okay select start from countries here country name equal to india so now it will select only all the fields of for where countries india so as you can see here only india have selected if you make it like or [Music] equal to russia let us see so country okay country name the field name is wrong country name is russia so now it has selected two things and then similarly you can this one it has selected two things russia and this okay and let me make it china so it is nearby india again you can see the geometry viewer here in the end you can go you can you can select geomet these are the two geometries so like this you can run n number of queries here okay so now what we'll do basically will run some kind of query from here and this data we will visualize onto the web directly so in in between earlier we were using the jio server for that our data we put we are pushing the data inside the geo server and then geo server doing the thing for us for converting the parsing that in the geojson or any form of wms wfs but right now we have to do that thing so for that what we will do basically uh we will use some kind of backend programming jsp also you can run buffer also let me show you st buffer if you type post gis buffer so i'll show you how to run a buffer also this is the pose.jsoffer so you just click here the sd buffer is the query so you can run a buffer also i'll show you how to create a buffer and just so n number of queries are there intersection query sorry buffer st area st length so many are there so i'll run a pretty simple one this one i will run this is the query so let me just instead of star i will run this st select st buffer here instead of this what i will do i will turn geom gm is the geometric column as you can see here in my this one the geometric column name is jio this country is this is geom so whatever name is there you have to give that name here in this example on the web what it is giving it is giving the point it is giving the basically a geometry in the text format geom from text so it is converting geometry from the text like point 119 light long or something and then it is creating the buffer out of it similarly similarly for the line it is giving line string the coordinate of it then geomet it is creating a geometry from the so it is in two queries first it is creating the geometry from the text then it is creating a buffer around so right now we have geometry all uh already in our table so no need to do this this thing st from text directly we'll use the geometric column so that's why i have written geometry here this 50 is the basically size of the buffer if your coordinate system is in meters uh planometric coordinate system then you can write this will be in meter right now we are using four through two this in degrees so if i write five means five degrees around five into 100 kilometer kind of thing so now we will run this let us see however so st persium let us see whether we will be able to create a buffer or not so now we will go to this one now you see it has created a buffer of five degrees around the so like this you can run n number of queries but this is the thing this is the basically now it is creating the buffer router but but we have to convert this this into the geojson format so we can render it onto the web so for that i think what we can do st is jio json is the query name as i remember i don't know let me try this so further it will what it will do it will convert this geometry buffer geometry to sds geojson let me check on the internet yes sts geojson is this one so if i run this query this is the format type polygon coordinate so this is the geojson format which it is giving output so now we we will be able to render this over the internet so we have done nothing we have taken a geometry we have created a buffer out of it and then we have created json so if you do not want to create buffer simply just to make it like this like this if you run this for the simple geometry it will create the geojson sdg and geometric so this geometric column so right like this you can for any juice on the web if you want to do any geospatial processing intersection buffer clip so many queries are there in projects you can execute any query and you can put it on the web so now for doing that this query on we want to run on to the web so for that what we will do we we we will have to do some kind of back end programming so we will create java server pages for that so for that one more thing we have to do we have to download the driver for the jdbc driver of this gi uh postgresql and we have to copy those jar file inside the tomcat so basically we want to connect to the our application is in the tomcat and one two from tomcat we want to connect to the our database so for that one thing we have to do just go on the google type postgres jd pc driver so you just click here download so there are these there are the drivers you can click here pause kill jtv's driver you can download it for 2.3 just keep it so like this you can download so many are there drivers so this is the jar file we have downloaded i have already downloaded it i have already on the i think somewhere here in the folder this is something yeah this is the jar files so these are the two actually i have downloaded two so you need need not to download two only any one can work latest one like 42.3.0 is the latest one you can download the latest one also no problem just uh after that we have to copy this in the tomcat folder so go in this pc sorry my computer see program files apache tomcat and here this is the version which i have downloaded inside it lib and here just copy paste so this jar file has been you have pasted it in the folder lib folder after that we have to restart our tomcat just stop the service of tomcat and then again start so using this jar file we will be able to make a connection to our database from the tomcat [Music] and again we will start it so yeah i think so now first i will create a very small application very small web page in that i will show you how to render the data from the database onto the website so for that what we will do inside the tomcat only after copy paste these jar files tomcat and the web apps i will create a very small new folder called um what should i do test app okay this is our test app and now i will open vs code so first i will create a very small very simple application then that covet application i will not code an entire thing i will just break up i will break that application into parts and then i will explain the code so but this is a small application will help you in basically putting your data from the database onto the let me close this so let me open first will open open a folder and we'll go to the same folder this pc here inside the web apps of tomcat c drive and program files apache and this is the tomcat web apps and test app so now just select folder and open it okay so this is our app now so what we'll add first we'll create a basic html page first create a new file and just give a name of just you can give index.html also i will give test.html okay this is fine this is our test html so i will write so this is the basic html page you give title test app i will give sorry sorry so i will write here test app okay now this is basic html page so i'll save it and if i run this page let me run local host i have installed on 80.5 port just slash and inside the web we have created test app folder dash test dot html so now we should be able to see our so now as you can see this is the blank page you can see test app so this is the name so i think this is fine now so now we will what we will do will you what we will do we will import the open layers api first let's go on google type open layers and enter it instead of downloading it with what we will do we will use the api directly from the internet already it has been hosted so you can download it and you can keep it what you can you can download and you can keep inside this test app folder and also you can give the link but in right now i will show you i will use from the directly from the university internet hosted application you just go on the quick start here this one so i will use these two things i just copy this okay this is this and then second one is this so first we have imported the style then we have imported the javascript dot js file so two things we have imported here directly otherwise as i told you you can download the uh basically you can download it from here i can go back you can download from here and you can save that into see here i could have copied it from here also directly posted built for development directly otherwise you could have downloaded it from here and then you can also copy it here and then you can give the link of those files okay but right now similarly we have used this hosted one like this you can copy from here and then you can copy paste directly without like they are saying if you want to try out open lists without downloading not recommended for production they are saying because production i think you should download and then you can put your inside your folder and then you can so now we have imported the open latest api now inside the body what we have to do we will create a basically html element this is the new html element we will create and we will give the name to it i'll give id equal to map or class equal to map so this is a new uh we have created html element you have created so we will render our render our map into this only okay after that we'll create one more file here style.css file [Music] this is style.css so this is file so here we have created this id is equal to map so here we will give here hash map so we will define it basically okay position [Music] position is absolute and you can give the width and height of the map also width is 100 and similarly height also you can give 100 percent if you want to give border and everything that knows so basically very styling you can control the style of the html div from here you can increase and decrease that so just save it i'll save it so i think this is fine now and now we will import this also now here like this link css here this is the link style no css because we have to import this style also into the map so we have imported it this is fine hdf style.css this is the file so inside the folder if you go here we have style.css html now we have to create a javascript code only so we'll create a new file map dot js okay this is the map.js file so here we'll write the code so what i will do i will copy and paste this very small code pretty quickly let me see this also so now this under the map js will copy paste this pretty simple code this is our view map view here first we will create the map view open layers over dot view this is the projection of the code this is the center of the map this is the zoom how much zoom is there then we'll add base map this is the osm and satellite base map these are the two base maps which we will add on to our this osm base map then satellite base map to base map we will add and then we will make a layer group of it here this is the layer pretty simple layer group we have so we will basically group these two base map like osm and satellite these two we have group there over ol dot layer dot group and after that we will create one more layer group called overlays but this should this will be empty because right now we are not adding any overlays so let we will let let it be empty later on we will add one layer here on the database and then finally we will create a map and then we map dot add layer overlays map dot add layer base map so this is our very basic one see this map dot add layer base map map overlays so our base map we should be able to see the two base map i'll just save it also one thing we have to import here our this one here just look right map.js so we have to make it up here also like class equal to map so now we have imported this map.js also so our folder if you see we'll have now uh map.js file css file style file and html file so now we will just see how our map looks like here so now we will we are able to see the base map of satellite but we are not able to switch between the layers and we are not able to change of the layer so for that what we will do again we will import one more api we will type open layers third party plugin useful third party library is open layers you click here there is option called open layer switcher matte worker this one you just click here so here also we will directly use without downloading but for production as they have written you should download and then you can just import so like here i will copy from here copy this and we will import here the scripts so this is i think javascript and this one for style so now this is okay but now after that on our map js we have to add the layer switcher here also after that we will add the layer switcher so i will copy this from this page air switcher this is the layer structure we have okay vs code so we have created a we have created a view here very simple view then we create a base layer then we have created a layer group of base overlay then map and then we have layer switch to save it so now we should be able to see a layer which are also in our map so as you can see now you can switch on switcher between the osm and satellite it's pretty easy so now we have everything ready very simple web page base layer now we have to fetch the data from the database to here we have to overlay the data the same data which is stored in this covet database and this kind of query we have to run like geojson so i will show you how to do that for that we have to create an uh basically um you can say a jsp page here just create new let me just create a text document and i will give a name jio json dot jsp and i will yes tissue json layer i will get this like this okay so i will open it with the notepad plus so first i will show you the base this is the page code i will copy this and i will paste then i will explain it what is this basically so in that page this page is basically what it will do it will run a query and it will parse it into a geojson format so first of all as you can see these drivers so which we have downloaded the postgresql driver that will be used otherwise if you have not copied the driver so this you will not be able to run this query this java server page it will give an error so first of all this is the driver this is the local host 127.0.1.1 you can write localhost or here this is the port of where you store the database 5.33 in my case in my case in your case it may be 5432 this is the database which you are accessing this is the code database you can change it if you have renamed it something different then this is the username this is the password which we have given while installing it then this is you you are creating a new connection like st my connection.create statement this is the new connection my connection driver manager dot get connection this is the url username password so basically you are creating the connection from to the database after that you are creating a statement so this is the query whatever query you want to run on the database just type it here like we have written select sdg generation simply like this i will copy this query because we don't want to we have to make it as sts duration that's why we we need in geojson format only that's why we are doing so i will copy paste this one here okay just this query i want to run you need not to change anything only this you here this this database username password you have to change this and this query according to your uh according to your name after that this part is basically it is creating a geojson format the feature collection feature geometric record is you need not to change anything it will run this query and it will create a uh gio json file i will show you how just i just just save it here first after that what you have to you have to add one more layer here we'll add a vector layer let me show you this this is the layer i will copy paste this here so as you can see geo json is my new layer new old dot layer vector source is vector and here this is the url so you what you can do just if it is in the same folder like in our case it is in the same folder so you can need not to give this link localhost 805 test otherwise you can give like this also localhost 8085 test app underscore otherwise you can change it to like this only geojson underscore your gsp file name okay this is the geosynthetic.jsp file so this is the url basically you have to give where the geojson format is from where it is coming then new ol dot format geojson after that it will basically zoom to the features and then overlays dot get layer dot push news and it is pushing the this duration layer inside the geo json like here inside this overlays it will push now just save it now we should be able to see let us see so now you can see two layers uh two boundaries are coming this is china this is india and whatever query you're in now whatever you just change that like here instead i will write a st buffer now sd underscore b-u-f-f-e-r buffer jio comma 50 oh sorry one more we have to close instead of 50 let it go for five so now it will create a buffer also if you just copy this here and you paste that in this one here so now it will show you the different layer just paste to save it and again you run this as you can see it has created a buffer of it so this is pretty simple page you can make it dynamic also you can create a drop down here you can you can give the multiple layer and select then you can give the how much buffer one two three four value then you can pass that value on to that url on this url basically this url so it will take the value that to that url and you it will put inside here you can make it dynamic and it will create a buffer there so i'll show you how to pass the variable onto the url and then you can how you can import those variable in the gsp page so this is the sample page for creating a geojson format you don't you put any query here it will create a it will create in jurisan format so let me show you how geojson looks like so if you run here json underscore jsp this page if you run so you should be able to see the geojson format this is the json format so from the database we have converted the data into this format in this format using the open layers api it is showing in the map format like this you can uh select testy json after that you can make it like this also any other field you can select let me just show you control name also so now under this property country name should also come so you can call the attribute instead of shape also you can call the attributes so now name india is coming as you can see here earlier it was not there because uh it is creating a buffer and then also it is uh it is fetching the this name also containing because here in this table if you see there are other fields country name so you can select multiple just run this okay this is wrong country so now you can see here second column should be country name this is the country name so like this what you can do you can you can even join also with so in our cohort application we will join the data we have text data in one table and we have geographic data in one table so we will join that based on the variable and dates so like this uh this page geojson layer dot jsp page it is basically parsing the data into this generation forward and we are using putting this this we are copying page there and we are just putting this url here so directly here and then we are able to visualize the so like this this data is coming so now this is our very base application i will what i will do i will make a zip of this this app also and i will upload it in the google drive and then i will share the link so you can use this base also you can modify it now we will see however another application the whole covered application looks like so let me just this is the whole folder of kovic dash 4 i will copy this folder so i will not gonna code this whole but i will just give a gl i will just explain this code okay fully let's see and we will paste this here in tomcat apache tomcat web app and here only we will paste this directly i will just rename it to profit dash now we will open folder this kovi dash so i will delete the unnecessary file from here i will leave this uh whatever unnecessary if i write that i will delete those this one i'll delete this one i'll delete this one i will get it okay these are the unnecessary files only relevant files are there right now so this is the gsp files all the jsp which we are fetching the data from the like there is point this is partial json level point so let me open our copy dashboard now with dash slash dot html so this is our data so there are two layers are there support one is circle one is polygon so for basically both these two i've created two gsp pages then this is for graphs cumulative graph world graph this is for graph and this is for counter counter mean this these counters so for this counter we are getting the data for these two graphs you are getting the nut of those these two layers we are getting the data and this for legend follow the all these we are fetching the data from the database let me close this now and i will show you one by one our page so first of all our basic page is covered html this is our basic page here so as you can see here we have used the bootstrap first this is the bootstrap uh so from internet we have you just go on the internet type bootstrap just go click bootstrap here instead of downloading it i have all i have taken it directly from the internet just like the other apis like from here jsdeliver you just copy this one copy this one and put it here onto the simple html page here i've copied it here let me close it then this is the open layers i have already shown you from where you can get open layer just go on here okay quick start or even no need to go to quick start you can directly click here and from here you can get it here this one these two you can copy these two css and js file and then you can paste it here then this is um then this is these two this is a layer switcher third-party plug-in which i already shown you from from where i've got it you type on open layers third party plugin so just go here all layer switcher i think this one only just click here and here from here i have copied it from there just copy one thing here one time here and just paste it here so we have imported bootstrap open layers layer switcher then this is jquery and charges two more things we will import apis just go on google type jquery here there is option for cdn just click on the cdn and you just click your minified version and you can copy from here just copy this script and just import here okay then similarly for the chart just charges for basically chart and or creating charts chart yes here you can click here i don't know from where getting started i think if you go um this use charges dot cdn you click here so you will be able to get the this one you can copy from here so this is the source [Music] you can copy from here also this is the copy url and then you can copy paste it here so we have imported i will delete this one yes so first we have imported all the libraries which we're gonna use then we will define our html page pretty simple then first is first inside the body this is the center code 19 dashboard basically i will move it side by side see this is the first one covet 19 dashboard okay so this is covenant first element then second star then second element is this drop down this this element this is up to this one this is the whole element this one so three things are there start date and date and this drop down is there so the start date end date why it is opening every time yeah start date and date then parameter and parameter is having cases death test vaccination this is spelling these values spelling i have given similarly as i have in my database data so i'll make it dynamic whatever you select here will pass these value on to the the jsp page and will it will run the query on the database and then first the value so this value i have taken from here death cases test and vaccination this spelling is similar to that only after that this is the counter 4 button i have created button one button two button three button four this is the different div okay this is the div and four different buttons are there after that this div is for map i think okay i'm opening it every time yeah now just close it here then this is the graph one graph two this is the canvas so for this graph on graph 2 then after that this is for map this is map this this one is map and inside map we have created a legion actually this map inside we have created a legend so inside map this is the map inside there is a legend and inside the legend again these are the colors and these are text values so for each different this is diff different like this is for legend then for symbol then this is the legion text and then font size everything so inside this legion again there is one element inside there two things are there one is the symbol one is the text so this is the legion then one two three four five six seven classes are there so six different there one two three four five six seven they are there and in individually seven day two things are there okay text is there and then color is there so this is for the legion and this finally is this this is for pop-up okay this pop-up and info is basically when you click on the map here you will get the values inside the pop-up and this will change so this is for pop-up here and after that we have different java this is a javascript code simple map load layer click info click just so we have four the map dot js is very simple map the basic element will be there um this one this layer switcher will be there this layer should be there this these things will be there and these and this load layer means whenever this these things change like death test as you can see so this layer is loaded every time if you change it to confirm cases again the layer so for that function this loadlayer.js file is there then click info and clip click click graph are two different functions whenever you are clicking onto the map two things are happening one thing is this pop-up is saying just selecting this feature and also this graph will change like for china it is showing right now between these states australia so two things are happening so for these two click info onto the map what is the information in the pop-up in this graph these are the four dot js file and also the styling part there's the div html elements but the style is contained in style dot css basically this one if i click here this is the style for map top drop down okay start date and date parameter graph one graph to two graphs then legion region title region text class six these are the six classes these are the colors so these colors are similar to this only which i have defined in the map i will show you map.js file class for all the classes then pop up this is the style for the pop-up the style file contain you can change the style you can change the color according to you by modifying this file now we will go for the basic map.js so these three things are for these are for popup this is the overlay it is adding them only to the map on which pop-up is created after that this is dot parameter change load layer so whenever you are changing the parameter you start date and end it is calling this function load layer load layer is this so it is it will change the map so whenever you are changing these three things any of these things suppose i will change this to june so you see it will change the map and graphs so it is calling that function you change this so it will change so it will call this function load layer i will explain what is inside the load layer first i will explain the basic simple oval view then base base layer satellite and osm and then overlays which is empty right now no layer is there then map new map map dot add layer base my map add layer overlays and layer switcher pretty simple map which i have shown you earlier this is the mouse position over your full screen zoom in zoom out this is the slider this sliders have to full extent okay this is the mouse cursor is there so it's a pretty basic things and after that i'm calling this map dot on click whenever you are clicking onto the map like here so it will call two functions click dot info click dot graph so basically this this this function and this function it require the function is inside these two files whenever i click on the map and whenever i will change these three things start date and date and parameter date start date and end parameter so it will call node layer so first we will see what is inside the node layer just double click this so as as we'll change this so what it will do it will first destroy the line graph and bar graph because whenever we change old graph should replace it will destroy this it will destroy the layers also geojson layers so as we have defined okay these are the geojson layer two geodesic one is point and one is the polygon one then after that it will fetch the values of start date and date and parameter fresh values whatever you have changed here or here it will take the fresh values and it will store in a variable then these are the jsp pages it will call so every time you will for when you will change this thing this date and everything so what it will do for this for this particular parameter between these two date it will calculate the maximum value what is the maximum value for particular and from zero to that it will divide that into seven seven uh classes so that maximum value it will uh it will fetch from the database so this is the url max jsp file max values partial.jsp it will call this jsp page which is inside here this one max values partial so let me show you and what we are doing we are passing the variables start date and date let me show you start date and date and value parameter so these with this very url max we are passing these three values which we have stored in the variable so these values are passing on to the uh jsp page here see this similar page is there you're gonna be connecting to database this is the query you're running maximum sum so it is calculating the maximum between those two dates for that particular so this is how you patch the request dot get parameter parameter then here date date one request on date one day two so these are the parameters passing date 1 day 2 and parameter and these are the values from it is taking from here so like this and after that what it is giving it is giving it a maximum value out of it let me show you how it will give so if i go to this page see nothing will happen okay first inside there is a folder called jsp s1 now nothing will happen because this parameters value has not been passed so that's why we have passed like this url point this this is the way to pass the variable on with the url so we will write let's simply like this one okay [Music] show you some value okay and date two sorry this should be day two is equal to 2 is equal to now this is the maximum value it is test from the from the database so between these two dates and this is it has taken the maximum value from the database and then after zero to uh i'll show you this geojson url max this is the url max this is the url max so get geojson url max it is it is fetching the data as data zero dot max so basically data dot maximum dot max zero means only one entry is there so this is the maximum value after that i am dividing it to divide by seven then different color so seven different colors i have already given this is the rgb code for that one two three four as you can see color one two three four five six seven girls i have already given on based on that i will explain this what is this this is the way to style the vector layer in open layers and after that it is running the basically loop seven times okay then value parameter is greater than this and value parameter is less than this basically for i is equal to zero and different this is this is also uh difference is basically divided by seven so if well if this feature dot get value value parameter means whatever parameter you have selected death or vaccination so greater than particular value and less than this this value so it will give that color color i this color then when i is equal to 1 is equal to 2 i is equal to 3 so it will create seven different colors between seven different values like this okay so this is the way to uh basically get the maximum value from the database and also two other urls are there as you can see here this one not this one this one this is simple as a geojson one so nothing different as earlier i have shown you simple only this is the query only we are passing the parameter and date one day two simply so here what we are doing here we are joining as you can see we are joining the uh database uh you have joining the two tables first we are we are fetching this we are creating a sum of daily data between here suppose you have selected yeah suppose you have selected between these two to this date and this one confirm cases so what it will do here it will basically will take the daily value for all the dates be all the days between these two dates and it will it will make us some of it like some daily this is the parameter it is passing daily underscore because here daily death daily cases so it will replace this parameter which we have selected on the drop down okay between these date and this date so first it will first it will select from one table from basically this table it will select between the date this this table and it will join it with the country with the country name so here as you can see selected on where selected dot country name is equal to countries not contrarian so country is having the geographic data of their country and we have joined it based on based on the country name like selected selected parameters thread containing stg json st simplify simplify basically we have generalized the data so that it it it will not be having so many nodes so it will be pretty much lighter from countries okay so basically it is joining based on the country name joining two table so if i copy this if i run this here i'll show you how it will look like instead of this parameter you can write any parameter name suppose cases select some daily cases like this daily cases as school be like cases [Music] country name from world where date one is greater than we have to write some date here 0 1 0 1 2 0 2 0 and day 2. 0 1 0 1 2 0 2 1 okay so if i run this okay there is one uh error let me just make this error i will create this thing fine so now you see what it has done it has taken the country name and this is taken the geometry from the country shape file and it has created it is created a sum from between these two dates of the daily cases so it has joined basically two two tables see it has selected sdg json countries.jio from countries left join select some daily cases sum between these two dates from world cup data where date is this and it is joined based on the container so only we have what we have done here we have just make this dynamic these value we have passed so if i copy this here and i'll paste it here like this and i will pass parameter and 2 equal to 0 6 0 6 2 0 2 1 so as you can see now this is the geo json format it is fetching between these two date for death parameter so this is rendered as a let me show you how it will be rendered this is rendered as a point and radius is based on the value of the so like this we have created the data in geojson format so like this simply this is for point and this is for polygon and after that using this maximum value these are the style we have created two styles this is for one this is already seven colors we have given here and one by one we are assigning it and here this one vaccination test and this one sorry uh this this is for legend here it is changing this value in the region changing every time you change this so this value will change now as you can see this this value will change so this is here this is changing from this this is the id of the html uh element and map dot round divided by it is just giving that and also legion title it is changing based on this now it is death if you select it to confirm cases it will make it covet cases like this so these two and this is for these these three lines are for changing the legend one so we are using jquery for that jquery we have used for this only and this is for um i think okay this is the polygon is fine then this get style 2 is for this radius basically this one this circle radius based on the value here this is so it is changing the radius based on the value i plus 1 basically 7 times it is 5 times it is making i 0 1 2 3 4 5 and this is the value value parameter means death or cases or anything so it is creating a seven radius different if you um uh uncomment this so you it will add label also so we will not i will not adding layer label because it will be too congested otherwise it will label also based on the parameter feature dot it will give the country name also what is whatever is the value of the parameter it will give so with not label if you want you wish to label you just you just remove this and comment this txt this one okay now this is our final layer one is the geojson layer this is the url url poly and this is a polygon and then second one is geojson point url is url point these two url you have already defined here your point url poly okay and after that we will simply add this get layers will portion inside this render panel then this is for graphs again for graph we are creating a jsp file cumulative graph then we are passing these values to it and this is a way to create a graph here this is we have used similarly geojson dot url this url we are passing and we are getting the data in the geojson format i'll show you how and this is the chart data and this is the chart my canvas one and this one my canvas one this is the one data is the chart data here basically this one this is the chart data data is score basically we have defined here if you see from this url it will fetch the geojson data this is the three empty arrays then data.i dot date then value parameter so this is how we define that chart using the chart.js library and we'll display it so let me show you how data will look like suppose this i will pass this one okay where is that this one so i will simply copy paste this one this one and value is fine okay copy dash i have to make a [Music] so this is again it is fetching the rata date death date death this is the cumulative graph so if you make it daily [Music] so it will give a daily value date that's date depth so two graphs we have created here and we have passed on this thing this is the cumulative graph and this is the this is the function it's passing the url it's fetching the division data then again it is creating graph from here this is the graph number one okay and this is the graph daily graph again another url again another jsp file another graph so two graph we are creating here similarly we have two jsp files here see two gsp files for geojson layers for map and two for graph graph world cumulative gravel daily okay and this for maximum value already we have seen now these were counters counters also we have similarly to jsp file this is the counter world you pass this one here so it will give you the and here this is these are the cases that test or the buttons we are passing on the values onto the button simply here if i type this now here you see this this is the counter between these two dates how many deaths how many cases for whole world and okay simply we are putting those values here okay so this is for load layer whenever we change anything onto the map on those three things it will change this counter these graphs this map and this descent and finally after this click info and click click graph whenever we click on the map here map.js i have already told you whenever we will click here it will call this function click input event so just go on the click info to create a layer because as you can see when we click anywhere it will create the pop-up and it will highlight the feature also here see here it will highlight the feature also so here uh it is creating a new uh highlight style whenever whenever we are clicking okay this is the highlight style and this is the feature overlay this is the another vector for highlighting the feature in the blue color and again is saying if feature is there then geometry get the coordinate where you have clicked it then this is the pop-up inside that you have right you are get you are basically putting the country name and the covet cases so there's the same thing this country name then value of the parameter for that particular country simple kovid death means death cases it will accordingly it will change if you selected uh death so it will whenever you click here it will change it to the coffee depth go with that now when you change it to the tests it will change the kovid tests okay so this is for the pop-up whatever matter is inside the pop-up only so this is for only uh click info whatever information you have to put in the pop-up and how the pop-up is created this function is for that then click graph means it will destroy the line graph bar graph and again it will fetch the value country name it will fetch the country name also on which country you have clicked on start date and date parameter value parameter now one extra thing you have to pass on to the uh url parameter date on day two and country also so simply if you go inside this you will find graph cumulative this is world cumulative okay this is for world when you click it should be go to the country so this is the query we are running for that and this is for graph world daily graph country cumulative is fine graph country cumulative this one so here simply this query only we have to replace this parameter is replacing death from world cup data this this simply so if i show you you have to pass one one extra thing only this one and here you have to pass one extra thing and country is equal to suppose for india will see so it will create for india date wise how many deaths are there whether it is cumulative if you make it simply and daily so it will give the daily values here and only there is a difference of query only if you go and if you see these queries select daily in daily one country cumulative only this is total underscore this is the parameter everything will be same from this table between date is greater than date and country name is equal to order by date so this is a simple query which we are running like simple query if i run here [Music] so now you guys you can see here it has selected daily cases on particular day for their particular country so you can select here date also and country name also like this so this query we are running as you can see here in this this same query was we are passing the this dynamic values here variable and date one day two and we are parsing this data as a here like this simply so this is the cumulative graph again we are using this jquery you're passing this url patching the data and this is the graph one graph two daily graph and then counter also we are updating again simple this is the counter here again we are updating and for this counter also there is this is the jsp page pretty simple query will be there for this so let's delete some daily death daily as vaccination from world data only day for that particular date one and day two this is so basically these are the gst page which we have used and this is final i think so this is the whole folder what i will do this covid1 html style one is one css is nothing basically this is just different arrangement what i have done here i'll show you simply if i open this kovid1 html so the arrangement is different the map will be like this it's a bigger one you can switch on switch off one layer from here also like this and the graph will be here if your screen is pretty big so this you will like this also so that's why style one this uh style one dot css and code is for code and html and the style dot c is for copy dot html page so i think as you can see here you can see the value of particular day also like this one more thing extra can be done whenever you click on this particular day so this map will update for that that that thing can also be done so you can click here that graph will update everything is updating you can see the counter for the particular country is updating wherever you're clicking usa so what i will do i will make a zip file of this whole page is kobe dash this one and test app also both things so only you have to install the tomcat you have to copy those jar files which we have shown i will make those jar files also inside the zip just copy paste this whole folder inside your tomcat and just you have to modify only these things inside each and every jsp page you have to modify this this database name and this username password and this port number and this database i will make a what i will do i will make a backup of this so you what you have to do you have to follow two three steps first this backup just restore this create new database and just right click over it and just restore and select the backup database so you can you can restore first then you can install the tomcat inside just copy paste this dash folder and those jar files also copy paste in the lift file and then you can just run this page so you will be able to and using this page basically you can modify this portal you can use it for suppose you have a temperature data time series temperature data that also you can do you have rainfall data and vector in any tabular format so you can do that uh do that also and also uh this this simple page which using this simple page also you can take a help you can create a more geoprocessing function suppose is such as basically intersection also clipping all these things you can do so i think this this video is pretty long and i hope you will be able to understand all these about jsp and everything because this is the that's why i have given this basic page also so you can make up first you can create a basic page you can get understanding of it then you can see this kovi dashboard so i will attach all these data inside my google drive and i will give the link in the description so guys that's it i think from this video and i hope this video will help you in understanding because a lot of people in the comments were asking for me to make a video on developing the web guys using the post js and open layers only without any gis server without any dependency of the jio server and anything so so i hope this will help you so if you like this video please give a thumbs up please in the comment section you can ask if you are facing any problem i will try to reply to most most of the comments and also please subscribe to the channel i have seen in my analytics that around 85 percent of people who are watching my videos have not subscribed please please subscribe the channel it will motivate me further to upload the video so thank you thanks for watching

Channel: OpenGeo Lab

Views: 10,955

Keywords: webgis development, openlayers, postgis, postgresql, JSP, java server pages, GeoJSON, JSON, Chart.js, Jquery, Bootstrap

Id: 9N64Hy68Tww

Length: 97min 8sec (5828 seconds)

Published: Tue Oct 19 2021