Develop a web based mapping using QGIS and Geoserver

hello everyone in this video i will continue showing you how to add your own spatial data into jio server on which you watched the earlier video how to set up your server in your local computer as you have seen you can access jio server using a browser in localhost just server and you can see all these layers so to add any of your own layers into jio server you can use in this interface one disadvantage is that with this interface you have to do it manually and you have to set the styles you have to set the stores workspace so there are multiple steps involved the objective of this video is not to show you how to add layers using this interface but how to achieve this step easily using plugins in qgis so for this purpose we will use a plug-in called geocat bridge which can upload maps which are open in qgis and styled so geocache bridge can upload the maps along with the styles defined in qgis into geoserver that is a big advantage if you have many maps to upload into jio servers it will save a lot of time following that we will use another plugin which is called qgis to web and there i can show you how you can create quickly a web application to start with so let us go to qgis here you can see that i have set some layers one vector layer which is a cca1 boundary and i have four raster layers crop type map yield water productivity yielding turns and related water deficit and i have set some styles which i like and i want to host these maps in these particular styles in jio server so for this purpose what we need is a plugin called geocat it's already here so we can also search like this geocache bridge install the plugin close this menu and you can see that plugin in under web menu you can go to geocat bridge publish so you can see that geocat has already listed all the layers available in layer manager so you can select all of them or you can unselect some of them depending on what you want to uh upload into geoserver so there are mainly two tabs which is of our interest publish and servers so now we are we want to publish all these layers into the jio server which is installed in local host or it can be in a server with a public ip you should know the link that's all so let's add that server uh into geocat so there are no servers defined so i'm going to add a new server here you can see there are many options this map server geo network postgis but in our case it's jio server i'm going to give a name called local host can be any other name the url has to be the local host url which we used to access your server one thing to notice is that in the url you have to add rest to the end to make it work in g with the geocat we have a basic authentication here so we have to add the credentials which we used to log into your server so let us add a new one and i will call it uh [Music] the username is admin and password is jio server and i will save this credentials we will save don't forget to click on this save button which will save the current server and you can connect you can see that the connection is successfully stored so this is this step is very important to upload the layers into this particular server in similar way if you have a different jio server outside your local host in a server you can add that link here with the public ip add the credentials different credentials use it save it and there will be another server here and you can use that to upload your layers from qgis now let's go to publish i've selected all of them and i'm not going to deal with the metadata now it's up to you if you want to add metadata and also publish metadata but let's look into publish data with the defined styles in qgis i'm going to say data server is localhost and publish so it will show you the progress it should be fast because it's in local server if it's outside then it will also depend on the internet connectivity if you are uploading big data into into server host or outside but it works so there's a published report you can see that all these layers are already published so how do we check if we have all these layers published in json close this one of course we'll go back to our jio server i will go to the server home page you can see that there are some layers already added and you can see that the crop type is the cca1 boundary is the yield turns is there and all has a workspace called wp underscore analysis so whatever is the name of your project that will become the workspace name and in that way you can easily identify all the layers which you have uploaded into geosurface so these are the layers which is uploading you can check you can preview these layers using layer preview you can go to layer preview [Music] yeah here are those wp analysis all those layers let's see how yield looks yeah so it works uh it has uploaded the data plus this child which we have defined in qgis and you can see that yeah in full detail we can see the layers hosted in yourself you can check your cca1 boundary and also the crop type map if you want how it works so your layers already in [Music] geoserver now if you if you go to open layers uh all these layers are now hosted as a wms service now you can use this wms service to add these layers as a web service into qgis so for the next step so the next step is to see how to develop a simple web application so i will use a new plugin called qgis to web for this purpose but we want to use instead of the files or share files we want to use wms services because you're going to you'll be developing web application using the wms services so wms is ogc specification so even even you can mix wms services from for example from nrc or nasa and your own wms services that so that is the advantage if you use wms services to create web application so what i'm going to do is i will save this project i will open a new project and in this project i will add all the wms services in qgis you can add access wms services using the utility called add wms layer and in the wms layer i will set a new server which is our host and not this link but we need wms service link and wms service link is usually the url up to wms question mark so this is the wms link to access all the layers under wp underscore analysis workspace so let us go here and put this link and say okay yes and here you can see that i have a number of wms services but i will select localhost which i just created connected and then now you can see that it can access all the layers available under wp analysis workspace um i will add one by one because and then only it will add as different layers here so rwd is added wpy is added yield is added crop type is added and cca boundaries so we so i will do a rearrangement here i don't want to see crop type by default now let's go to uh now let's save this project i will save it as a web map.qgis qg z which is the project format in my case it's already exist i'm going to replace it so i have a project now saved project called web map where i have five wms services opened in my qgis now let us add a base map in this case i'm going to add a base map from openstreetmap so for that i will go to open data source manager i will add the base map as a xyz tile and qgis comes with a default xyz connection already set i will use that one for openstreetmap so i will add that you can see that openstreetmap is already added and bring it down uh lowest to the to all the layers on the layers save the project again so now we have all the layers ready to add to our first web application webgis application now to develop a web gis application i'm going to use plugin as earlier said qgis to web so i'll go to plugin manager search for qgis to web select and install that particular plugin the installation is done you will find that plugin again in web qgis to web now let us open the plugin and see how to convert these layers into wfgis so here you can see that all the layers which are available in layer manager is also available here in the layers and groups so i want all the layers to be in my web gis but i don't want all the layers to be visible by default in my web gis so i only want my boundary yield and openstreetmap to be visible by default so i will remove visibility of the other layers i will enable get feature info for all the layers other than boundary and openstreetmap uh rust you can leave the default now let's go to the next tab which is appearance so you can add a address search to your application yes we need a layer manager so add layers list which should be collapsed by default then i will also add a measure tool which is should be in metric let us put a full screen template i think last everything i will leave default i will now go to the next [Music] setting next tab called export so you can export the entire app into a folder or you can directly export it into a ftp which could be a server with a public ip if you want to launch it directly to the app but i would recommend to export it to a local folder play with it improve it customize it so there are there will be a lot of things to add if you want to before you publish the app to outside world so let's export a folder let's set a folder i will set the folder again wp underscore analysis select the folder before i export i will update the preview so that we will see the preview of the app here and there are three options in qgis2web there are three libraries webgs libraries one is open layers which is very common leaflet is also open source and getting more and more common nowadays and there is macbooks user library also available so let's try open layers i will update the preview so you can see that this is how your app will look you have a zoom in button you have scale you have search and you have a layer manager here you can also try it with the leaflet update preview you can see how it looks almost same some color differences i will keep with open layers and i will export the app into a folder it's done and by default it opens in uh internet explorer i don't want it to be next internet explorer i will copy the link close internet explorer go to chrome and see how it looks it looks good to me you can zoom in there is a nice base map where you can see the place names you can add more layers you can add crop type again add rwd or w water productivity or yield intense you can also measure distance [Music] around five kilometer up to here so like that or you can also search for uh places for example and it will show you the option you can select again it will go there so the simple uh search to a particular place option is also there now you can to further develop this particular app you can go to the folder where you have exported you can see that there is a folder specific to qgs2web and now you can see all the files it looks like a web application index.html is the main file in the layers in the layer this javascript file all delays all the wms layers is defined if you want to edit something activate feature info and other features related to wms you can do it here so it depends on you now how much you want to edit and customize this particular application upload it into us into your server with the public ip and make it public so that's it thank you for listening

Channel: Sajid Pareeth

Views: 5,447

Rating: 4.963964 out of 5

Keywords:

Id: DuZFjBPHtDE

Length: 19min 0sec (1140 seconds)

Published: Thu Jul 30 2020