Create Fast cached Base Map like Google Map based on OSM data using Postgis, Geoserver & Tilecaching

hello guys welcome back to another video so in this video we will gonna see how to create your own base map for any web gis application like in any web gis application we put some base map onto that and we overlay our data over the base maps so we use uh different kind of base maps such as for s3 satellite base map or osm based map just like if you seen on this screen so this is the osm base map this is the satellite base map and this is the osm india which you which you will be able to see this is created by me only so what i have done i have downloaded the osm data from the internet for the india country and then we have i have basically pushed the data into the post js database and then using jio server i have published that and we have i have styled it according to the like similar to the google map so basically we will see how to create your own base is yours because in on like from osm you are fetching it from the internet somewhere else but right now what we have done we have basically stored the data in our machine in our database and we are serving it through the jio server and we have styled it so i try to style it as close as possible to the google maps so basically it's a combination kind of two things that data is from osm openstreetmap data that is free and styling is like a google map if you can if you see this is the google map of the same area so i tried to be as similar as possible so i took help of this on github this is the link for this basically someone has given for hungary country but i tried i have changed it according to the india country because scale and everything is different and also the layers are quite different so in this video i'll show you how to download the osm data then how to put the data inside the post gis database and then how to publish through your server and style it basically according just like the google map and also after that how to serve it because the data is very huge so like if you which basically fetch the wms service regular it will be very slow so we'll use you we will be using jio webcast or tile caching so the basically it will face the data very quickly as you can see i'm zooming zoom out it is fetching pretty quickly so as you can see it is the coloring is quite similar to the google map so we'll see all these things how to do that as you can see i'm zooming out it's pretty quickly it is zooming in and zooming out so it is because of the tile caching we'll see how to do that also so this is the whole data for india as you can see so i have downloaded this from the osm website so let me show you how the data look like at that zoom level so we can compare between the data sets because the data is different google is having more detailed data than osm but i try to follow the styling of google map only as you can see right now this is and this is it so i tried to be as close as possible as you can see the root color of the roots and other things is quite similar so we'll see how to do that so all the data is in my machine and i'm serving it through the jio server and we're styling it for the juicer as you can see right now as you can see you'll zoom the coloring and everything width of the road and everything more detail will come so i have not used the point data like osm data has point line polygon data so what i have done basically i have segregated those line and polygon data into different layers such as roots waterways rivers buildings etc so i have not used the point data you can use your point data also so that's why you are not able to see uh hospitals and all that point data basically you are not able to see because i have not published that but you can publish that data also so as you can see you can see it looks like just like a google map so first for that what you have to do you have to download the osm data so on google you have to go and just type osm done and let me for india if you type so this is the website download.jiofabric.de so you just click here i just open it so here you will be able to download for your country like directly it is coming for india so if you go up one level up so asia so like this for asia all the countries are there you can click on the particular country and you will be able to download the data in different formats such as dot pba format dot shp dot this is the basically zip zip kind of format very compressed format so you can go further on one level up and you can download for you can select the region and then you can select the country or you want to download the region wise you can download the whole vision so i'll go for asia then i'll go for india and here there is india latest osm dot pbf so we'll be using the dot pbf file so we'll import the data into the post js database so you just click here you will be able to download the pdf file like this so i have already downloaded it so i will cancel it so it's around 900 gb i'll show you this is the data dot p5 around 9 9 24 mb or something this file is there now second thing what we have to do we'll be using osm to pj pc sql software for that for importing the data so just write on google osm to pgsql.org download here we have to go i think you just go on the documentation and just click on the installation then installing on windows so you'll you have to download the binaries so you can download you can download the pre-built libraries so just download from here and there is the different versions so just download the latest one osm to pg sql latest dot zip file so you will be able to download the dot zip file so i have already downloaded it i'll show you so this is the basically osm to pc sql zip file so just extract it unzip it so after unzipping it you will get this folder osm to pg sql dashbin so after that what we have we will import that pbf file to the pos js database so for that you need to have a postgresql database download and post post gis extension also so if you don't have the database installed you can go through my earlier video called web js development from the scratch in that in the timeline of the video you'll see installation of the post postgresql and postgas database so you can go through and you can download the database and you can install as per the instruction in that video so i have already downloaded it so you will be able to see the screen this kind you have to just give the password to it this is the post postgresql database after that the version 30 give the password and you have to create an empty database after that so for the review i will share this link also you can take help of this link basically i will give this link in the description so you can take the help of that also because i have followed this tutorial only i have two few of the sql queries according to the india and few like css styling also i have to ignore according to the india because scale is different and boundaries are few boundaries are different so administrative boundaries the scale of the boundaries are different so i have tweaked it basically so you can take i will give this link you can follow this link also so after that here what you have to do you have to after opening it then database just create any new database so let me like i have already created osm india so i just again create one osm just for the showing purpose then definition here you have to give template so when you install the post js extension of the postgresql database so it will ask you to create a template database so if you have uh created that so you will be able to see pause via sample just click that and tablespace you can pg default basically the it will take the default space and just save it but if you don't you you haven't installed that supposed database sample so what you have to do only this we have to run create extension post gis so when the database is created after that you have to just run the query over that i'll show you how to do that so it is creating a new database so you have to create an empty database basically and that should be specially enabled so like this is the osm database so if you don't you haven't installed the basically that post gis sample kind of thing so what you can do after that just right click query tool and you can simply run this create extension post gis so it will create that also but if i'll run it so it will say i think already extension already exist because i have given the while uh by creating the database i have selected the schema of the database already so i'll close it so now what we have to do we will run one basically command to basically uh import the data this dot pbf file to the database so for that i have already written one command so this is the command basically let me i will give this command in the description of the video let me zoom it yes so as you can see here this is the command osm dot pg sql this is the local host this is the port like i have installed on 5432 if you are if you're taking the default uh port so in your case it should be five four three two when you install you will be able to see on what port it is installing so in my case it is 5433 but if you're using the default port file installation so it should be 5432 and this is the postgres username kind of thing directory and this is the basically name of the database so like what name i have given i have given osm only so i will remove this this is the database and here you have to give the path of where you have kept your pbf file so i have kept in the e drive so i i have given the path of that only so just you have to copy this command and wherever your folder is osm pg sql dot bin just here go in the explorer path just here type cmd so this command prompt will open this path should come after that just you paste that command which you have copied paste here and just enter so it will ask you the password of the database so you can give the password which we have given while installing the database and put enter so now it has started basically importing data like setting up table so basically it will take around for my machine it took around four to five hours so i will not cannot wait for that so i have already imported just for the showing purpose i have shown you so i will cancel it basically so it will take four to five hours because the data is huge but i think for smaller countries will take less time so i will cancel it okay so your final screen should look like let me show you if i have some sample yes as you can see osmp school took that many seconds overall so you should be able to see all post processing on the table so it will create few tables in your database like point line polygon and roads four tables it will create finally planet osm point pen into some line plan do some polygon then into some roads so it will create four tables so after that only final message would be like this only so when it is you see this this message it means your data has been imported so what after that what you can you can go to your database like i will not see this database because i have already imported in osm india so inside the schema you have to check only public first public schema and here select public and inside the tables so as you can see these many tables has been created line nodes point polygon real estates so these many table need to be created in your database it means you have imported the data so now what we'll do basically we this data is like polygon is having administrative boundary building everything water forest everything is in polygon only and line all the roads and everything in the line and point all the points locations are there so what we will do we will run some sql queries and we will segregate these point line polygons into the different different layers so we'll create around 20 layers so that query already have written so just you have to run it in the post js and automatically it will create [Music] and it will create a new schema called osm so what i will do i will rename this schema because i will create a new schema name osm i can save it like this okay so after that now this there is [Music] these are the basically sql let me zoom it a bit these are the number of tables is this whole query you just copy paste and you run so it will create 20 basically 20 tables so as you can see first it will create a new schema osm like here it is schema and then that's why i have renamed it to sms so it will create a new schema osm so your data is in public schema so we'll create a new schema osm after that it will create a amenity new table and it will put data it will take data from the polygon and this is these are the condition where it is college community center courthouse all these things it will put inside the amenities then buildings it will create a new table buildings and it will use these conditions okay where area is less than this okay and for forest park this is the condition like greenery green garden reserve forest all these things it will put inside orchard park it will put inside this layer or a spark so you can modify this for lake also as you can see water and everything so these are the conditions for minor roads motorway motorwheeling so these are very pretty generic for every country only you have what you have to change because i have modified for administrative boundary only because in case of administrative boundary it's different for different countries like these are all settlements i've given something level eight settlements and this trunk primary road this is water then water way this is like for state i i have basically done some query on to the database to know that administrative level four is for state level boundary for india for district it is administrative administrative level equal to five and boundaries is equal to administrative that sub district it is this so like this i have basically for this administrative boundary only i have modified the sql queries otherwise for all the other layers it is quite generic for water buildings and everything it should be same for you only for your straight maybe you may be having counties then sub counties or sub districts or anything so administrative boundaries different so you can on google also you can search osm data of country wise they have defined which level which boundary is there so i have searched on the google so i found out that at four five six the state district and some district level boundaries there so i don't know where i start but i think if you google it osm and this trade levels yeah if you search this so you will be able to find something here yeah there isn't see this table is as you can see this is for country wise table so i for india i have checked here on ghi as you can see here state boundary is level four district boundary is level five sub district boundaries level six so you can check here for your country what is the level for like for indonesia province is four cities five sub district is six then village is seven so you can modify this here like for some district you can change your level here because i have modified it i have taken the code from uh here only so for hungry country it was like seven eight nine or something so i have mod i have modified it according to my data or else what you can do you can check here also you can run if you run any query tool let me show you you can check like this let's select star from this is this is the table name as you can see in the public if you go inside the public schema this is the polygon boundary okay star means it will select all the columns here [Music] the field name we have to give the field name so field name is this admin level so i will copy this [Music] so one by you one by one you can check like this so let me check for four [Music] okay so i will limit it to okay let it run let it run so i think double door yeah here just double dot i will remove this and i will run this query so now it will what it will do it will fetch all the polygons from that uh planet osm polygon table basically data where administrator level is four and the boundary is administrative so here i have checked it so you can see in postgis nowadays you can see the polygon shape also geometry also using the geometry viewer so you can check like this also otherwise [Music] there is this this basically this table is given for every country so you can check that otherwise no need to modify other boundaries uh because other are pretty generic so if you run if you're using foreign data so you can just copy control a control c everything and you just run this over so as you can see this this is only this is for one table this is for another table like this 20 queries are there if you know about sql if you run this it is pretty self explanatory so i think it will take a bit of a time to run this query so we'll wait for that then we will run that query so now as you can see the query has been executed and these are number of the fields so this is the admin level 4 so if you go to the last column here geometry column and if you click here so it will plot this boundaries also you will be able to see the geometry of these as you can see here these are the boundaries so now i know this is the level four this is my state boundary like this i basically executed for five four six four seven eight nine ten is the maximum i think so that's why i basically had an idea about and also from this source it's quite clear you don't do not need to run this because i found this source later on just for confirm base for confirming the levels i just ran the query so if you click here you'll get this also so like this you can run the query here so now what we'll do we will basically i will close this query and we will run you carry the query for segregating all the tables basically so osm here you have to just click on query tool just select all and by default we are using this projection is 3857 this is the projection we are using the data comes directly into this so just copy paste here and just run this so it will run like it is saying table emulate does not right now table does not exist but skipping it will create a new one so it will take i think half an hour or more than half an hour so it will create it will take some time to create so what i will do i will cancel it just i will show you what kind of tables you will get like i have given the osm one i have i ran already this query so these are the number of tables you will be able to get amenity boundary buildings districts forest park lakes minor roads motorway pedestrian rails road settlements states sub-districts [Music] trunk main primary trunk water water way below some district means very i think ward level or something kind of levels boundaries there so uh i will cancel this so you will be able to see after executing this it will take around half an hour or maybe more so these you will be able to see on this schema called osm like which i have renamed it to run this code otherwise the schema will be created osm and inside that tables these 20 tables will be created so i will cancel it i will stop it here i will rename my schema to osm because i let me refresh it okay so you should be able to see if you just modify you can modify this query ssql query your data set and you can run this now after this we have we have basically data inside the data project database we have segregated it into the different layers now we will publish it through the jio server so let me close it so now what we'll do inside the jio server i have already published it but i will show you one or two layer how to publish that and how to do that so if you have installed the jio server if you haven't haven't installed the user you can go through my video with web js development from the scratch and you will you can go into the timeline of the video and you will be able to install the jio server so if you install the geo server you will be able to after logging you you you can see you will be able to see this home screen so first you will create you can create a new workspace like i have already created osm india but i will create a new one just for the showing my pass like simple osm and you can give any name here let me give www.osm.com just save it now we will create a new store so now your workspace has been created osm then we'll create a new store here and we'll add new store and just select post gis database because we are fetching the data from the post gis then select the workspace from here osm give the data source name let me give osm only and here just you need not to change this to 5433 because i have installed it on five four three three otherwise you can let it be five four three two just you have to give the database so i have database called osm india that is schema you have to change like it is taking from public but our schemas osm because my our default schema was always public but after the tables which we have created 20 tables out of that we have created a new schema osm then you have to give the username password of the database just save it so now you can see all the tables here one by one you can publish this data i will show you for only two three layers accordingly you can publish all the layers and then we'll see how to give the style to it so let me go for this water so click on publish and here you have to either you can change the name here let me give because already water name i have given so you have to change it i will give water one you you do not need to change so i have already published it that's why i'm renaming it here the native it is taking this projection is this you can change the production here according to your need you can give if you want to reproject it to you can uh give four three two six any projection you can you can give just whatever projection you give here just after that select reproject native to the declare so it will reproject from this to the declared one just you have selected if you you're changing the projection then you have to do that otherwise you do not need to do anything just let it be three eight five seven and let it be whatever it is keep native and just you have to click compute compute these two you have to click and after that you have to save it but we have published it but we have not given any style so we'll publish another data then we'll give you how to give style to it then we have to click add new layer again because you want to publish one 20 layers like that one by one so you have to go to your like osm osm this is this was my so you publish water so it is you will take here after that let me go for boundary again here same thing you have to give like i will change this name to one one you don't have to do that because i have already published it that's why i'm doing this then you can change the position according to your need here then you have to select reproject network to declare but i am not changing it so i will just do like this like this and i will save it okay so like like this you have to do all the layers i will not do i will just doing it too so for other i will let me go for one more so three layers would be enough i think let me go for trunk main this one that's the primary road again i will compute for data let me give the name to it one [Music] and just save it so now if you go for layer preview you can you will be able to see these layers let me show you how it looks sorry this is osm boundary one trunk main one so i will click on open layer this one so as you can this is the boundary boundary of the india this is for the roads the by default one and this will be the water because data is pretty huge that's why it is taking a bit of time so we will see how to handle the data also this is for waters so we have not given any style to it so now we will give the style to it so for that before that one thing you have to do so we will be using this by will not here you can go on the hairstyles and you can add a new style but by default there is a xml kind of styling is there like sld file so we will not use that we will use css styling for that you have to install the jio server plugin so just you have to go jio server 4g and you can go for download like whatever version you have you have to download for that version only so you can go for extension here so we will download the css extension but here you have to see one thing you have to select your version like here it is to 2.919.1 so i'm using this version 2.19.0 i think so that's why i have downloaded for same version if you are using for 2.1 8.1 exact version you need otherwise it will not run because i initially i i have just downloaded 2.19 only and so my css styling was not working my user was crashing but for exact version like you can check your extract version from here about your server if you click so it is 2.19.0 so initially i have downloaded for 2.9 basically 2.19.1 so that's why i was not able to run it properly so you have to download for exact your version here just click that version like for 2.19.0 this version then i have downloaded here css plugin jio server slash gss plugin zip file so you can click here you will be able to download a zip file and after that what you have to do you have to go wherever your server has been installed just c drive like i have basically deployed inside the tomcat if you have installed the dot exe file directly so you have to go inside the juicer or folder like this jio server here inside the web inf and here it is this library so you have to just put that folder and you have to unzip here [Music] all the like let me show you inside the downloads so i think i've already downloaded this you can go in show folder this is the plugin you have to copy this plugin you have to copy this plugin you have to paste inside the jio server web inf library here and you have to just unzip it you have to just unzip extract here you have to click extract here extract here on it so it will extract all the files inside data as you can see if you double click it you will you will be able to see the jar files so here it is so if it asks you to overwrite it let it overwrite it okay and after that restart the new server once so once you use restart the user then you can basically give the styling to it so now we will style it now we have published the three layers so similarly you have to publish all the layers one by one then you have to style it so i will show you how to style that so i have already created the styles so we will see how to create a style here now so you just go to the style here and create add new style so let me give some name to it like trunk i will give all these styles for all the 20 layers i will zip it and i will give the link in the description so you will be able to give you will just you have to just copy and paste everything like trunk main and here you have to format select css because after installing the plugin you will be able to see this one and then [Music] i have to like this is my osm trunk main.css file this you have to control a control c just you have to copy paste here so this is pretty simple if you see this is the font and everything level this is the scale between this scale your road will look like this between this scale and this scale your road will look like this so this scale by skill i'm changing it you can change the color according to that you can modify the scale also just validate and just say here okay similarly for i think water [Music] we have published boundary so let me go for boundary okay and where is my boundary style let me check in this one is my boundary css just copy copy paste here and just select the format css and just save it and third one was why think water [Music] so i will give this sld5 basically css file for all the layers so one by one only you have to create new style and you have to save it this is my osm water it's a pretty simple one just create a new one just select the format css here and ctrl v validate and save so for all 20 layers you have to give the css i will give the file in i will zip the file css file and i'll give the link in the description you can download and you have to create 20 styles like this then again you have to go back to your layers and you have to go that particular layer for which you want to give the style i think this is for water so in you have to go publishing tab now and here you have to select this default style you have to change you can just select water this one and just save it okay now go for another layer all three layers like one by one you have to change the style for either you can create a style first then while publishing only you can give the styles then trunk main go to publishing tab i don't know what name yeah trunk main so these many styles are different skillet you will be able to see to save it then another layer was i don't know which one boundary i think yes this one is boundary go to publishing tab again and just select boundary before boundary this is boundary and just save it now if you refresh and you preview the layer again so now this is for water boundary water layer it is in blue color like this and this is for boundary gray color and we have given the grey color and this is for roots so when you zoom it more and more roads will come up and it will change the colors like this if you zoom more like this so like this you have to give for different different basically for all the layers you have to give this kind of okay so i'll close all this so already what i have done basically is you can see so many layers are there you know some district boundary buildings districts forest park if you click on forest park already i have given the color motorway pedestrian rails settlements everything i have given already so now like this is for for a spark so after publishing all the 20 layers now we'll you have to create a layer group we create here layer group we will group all this layer into one then create add new layer group you can create any layer group i will give just any name group and give the title let me give group so i have already created a layer i'll just show you how to add that and just you can select the uh like os and this one okay you can generate bounce after first you have to add layers here you can select the workspace because only those layers will visible like add layer so you'll be able to see only three but if i select my earlier which i have created osm india so you you can see earlier all the layers so one by one you have to add this here only so i'll show you for one two only for this earlier one on different three layers like osm i will add layer so i have created basically the ascending and descending order of this also i will show you what it should look like so i will give the snapshot of here i will attach this also so basically you have to in this order only you have to add inside a layer otherwise the the base type will not look good so there is a certain order in which you have to add the layer inside the layer group so let me add another layer such as trunk main then let me attend the layer water this is the order so first boundary for a spark water like this only this order only you have to do the boundary is the lowest one this first means it is in the bottom then for a spark over it then water then lay the states so like this you have to do this water only so this is the bottom one this is the first one so like this 20 layer you have to add like i have shown only for three layers okay let me just make it over this so i'll just show you how it look like for three only just save it okay field bounds we have not created so after adding it you have to just create here generate bound so it will create the bounds of that now save it so now if you go for layer groups here and you go to layer preview now so you should be able to see at the end there so this is the group osm group just go on open layers so why it is taking too much of time because the data is for three layers only data is that much huge if you see for 20 layers it will take too much of time so as you can see now this layer has been grouped but it will take too much of time to load so your jio server will definitely crash so we'll see how to make it a very fast rendering so we'll see how to do that so after you create the group according to these layers 20 layers i'll show you how to do that so i'll go for layer group again so this group i have already created test one here test test i have added all the layers here one thing what we have to do here there is option called tile caching this is style caching so for that uh what you have to do package you have to enable the create a cache layer you have to check this so if i cancel this i have already created a cache so that's why it is saying so you have to create a cache layer you have to check this just you have to select only one year image png two will be selected by default and here you have to create a grid set like right now i will delete this grid side because by default only two grid sets are there for four three two six projection nine zero nine three so for three eight five seven we have to create a new grid set so what i will do i will delete the grid set which i have already created this i have already these these all are by default which i i am not able to basically select so this i have created epsd3857 but i will create a new grid set for you so if you are using the two 4326 projection this one on nine zero nine three no need to create a new grid site but if you are using a different one so you have to create like i will create a new grid set i will give it nine three eight five seven okay you have to give the coordinate system here i'll select here otherwise you can find your projection here for whatever projection you are creating itself whatever position you are using in your layer just type 3587 here this your sudo marketer you have to select this this one then compute the maximum maximum one just do not selecting just you have to add zoom level here after that skill denominator or anything like add this just from level zero zoom to three so up to 25 you have to create 25 26 3 4 5 6 7 8 here you can see the scale and 10 11 12 13 14 you just see the scale here it's 34 000 so up to 20 or something we have to go at full scale basically two thousand one thousand twenty one twenty two twenty three twenty four so here twenty four let me create one more so basically what it will do this jio tile caching what you do basically it will create the tiles and it will store in a in a basically memory in your machine and whenever you overlay you basically get the request from the server it will give the tiles so every time it will not criticize it will create as it will store in the machine directly it will send those tags so the basically fetching will be very fast so we are creating tiles already so this projection there is no already five four nine double zero nine one three projection and four three two six already great sets are geo server has great sets but for other projection suppose you want to use utm 44 so you have to create a grid set for that so then after that you have to give a name here some name 3857 you can give any name okay let me give e p g something name p g i will give this name just you have to select this projection from here you have to find that rejection compute this one [Music] and if you are using four three two nine zero no no need to do that already jio server has defined that you have to add the zoom level to it then you have to save it so now in the grid side as you can see you have to one eps g and this otherwise you cannot delete because by default for this google has created okay so as you can see in my earlier one already 53 mb it has used so it has created 53 mb of tiles of my open street data so like this it is 0 right now zoom level 26 so after you have created the grid set [Music] and then you have to do again you have to go back to the layer groups you have to select the test and you have to go to the your layer group where you have added all the layers like this you have to go to the tile caching and here you have to check this create a cache layer for this group enable caching let it be four by four just select the png file then you have to add here eps let me remove this grid set you have to select here let me select eps3857 you can create this you can select this also this one whatever git set you have created add here and this is the public zoom learn mini maxim cache let it be like this only and then you can save now you go to tile caching so now you can see here this is basically those many lines already tile caching are there this osm india 53mp already has been stored your osm group for those three layers it has created zero so what i'll do i'll remove everything i'll show you how to do that again i will remove all the cache just remove so there is no cache layer right now again i will do it so for few of you what will happen if you when you click on tile layers you know you will not be able to see this some error will come definitely because in my case also it happened so when whenever i clicked on tile layers the error happened so what you have to do for that inside the juice user folder data folder and here it is sorry data gwc layers here you you will be having some files just you have to delete those files you have to make this folder empty so after that you just restart the juice server when you click on dry layers you should be able to see like this empty one so again i'll go to the layer group just for the showing purpose i am doing this test this layer group these are the layers then tile caching after the tile caching like this is empty right now then create a cache layer for this group enable everything just uncheck this jpeg and remove all this and select to epsg 3587 just add it here and just save it so now if you click here try layers so now this this come here okay and if you click here you can preview it don't preview it from the layer preview like here layer preview here will be on the default wms so that would be very slow but if you preview from here as you can see this from gwc demo geo web cache so how quickly it is loading as you can see now see pretty quickly it is loading so what it is doing first time it will take some time in your case so whichever reason you will you will zoom in so it will create a tile of that it will store in the machine so once you have basically zoomed into every portion of the base map so it have create it will create a tiles for that it will store in a file machine and it will directly give that to the basically uh it will it will give the data to the basically to the client side so like this very quickly it is as you can see but if you go for same layer if i go for this layer preview directly i'll show you this is my layer group test osm india test so it will take some time it may not take that much time because i have loaded several times but as you can see it is still loading loading it will take too much of time so as you can see but here so i'll close this here as you can see just if you refresh it if you go this one this one so how quickly it is loading so this is style caching so if you have very huge data so you can use this style caching loading your data pretty quickly these are the zoom levels and all so as you can see now so this is basically this whole thing will be you can read this i will give the link [Music] so using this also you will be able to if you follow this you will be able to do this kind of use style caching and all so now thing is this now you you are able to do that but now if you want to basically use this base map in your web gis how to do that because it's not a simple wms service this is wms style service so wm wmst service so you have to use we have to use that so we'll see how to do that so i think our map looks like a bit like google google map so i have not taken only point data so further what you can do you can overlay the point data over this and you can give the different symbols because i did not have the symbols and markers for particular like hospitals and schools and everything otherwise i would have done that also like in case of google maps if you see the data you own the labels so you will see lot of these markers and all so you can do that also further so let me now close this and we will see how to use this in your web guys application so like this is the webgs html page which i have created in that i will switch off all the overlays okay these are my base map this is my basic osm it is coming from the internet as you can see this is the satellite this is also coming from the internet and this is none no base map and this is osm india this is coming from my jio server and it is loading quite fast as you can see data is used but still it is rooting very fast so you can basically change the disk quota of the data also like if you click on the disk quota here it you can maximum tile cache size 50 gb is there you can change this basically and it is showing 53 mb only i am using after 50 gb so like this you can increase this quota also of the cache tiles now let me show you how to use this basically in the webgis so this is a simple html page test.html i will share that will give the link of this also and just you like for simple what for the simple wms what we do we'll give like this new over layer dot image image wms like this we give india state jio server wms like this and we will add it directly but for this tile one what you can do we have to use as you can see here you have to use wma wmts service so here the when you click here on this style layers this one so you can go on the view page source view page source here here few things you have to copy from here like these grid names and this resolution so here what you have to do first you define the projection so projection is ol dot porg 3857 then we are getting the extent like projection extending we'll get projection.getextent we will get the extent of this then map extent so this map extent you can copy from that source where is the extent let me check here it is this is the extent of the map you have to copy this extent from there okay and then matrix level i'm basically i'm using this matrix id's new array26 array basically the zoom level of 26 so either what you can do you can directly copy from here this this scales grid names eps 0 1 2 3 this thing you can see from here you can go to the grid sets and you just click here eps 3857 which you have created so these are the names 0 1 2 like this 25 so what i have done basically i have created an array of it and 0 to 26 means this one only i created 20 sorry this is the 25 level so 0 to 26 i am given and then i have stored into a array a psg column this z is 0 1 2 3 so this only then this is the resolution that also you have to copy from that source this source this resolution just copy this whole row this resolution just copy from there and this is how you write it new or layered or tile you just give any name to it type base if you want to make it a base layer then give type base so you will be able to basically see like this inside the base otherwise you can make it overlay also so if you if you remove the type base so it will come into the overlays then you have to give the source well source.wmts here you have to keep because we are using the wmts service of the jio server if you go to the home let me show you so we are using this one wmts service this service of the jio server and here you have to give the lower layer name osm india column test this is the same layer if you go for layer group you can find the name here and layer preview if you go the third page this is this is osm slash test this is the layer group you have to give that name then matrix set is epg3857 that you have to give this is the name of the basically nothing whatever name which we have given to the grid set this is ephd 3857 this name this is the name only and finally the projection is already you have defined this projection then tile grid is styled wmts only this extent you have to origin of the extent so what it has done is it then you get top left of the projection extent so this projection extends getting the top left corner resolutions means this resolutions and matrix ids means this matrix ids either you can take this matrix it is directly from this page this page from here you can copy this whole and you could copy paste that there and after that just you have to create a layer over layer group and here you have to wear tight into the base map if you want to make in that into the overlay just delete from here and make it a type s just comment this and add that into the overlays here let me show you this is my page i will remember so now it has been removed from this this one and osm india is here as you can see so now it has come into the overlays it's not based now so it depends on you what you want to do you want to write in the base map or let it be i will let it be into the base [Music] so that's how you can create your own osm base map and you can publish it on the web gis so if so [Music] so uh i'll show you one more thing also if you want to from the scratch you want to see i'll show you how to do that how to add how to create a page uh simple page using the open list i'll show you that also let me show you web apps base this folder has created okay let me go to the vs code you can use any code editor i will use the vs code editor here so now this is my uh basically just you have to select the folder here i've already selected the folder base here you can create an open folder you can click here let me go for the folder base okay so let's select so this is the now i will create a file one i will create index.html then i will create one [Music] i will create one more file index.js and i will create one for css file map.css okay now first we'll go to index html we'll define the simple html html file so i will change this something to port base sm okay now we'll import we'll use open layer so we will import either you can download the open layer library library from the and you can store it in your machine and you can give the link otherwise what you can do i'll show you here just to go on the open layers website you can directly call the library from the just click here i think quick start let me copy this just import this styling of it then we'll import the javascript dot js file also all the functions of the open layers otherwise one more thing you can do if you don't want to use from internet because you have to switch on the internet for running this you can download the open layers from the webs here and you can put it inside that base folder only here and you can give the link directly from here okay this is done now so we'll create one css we'll import this map dot css also so actually link css so i will give the name map.css because this is will import the styling of this also and finally inside the body will create a new div let me write down this on the id is equal to [Music] map i will give this map id so this is my now i have created html element div named in this style we will write here map enter will give the position i will give it absolute then we'll get the fifth let me give 100 width of the map then we'll give the height [Music] hundred percent of that so this we have defined we have given the styling to the map with this f hundred percent height is under percent now we will [Music] so script src this is will import script src we will import this the index.js this is index.js so we have imported this map.css here this inductor just now this is our html page we have imported the css file of open layers javascript file of the open layers all the functions then map dot css this one the index registers now we will write the code here so create a variable let me give view first new mentor okay one dot view then take a bracket curly brackets then you have to define two three things here [Music] projection [Music] [Music] then you have to get the center of the map you can give the letter to longer too i'm giving the intelligent longitude then you have to give the zoom level let me give five so this is my view now we create a map where map is equal to [Music] here we have to define i think uh view first this view is the view only which we have defined earlier here view okay basically on which element you want to render the target map means inside this html which we have given this id is equal to map so we are giving that so we have a folder inside this is my base folder inside we have indexed email index.js index on map.css so now we will save it and we will try to run this so here i have to change this because i am running in the local as base okay that i have to change only now again i have to run this so now as you can see after running it you'll be able to see 800 this is actually it is index html that's why i'm not making it so you'll be able to see plus minus mean zoom in zoom out your map has been rendered now okay so again if you launch it so here only you have to modify because by default it is taking 080 so otherwise directly also you can write here index.html so this is my page inside this is page inside my tomcat so web apps base so local loads it zero to my tomcat has been installed so i am calling this index.html page directly so if you load this directly so this is my map zoom in zoom button are there but there is no layer now we will add the layer so what i will do i will simply copy all those this thing so now we will copy our this layer which i have already shown you earlier shown you so just you have to copy this here and just save it and we will try to run it okay one thing we have to do because we have not created any base layer kind of thing so we have to command this because otherwise you have to create a layer group based layer group then you have to add like in this one we have created a layer group title base map so now i think it should let me run for index.html and i have two sorry i forgot to map dot earlier map and layer [Music] tiled now you can see now so that's how you can put your this your base map [Music] on any web gis application so let me check if i uncomment this base so whether it is possible to do that or not yeah you will be able to do so that's how you will you can add so you can see my earlier videos and you can you can get that html page but just you have to add this line you can publish your data you have to add these many lines only and you have to map dot add layer either you push it into the base layers or you push into the overlays that depends on you so what i will do basically i will [Music] give these html files all the css files styling files which i have shown you so i will give those styling files i will give you the link of the data also from where you can download the osm data from the post gis from where you can download the post jsql post gis and all the styles which i have given inside the jio server i will give the link of that so you can download from uh from there and you can publish your layer inside the jio server so these all are the css files all the 20 layers thank you guys thanks for watching that's it from this video i hope you liked the video and it will be useful for you so do subscribe this channel give a thumbs up to the video if you like if you like the video and also please share this video to your colleagues and friends thank you thanks for watching

Channel: OpenGeo Lab

Views: 16,784

Keywords: WebGIS, Geoserver, Postgis, Postgresql, Webcache, Tilecaching, OSM data, base layers, CSS styling, google maps

Id: 7Xk4FoDZAIo

Length: 68min 56sec (4136 seconds)

Published: Tue Jul 06 2021