Creating a WebMap using QGIS2WEB

hello guys welcome to this tutorial in this tutorial i'm going to show you how to create a web map straight out of your qgis project the final map will be interactive just like if you were to view your geospatial data in qgis itself however this map will be running on your web browser and there's absolutely no need for you to have a gis software package once you manage to create this web map and you know what this means if you want to share our maps with somebody else not as an exported pdf or a jpeg image but as a dynamic and an interactive map we can just pass the generated web map to them and they would be able to open the map in their own web browser and all the settings that you intended to have would be preserved so the plugin that we are going to use for this purpose is called qjs to web and if you haven't gotten that plugin installed yet you can simply go over here to plugins and manage and install plugins and in here you can simply search qgis to web and since i have already installed the plugin i'm not going to reinstall it again but in your case you will get an option to install the plugin if you are doing it for the first time and after you do that it will come right over here under this web and you can see that we have this qgis to web plugin ready to be used so before we proceed with that i'll give you a quick overview to the data that i'm working with for this particular tutorial but in your specific case the data might be different but in case if you are interested to know what plugin i'm using to obtain this open street map as the base map the name of that plugin is quick map services and under osm you can see that we can add the openstreetmap standard and the way to install the plugin would be the same just that under the list of the plugins you'll be searching quick map services and you can install that quite simply as well and right over here you can see some selected counties that i have picked which are located in the south eastern part of the uk and basically the type of information that i'm trying to represent over here is this set of banks so these are actually some selected number of banks each point represents one single bank and i'm pretty much going to use just these three layers of information to create my web map and if i open up the attributes table over here in this banks layer you can see that what we have over here is we have the name of the bank we have the name of the operator well not for every attribute but but for number of banks we have both the name as well as the name of the operator and also we have a remark whether that bank has atm machines or not as you can see almost all of the banks are having atm machines and these are the attributes that i'm going to pass to my web map now before we get started with the preparing the web map i'm going to go ahead and do a couple of changes now first of all i'm going to create a project title because that title would appear in the web map that we are going to create so i'm going to click right over here and that will open up my project properties and under general you can specify the project title and in this case i have actually randomly selected some some banks so i don't really have a proper title to add in but i'm just going to name this as banks in selected banks in southeast of uk and that's about it i'm going to set that to be the title of my project and the same title will be appeared as the title of my web map as well and one of the cool things that we can actually have in that web map is that we can pull out information interactively which corresponds to each of these different attributes for example if i were to click on one of these dots you'll be able to see a pop-up menu which basically illustrates the attributes that we have right over here so for that i would like to have this name operator atm to be a bit more proper so what i'm going to do is i'm going to go to properties of the layer and go to fields and over here i'm going to rename this so i'm going to toggle the editing mode and this one i'm going to change the name to be has atm and this one let me write the name specify this to be name of the bank and this one name of name of the operator and after that we can simply hit apply and save my edits and click ok and now if i go back to the attributes table you will see that these attributes changed to be like this well i can reorganize uh these different columns as well simply by dragging this has atm to be on the bottom just like this and similarly if i check the attributes of this south east uk layer you can see that we have name one which is basically the name of the country and over here it's the name of the county or the region so i'm going to do a similar edit uh simply by going over here to the properties and under fields i'm going to name this as country and this one just going to name it as a region all right i think we are pretty much done with making the changes to the data set and now we can simply go over here to web and select qgis to web and create web map all right now over here we have a couple of things that we need to take care of now you can see that we can expand this layer and groups and it's quite self-explanatory over here this tick mark refers to whether we need to include this particular layer banks southeast uk and this osm standard in our generated web map or not and of course we need to include all these three so i'm going to keep this ticked and it'll be visible and we would like to have the pop-ups as well i'm not going to take this cluster option because uh let's say if you're dealing with the very high density of points i think this cluster option would be uh quite applicable but for this case even though the number of points are actually quite high i think we can still work with it without having to go with this cluster option and over here whenever the pop-up happens we need to specify whether we need to include these labels or not so of course we would like to include all of these uh headings basically as an inline label and the same for this southeast uk polygons as well and right over here you can pick either you want to go with open layers leaflet or mapbox gl javascript but i'm going to go with leaflet and you can do a quick preview simply by clicking on this button and that's going to update your preview and if you drag your map this is how your web map is basically going to look and once the preview is updated you can sort of get an idea how your web map is going to look so you can simply zoom in and zoom out just as if you were working in qgis interface itself and if you go over here and click on one of these uh these points you can see that the column headings of the fields that we changed is now appearing this kind of in this kind of a manner which is quite proper when compared to what we had before as the field names and similarly we can zoom all the way in just like this and we can pick let's say another bank point like this and over here you can see that the name of the operator is missing it's just the name of the bank and whether that bank has an atm or not and not only that we can click on these polygons as well and it will provide the information about the different counties over here you can see that the country is england and the region or the county in this case it's going to be its east sussex and similarly if you go over here and click on another polygon you can see that the information appears in this kind of a manner and right over here you can make some tweaks to the appearance as well now for example if you would like to add address search bar you can take this and you can see that nothing happened in the in the preview because we haven't updated the preview for each of the changes that you're doing over here you need to click in order for the changes to reflect in in your preview window over here so i'm going to click on that and you can see that what we got over here is small search bar this is basically going to take care of uh searching for stuff or searching for places for example if i want to search let's say the location of liverpool and if i hit enter as long as you have an internet connection you will see that the suggestions appear in this kind of manner and if i click over here you can see that it's going to take me to liverpool so this kind of capabilities will also be embedded in the web map that we are going to create and we can pan it around and take it back to the information that we are trying to display over here and i'm not going to add my layers list but i'm going to add a measuring tool and the units i'm going to select metric so it's just basically going to be an add-on to the map if i update the preview you will see that there will be a new icon over here which you can use to measure distances and areas so basically what you need to do is create a new measurement and it says start creating a measurement by adding points to the map so let's say if i want to make a very quick measurement of getting the direct distance between this point and this point you can see that it's basically calculating the distance of the path to be about 20 km 20.9 kilometers so you can do this kind of quick measurements using this uh this measure tool and i believe that it's quite handy to have that installed in our web map as well and i'm not going to change the rest of the settings much you can even change your maximum and minimum zoom levels over here but i'm going to retain them to be just like what we have right over here so finally to get a final view of the of the of my web map i'm going to click on this update preview just for the last time before i export the content into a separate folder and for that i'm going to go to this export tab over here and i'm going to export my project files into into separate folder so i'm going to select export to folder and let's go ahead and pick the folder location i'm going to create a new folder called my web map and i will select that folder and i'm going to click on this minify judges and files tick box so that the file sizes will be reduced just a bit and i think that's about it after that i can simply go ahead and click on export and just in a matter of few seconds i will have my map running completely in a web browser and right over here you can see the map title that we added selected banks in south east of uk and i can pretty much do whatever i did previously using my qgis interface but right now we are not really running in qjs we are running completely in my web browser and if i were to click on one of these points let's say after zooming in you can see that it's barclays bank over here and it has an atm and similarly i can click on these other points as well plus on the different regions just like this and i can zoom in and zoom out all right now let's go ahead and have a look at the files that got exported into my folder that i specified now here you can see that under this my web map folder it created one fall inside and inside that folder you you'll find a couple of things and what you need to click in order to open up this map will be this index html file and you can pretty much open up this using any browser if i right click and if i try to open it with the let's say firefox you can see that it's basically working just as i intended retaining this interactivity as well and just a quick note before we wrap up this tutorial in case if you want to pass your project to somebody else just make sure that you pass this entire folder because the files and folders that's essential for this web map to work as intended are located in these different folders so you don't really need to bother about the contents inside just make sure that you're passing the entire fold all together and it should work just fine so i guess that's about it for this tutorial guys if you do have any questions just add them down below and i hope you enjoyed this tutorial and don't forget to hit that like button and and subscribe if you want to get notified as soon as we publish a new video on this channel so i'll see you again in another tutorial

Channel: GeoDelta Labs

Views: 4,452

Keywords: how to create a webmap, qgis2web, qgis2web tutorial, qgis2web leaflet tutorial, web mapping using qgis, web mapping using python, web mapping tutorial, web mapping applications, web mapping qgis, how to create a webmap using qgis2web

Id: 0V0V6TWBE14

Length: 13min 27sec (807 seconds)

Published: Sat Sep 25 2021