Make a webmap with QGIS - QGIS2Web 02 | burdGIS

[Music] bat-fans welcome back and today we are looking at creating a web map with QGIS 3 this is the second part of the three part series looking at how we can go from 0 to web map in three easy steps and we're using QGIS 3 because while it's quantum baby if you haven't seen the first video yet please check it out and that will get you up to speed but here we have the a map of Edinburgh and each of these points is a photograph that I took while I was there and I was up there visiting the foss4g UK conference all things geospatial and open source it was very interesting so as my base map I've got open street map monochrome there's my photos layer and I'm just going to set the extent to where I would like it that's pretty wide I'll get back in a little bit closer there we are I'm just going to save my project where it is and then if I go up to plugins and it really is easy to make a web map these days and you just need to go up to plugins manage and install and then at the top but if I choose all and type in QGIS to web there it is okay there may be other plugins available but this is the one that I've been working with and here we've got the option to export to an open layers or reflow web map we don't need any server-side software and it will replicate as many aspects of the project as it can including layers styles and extent excellent now I've already got this installed and it tells me that there's a new version available so I'm just going to upgrade my plugin it's quite exciting that there's a new version available but hopefully it hasn't changed too much doesn't leave me hanging when I'm trying to demonstrate it but I'm sure we find right so that's installed successfully that's great I am going to close that now and you'll see at the top I've got a new little option in my menu toolbar called web just going to click on that those QGIS to web and create your web map here we are well now we've got options down at the bottom I've got the choice of open layers or leaflet now I'm much more familiar with leaflet in the whole structure and the way that things worked so I'm going to select a leaflet and you can see I get a preview don't worry if you preview looks off you've got these scroll bars so if you put these generally in the middle that is what the middle of your screen is going to look like so that looks alright to me and I might just leave everything as default for the moment we do have a lot of options in here and that's the one that I wanted to change the export so I'm going to export it to a folder just need to choose which folder I am going to export to so if I go to my demo folder and go to q2 web that looks good and I'll make a new folder here and call its QGIS web demo alright we're gonna go in there and select that folder in order to save things into settings that looks all good or right let's just hit export and see what happens boom that's exported it automatically it opens my default browser and it will point that browser to the location of the files created and that's it I've got a local web map with pretty much one click that is very exciting so that's it for this video no just kidding we still need to do some stuff I'm just going to click on one of the and we'll see what a pop-up looks like there we are so when I clicked on one of these points the pop-up arrives and we get all this information you can see that there is a path and also a relative path to where the photograph should be but a behavior that I'd really like is for when I click on that pop-up for the picture to arrive and maybe the title of the picture and the timestamp at the bottom something like that so in order to do that there's two ways we could do it we could tidy things up in qgis or we could dive straight into the code and start pulling things out I'm gonna opt for the second one because it's a bit more fun however first of all we are going to have a quick look back in qgis and I'm going to click on my photos and open up the attribute table and here you can see we've got ID name date/time one-lap all the best stuff and the path now it's interesting to look at attribute table because from this we can descend a little bit of what leaflet is doing now if I go back up to web QGIS to web and create a web map you can see here that we've got a section called pop-up field and we've given these known label but it looks like all of these are going to be included so what leaflet is doing is creating a pop-up from all the information in our attribute table hmm interesting so I'm not going to export this one what I am gonna do is then go into the files that were created so if I go into the demo and go into q2 web and then I've got this QGIS - web live demo click into there and when you do export of the foot map or open layers map you will get a folder with a date and a time stamp so each time you export one you'll get another folder in the location you specify so you can see which you're working with I'll just double click on this one and you can see we've got all the usual files and folders that you'd expect for a webpage we've got CSS we've got JavaScript images our data a couple of extra ones because this is a web map and then we've got our index as well so you can have a poke around in those and see what's happening I'm going to go straight to our index.html and have a look at that so the index.html is what browser is opened up and I'm just going to open this with a text editor sublime text and have a look through it so at the top we can see that the doctype is declared we have a few different bits and bobs but the meat of what I'm looking for is this pop-up content so here we can see what's included in our pop-up on the web map now this is structured to be a table and it's in JavaScript in terms of language and it looks like we've got quite a lot of complicated things in here but if you look towards this part you can see that each of our attributes is listed in here so we've got path comment ty old camera model camera mate now camera model and camera make I'm pretty sure that I don't need those so I'm just gonna take these sections and I'm gonna delete them now sublime text has gone red it said that something's wrong and that's because we've got a blank space in there if I just delete again everything goes back to normal so I've taken out camera model and camera make let's have a look if I save this whoops save it and then go back to my web map move on to me now currently want to click on this we have got camera mate camera model which is my phone now if I hit reload and click on one of these you can see that camera making camera model have now gone so that is quite interesting now that I'm confident I've found the parts that I can remove you can see how we've got these TR and TR so this opens it this closes it I'm going to cut out all the tears table row that stands for that I would not like and I'm only going to keep and move down here and I do want to keep a relative path and I do want to keep the timestamp so I'll delete everything else that looks good we've got that space in there again so I'm just gonna delete that too and I'm going to save ctrl s now what I'd really like is for my relative path to actually bring the image in and when we're working in HTML we can do that with something called a tag so I'm going to copy this section of our relative path and I'm just going to pop it in below so now we've got relative pattern of twice just tightening this up a little bit now the image tag in HTML and I do encourage you to go and read about this but the image tag looks like this IMG and then we need to give it a source and the source is going to equal and what I'd like it to equal is in relative path that's quite easy all this other stuff afterwards I am NOT going to include so let's just delete away and then I'm going to close my image tag probably don't need that bracket either all right so what we are asking this to do now is start a new row and it's going to look for an image source is going to use the feature properties of relative path and that is going to be the source of this particular image and that's it so I'm going to save that and I'm going to check my map again let's just reload it here we are and if I check on this now we've got this little image symbol that has my image words where I can't see the photograph so I'm working in Firefox and I can go up here we can go to web developer and to the inspector now the inspector likely have a look at different parts of your web page and here I'm looking for the image and you can see in this part below it tells me where it's looking and currently is looking in a folder called for upload and it's looking for Holyrood Park now then if I go back to my folder structure you can see that is no folder called for upload however if I go back to the original folder here I do you have a folder called for upload and it's got all my pictures in it so I'm just gonna copy this and drop it in to my project here we are so now just to explain again for the image source our webpage is currently looking for a folder called for upload and it's looking for Holyrood Park I'm now included a folder called for upload and inside here we have a picture called Holyrood Park so hopefully we fix this I'm just going to close that reload and then click on here and look at that by we have got Holyrood Park in the right spot that has excellent news so closed minds back to down and I'm going to have a look at the rest of these superb website all my pictures are coming up now you might know is when you click on one of the dots then unfortunately this little indicator does not hit the right spot but if you click on it again it will move to the right spot not sure why it's doing that might be some reason behind it but I think everybody who has got this far in the video definitely deserves upon Porter if you're of legal drinking age so we in this video have created a local web map which is running on our local machine and you can see that web browser is looking for a file and that file is what was created by QGIS to web it is a really cool plugin if you want to make quick and well just quick web Maps now the next thing is how do we get this live on to the actual wild west of the internet and in the next video I'm going to explain how we can do that using something called Amazon Web Services but for now thanks a lot for watching I hope this wasn't too much in terms of code etc but if you do have any questions just leave me a comment below and please don't forget to hit like and subscribe if you would like to help support the channel I think that's all happy mapping

Channel: burdGIS

Views: 31,976

Rating: 4.9486237 out of 5

Keywords: burdGIS, GIS, mapping, geospatial, cartography, remote-sensing, QGIS, geotag, geotagged, geotagged photos, photos, import photos, QGIS3, webmap, webmapping, leaflet, QGIS2web

Id: WFO3Xe0uD5k

Length: 14min 56sec (896 seconds)

Published: Tue Oct 01 2019