QGIS 2 Web - Creating a webmap

hi Barbara its Ian Wilson here we chatted briefly on the phone with regards to GIS and mapping solutions I thought rather than put everything in an email I'd put a brief video together to demonstrate some of the new services i provide and then also showcase the the QGIS G is open-source desktop solution which is something I also provide training in so so have a look at this video and let me know what you think Cheers okay so the first thing I thought I'd do is to show you this lets desktop that I'm talking about this QGIS desktop GIS solution so I'm just going to open up this application now so when that window opens up you'll notice it's it's much the same as the other GIS applications where you've got your table of contents where your layers will be will be shown or displayed and then also this map then window or this map view so I'm going to add some data to give you an idea on how this works we add some roads and this one here which is the city of Cape Town Metro they're all of those and just drag this one to the bottom put this one to the bottom and then just zoom to this one okay so as you see there the layers are represented here and then and then render then displayed in the map view and order that they appear here is the order that they were drawn in so I'm just going to select this one and just say zoom to layer and then I can use my little navigation tools just get a little closer zoom there and if you've got no no and layer style setup it has add some random stuff so what we can do is change those now so I'm going to select roads and just go select some default default styling for these roads okay there we go there the roads and you can change these you can color these up depending on what type of road it is as well whether it's a residential Road a trunk road an arterial road that sort of thing the same for Evan and I want the outline to be like a light gray we need the full background to be a grain like that one there we go and then this background layer this see I kept on background let's make this gray as well I'll choose that same gray okay and then for the art on I'll actually say no outlines and no pin okay so so this is the I'll just show you quickly if we if we if we click on our layer in the table of contents and we go to they will all layer properties this is all the the attribute styling and features that you can apply to this layer we can do table joins we can adjust the fields and how they render we can label on various attributes and then change the style as we have been doing and in the general tab what is the what is the projection or the corner reference system where is the part what's the path name of that particular file etc and you can do some some queries which is a lot more high-level detail which we can do in later stage I'll just show you the labeling one so for roads if we save properties and choose the labeling tab currently it says no labels we want to say show labels we want to choose the attribute name I'm going to put a buffer on our label and then change the size of the label to six we're happy with the default styling placement curved and on the line the last thing is we'll just adjust this rendering to be merged and there we go so now we've got the the streets labeled with with a road now and if you open the attribute table for that particular layer you can have a look at the other the other values for the records and this is the the column that we use to label on and you can also bet you can color up on different things so you can color up on class or you could color up one name as well but then there would be a bit random have every single unique road name would have a different color which which wouldn't really make sense so that's pretty much how you would create a a map from scratch which is quite quite useful and quite easy what you would then do after you are happy with your styling is you can create a what I call a layout come in in the composer so if we say okay that'll open up a composer view and if I just zoom to my full extent of the compose of view this is where you'd add the map and then export it as an image or print it to a printer so there we've added the map to our view and you can add all sorts of other things like the scale bar and you can change the styling of this put a legend over here and you can change the styling of the legend all sorts of things yeah the background color maybe make it pink and you can add other things like all sorts of things here we're gonna add a image so we're going to change this image two to one which I thought might be interesting okay in the images folder in my projects folder I've downloaded this one that's the kind of thing you can do so you can spend quite a bit of time with all these little features and you can start making your map look quite nice and pretty based on you know your styling and your template that you'd want to set up so that's creating a map styling it and then actually creating a print comparison which you then export as an image or a print as a loud okay so that's that's the basic gist of the map work kind of stuff which is really a lot more involved in that but I've given you the brief version and then what you can also do is is add client data okay and by that I mean you can you can create a spreadsheet with all the information for your clients so I'll just show you a little example so for instance you have a spreadsheet of your plant data so clients name the business type the address what else do we need the city that they're in they're in the three that they're in and then this is the port which is important part which is important it's your your coordinates for X and y or Latin longitude and with those added we can add our data and then load it as a spatial layer in your project okay so we're just gonna add a few of your clients from your magazines we just add a couple like rego cycles just change the width of these and they are awesome how these their address okay and then this is where you need accurate information so depending on whether you wanted to capture this yourself or ask the client to get off their cell phone you would need the the geographic coordinates for each of the properties if they wanted to be displayed in the map so that's the X and the y is minus 30 400 G is yours everything that's latitude and below the city in the southern hemisphere is negative 41 and 48 and I'm just gonna add a few more after this okay right so add a few more and fixed a couple typos and I can now export this spreadsheet as a CSV so the comma delimited text file is the format we need to save it as so we're gonna save it as that okay that's saved as the CSV now you can add it as what's called an events theme and we use this little button here which is the little bit to add a comma delimited there and we can browse for it yes yeah business CSV dot CSV okay and then this is the file format options so you can see the defaulting file format separatism is the correct one so you know it's a correct one because each of the the fields we added in the spreadsheet is displayed as a separate field yeah if it was incorrect it would just be you know over here with a one field with all the values separated by commas but because the commas is the delimiter then here we got separate fields okay and we're gonna use the X field which is the x coordinate field of the wire code and we'll say okay and then this is the important bit we need to tell the program what is the coordinate reference system and in this instance it's wgs84 and we say okay and they have been added now they they're a little bit dull because there colors so let's just quickly change those to a style that we can see so we can tell the program if you want to categorize based on a column and it's the type I'm going to classify all of those I want to change the size up here to the size of four let's say okay when you remove that one we'll say apply and here we go there are okay so here's our dummy layer with our with our information that we added using the spreadsheet this is a just a quick view into HP table and if we use the little identify tool and click on a couple of the properties it opens a little window and it gives us a quick view into the values voltage of those features yeah let's cetera okay so now that is a quick basic look at a time you might import data from a database or a customer database and this can then be saved and queried and one of the cool things about huges or another cool thing is it's got this and plug in called huges - web so you can export in and view your information in a web browser and then upload it to an FTP server to use on a website so I'll just quickly show you how that works so in this little example I'm just going to remove all this information it's not going to be used in this query I'm going to label it quickly on names I do want to fly okay so there we go and then using this little plugin which has been turned on from the same place as the as the other plug-in repository and it's called queue just to web and this is something you would also need to turn on okay this is in yes it's already turned on because here it is displayed in our web it's called queue just to web and say create a web map now all we do is we change the settings depending on what our requirements are I'm just going to for the pop-up dialog box I want the labels to be inline the field and the content of the value to be inline with the actual that field value I want to export it to a specific folder in this instance the projects folder called web map so that's fine and the settings you would choose here and a vary depending on what your requirements are if I want to add a little dress bar the layers list I want expanded I'm gonna highlight on hover I also want to search the layer based on the business name I don't need a measuring tool I'm gonna show pop-ups on hover and I want to export it as a leaflet type map and this is a just a quick view as to what the data is going to look like it's almost like a like a preview preview window and these are the base layers you can add to include in the map so that's why I deleted the the roads and the urban dead is because I've already got a base there and if I update this you can choose a OpenStreetMap layer and update it there we go with our base data already and that's what it looks like when you when you open one of the dialog boxes for each of the of the e/m of the features so they would got it now we need to do is push export and that'll be saved and it opens up automatically in their web browser and this is what a would like would look like on a web page and that's pretty much the basics of it you would then go and fine-tune the information here or the view ability of this based on the code but you could then package this and save it into a an iframe on a website so that's pretty much how it works and I'll just show you quickly what the actual page looks like I mean sorry the the packaged info looks like if we just bail slash again and going to the with map misfolded against how did the program works all the plug-in works it packages your layers from your QGIS project into an HTML text file sorry okay I open this in a text editor this is what it looks like so this is just an HTML file which references style sheets and data that is packaged in those folders okay this is just the coloring of the layers that's it and you wouldn't really need to tweak this an issue you would really get involved in changing or and in fine-tuning a map the layers are saved in here in a jeaious file the markers and the legend are saved here and that's what you would do you would basically take this layer and you would upload it to a website and be able to you know to view your map online via a a browser and I'll just show you a quick example of one I've done for this particular page and you can view it I'll give you the link to it as well so you can view it in your own browser and get my idea of what is possible okay before I move on I just want to show you one last thing so if we go back to QGIS and if you for instance didn't have the coordinate information from a client but you did have their address and it was in this format then what you can do is you can use a geocoding plugin to locate the majority of your addresses isn't a hundred percent accurate but it will locate at least 90 percent of your stuff so this is how you would do that so this is another CSV for the addresses I don't want to worry about that for now and there is a geocoding option I'm gonna do a code with a CSV you browse for that CSV did follow their special terms dresses CSV and then it should default provided you've got the similar or the same address fields field names see this one's wrong that ones in city field but change out to town and then we need an API key see if this one still works and the output can be in that place and there's a shape file on addresses and then this is a an error log and the error log will be just another CSV which lists the errors and hopefully there won't be any click okay and it should run now the geocoding will happen relatively quickly and the progress is indicated down here there again when it's finished hopefully you'll have a 100 percent correct import and if I open it up let's have a look this is what the HP table looks like so that's just a way of locating your or your client data if you don't have the coordinate the coordinates for for that particular property it's a geocoding tool using the address and the street number and the and the street address based on it Tom okay so that's just another way you can input client data right so I just want to go ahead and then then briefly show you that yeah that online map which are created as an example for your particular business ok so this is the the the map window the online map window as as it would be in a normal browser without being embedded in an iframe and then if you wanted to embed it on your web page you would just make it look something like this I've just embedded on an arbiter page here quickly and I've called it a board let's see if that works okay there we go so you can see I'm just embedded on an arbitrary page here and you could change the the iframe size accordingly likewise in this example I've just gone for a basic example you can split the legend up so that you can turn on and off the various types of businesses in this instance it's it's set up as a cluster so as i zoom out you'll see that you have eight businesses in this area and then likewise if you in comma key you may have have another amount if you chose the cluster option it's quite nice a test option because it sort of consolidates and makes the map quite neat as you zoom out and then as you hover over each of the businesses it just pops up with information about it and you know there could be a telephone number here a web link etc so it's more of a direct tree quite a nice directory option compared to to the existing Google map and customizable and and quite readily and easily exportable from a hugest project so so you can really I mean the limits of this mapping is generally restricted by your ability to to maybe do a bit of coding and then also your imagination really so yeah just thought I'd create a quick video to to give you an idea of what's possible and if you are interested give me a shot and and we can chat further what can come in and and meet you and and I have a chat about about other stuff of a coffee or something like that okay nice Barbara take it easy we'll chat another time Cheers

Channel: Q-tips

Views: 16,233

Rating: 4.9787235 out of 5

Keywords: QGIS2WEB, Leaflet QGIS, QGIS, Leaflet, Geocoding QGIS, Importing CSV, Importing Coordinates QGIS

Id: XRD19qBzojo

Length: 20min 39sec (1239 seconds)

Published: Fri Mar 30 2018