QGIS 4 Arch – Hosting QGIS Web Maps on GitHub

in this tutorial we explore the process of creating a simple web map of cell tower locations in florida and hosting that map for free via github we will start by installing the qgis 2 web plugin then we set up our data including which fields will be visible in the web map by using the properties dialog window we'll also explore the qgis2 web plugin settings to create and export the web map finally we explore signing up for github downloading the github desktop client transferring the files to github and making those files publicly available for anyone on the web as always time stamps are available in the description so you can jump from section to section as well as data and other resources linked below okay let's get started our first step is to make sure that we have the qgis to web plugin installed so we do that by going of course to our manage and install plugins giving it a moment to load and then we search for qgis2web you can see i've already installed it but if you haven't there'll be an install plug-in button down here click that and then you've got that installed there's really nothing else to it we'll explore the various settings that we use in this plugin in a few minutes next we'll go ahead and set up our shapefiles which really for our purposes means we're just selecting which of the attribute columns are visible in the web map we're going to produce so we're using uh just a basic data set here of cell tower locations across the state of florida from 2019 first thing we're going to go ahead and do is change the name you can do that by pressing f2 i'm just going to call this cell towers and put 2019 in parentheses to sort of denote what year these cell towers date to of course this video is from 2021 there are likely more cell towers already added in florida but this will work for our purposes so what we next need to do is determine which of our attribute columns we would want to keep now of course we can go through this and look at our attribute columns here you would do that of course for your own data i've already determined which ones we're going to keep let's go ahead and go into our properties for the cell tower data and we want to go ahead and click on attributes form and what this allows us to do is change the attributes for each of our attribute columns so we only want to keep the licensee call sign location address and location city field visible we want to change the widget type from text edit to hidden okay so there we've gone ahead and changed most of these to hidden we've kept a couple license call sign we've hidden most of them though we want to keep the location address we want to keep the location city but the rest are hidden so now when we click apply and then close what this means is that those attribute columns will no longer be visible in our web map okay now we're ready to create our web map so we go to the web drop down menu select qgis to web create web map we have a number of tabs here that will explore we want to go ahead and in this first tab layers and groups we want to select leaflet make sure that's selected it may not be it's probably open layers choose it to leaflet i find that that works better we want to go ahead and turn off pop-ups in this case for the base map which is google road there are no pop-ups we want to leave pop-ups and visible checked of course you want these to be visible in the final web map you could choose cluster and click the update preview and this just produced sort of naturally grouped clusters that as you zoom in you can sort of see these form coming out may not work properly here in the preview but you get the idea i'm going to leave this turned off for our purposes but you might want to use that the next thing we want to do in this tab is change the fields here to an inline label and what that does is when we click a point it basically oh we have to update first it basically tells us what each of these are right so it gives us a label next we want to go to appearance add abstract i leave that alone i leave most of these alone i don't geolocate use or anything layer search you could make it so that a user could search one of the attribute fields we're not going to worry about that right now i'm going to go ahead and give them an imperial measure tool what that basically does is you can see here it allows them to measure distances they can create a new measurement show pop-ups on hover update the preview again what that does is it means you don't have to click as you move over these points it it basically displays the same things we want to make sure and shift template from canvas size to full screen that means that we can embed this map which will be hosted on github in another website so that's useful for the extent we want to change this to fit to layers extent if we update the preview we can see this brings us to the entire extent of all the available layers you can fiddle around with the max zoom levels in this case they mirror basically the google maps zoom levels next we want to go to export we want to export it to a folder what i'm going to do is just go into a normal temp folder that i have and just select that folder finally with the settings we want to make sure preview on startup is checked that means it'll open for us automatically in our web browser when we finish exporting it we can go ahead and do a final update preview this looks pretty good i like the way this is performing this is a general idea of how this will work it's not always perfect but it generally will match what gets spit out when we click the export button and here we have the finished map opened in a local file right location in our web browser and basically this is what we're going to now upload to github and make it freely available to anybody on the internet next we need to go ahead if you don't have one create a github account there's a direct link to this page in the description below it's pretty self-explanatory how you create your own github account next once you've created that account you'll need to go ahead and download the github for desktop install file and once that's finished downloading we'll go ahead and go through the process of setting this up we've started updating the github desktop as you can see it's already installed it sort of updates itself i've previously installed it so you might have to go ahead and log in of course right options accounts sign in continue with browser and i'll just sign in then it'll ask if it can use the application say it can and now you're signed in and with that we're now ready to go ahead and create a repository on github and if you're not familiar with github there's a lot of great help files and sort of tutorials and instructions about how github works um how its structures function and so forth i'm not going to go through all of that this is just sort of a quick and dirty tutorial to get you to the point where you can put your web maps online but i would encourage you to explore github's features more uh in more detail because they're really robust and really cool and actually for heritage archaeology history folks they offer a lot of cool potentials so as we go ahead and transfer our files on our local machine to the cloud to github we need to do a couple things locally now i've created a github folder in my documents folder and what we need to do is create a sub folder here to host all of those map folders that were spit out with the qgis to web plugin so i'm going to go ahead and call this you can call it whatever you want to but i'm calling it florida towers and what i'll do is copy all of these files into this folder and now we're ready to go ahead and use that to create a new repository on github and the way we're going to do that is with our github desktop client so we want to go to file add local repository and of course we want to navigate to the repository path so of course we'll go to florida towers select this folder this directory does not appear to be a git repository would you like to create a repository yes we would so click on create repository i'm going to go ahead and leave the name the description is going to be location of cell towers in florida maybe i'll put 2019 we do want to initialize this repository with readme you don't have to do that i do it it's good practice we'll leave the defaults for get ignore license we'll click create repository that'll take a moment and it's done we are now in florida towers which is our new repository we could look at the history we can see all these files all that's done is it's basically added those qgis to web files in this folder to this repository now of course this is just sitting on our local computer we haven't uploaded it to github yet so that's where we'll click on publish repository we'll go ahead and leave the name the description we can unclick the keep this code private and then click the published repository and so this will take a moment or two depending on the ultimate size of all these files it's done pretty quickly here because we've got very small files but if you're using large rasters or what have you it could take much longer anyway now we're ready to go back to github.com log in and make these files public for anyone on the web so when you log into your github account you'll see your repositories listed here on the left i have more than what's in this tutorial of course what we're going to do is click on the one that we just created the florida towers one and we want to go into we can scroll through here we can see the readme not much there you can edit it add all sorts of stuff if you want to we want to go to settings we want to go ahead and scroll all the way down to github pages we want to choose our main branch and we want to click save it's basically reloaded the page and what we'll want to do is go down here as we scroll down and see your site is ready to be published at my github florida towers we want to make sure the repository is set to public it probably already is but go ahead and basically reset it the same way and you'll have to type this in right once you've done it click i understand it will reload and now what will happen yes we have this notice up here but trust me you may have to do that anyway as we scroll back down what will happen is if we click this link we'll see our web map freely available on github so there you have it you can now share this address right i can get rid of this little bit this address right here is all you need to share with somebody embed in another website with maybe an iframe html tag and share this map with anybody in the world so that's it you've now created a web map using the qgis to web plug-in you've determined which attribute columns are visible in the web map and you've exported it to github so anybody can can view it as always links to location of data are in the description make sure to hit that like button and subscribe to get future updates until next time keep mapping the past or in this case cell phone towers you

Channel: AnthroYeti

Views: 1,456

Keywords:

Id: ULKuVOPxqEo

Length: 12min 53sec (773 seconds)

Published: Sat Mar 27 2021