Make an Open-Source Web Map with QGIS

today's workshop is making a web map with open source software um and i am becky seifried i'm the geospatial information librarian here at umass amherst um i have over the last couple years gotten much more into qgis which is a free and open source gis software in the last few years it's become really quite an amazing and powerful piece of software that rivals everything almost everything that arcgis can do but of course it's available and accessible to people who are working on mac or linux and also people who don't want to pay the esri fee to use arcgis so we're going to be learning today how to make a web map using qgis and one of the many many many plugins that software developers have created for qgis in order to do this very thing so hopefully those of you who are here have some experience with qgis already and some basic concepts about gis i'm not going to go into a lot of detail about that today there are other workshops available on the website including the learn the basics if that is something you want to go back and do on your own time and we'll just get started i guess i'm going to share my screen all right if at any time something goes wrong and either my screen freezes or you can't like i'm talking about something you cannot see please feel free to unmute yourself and let me know when i'm in the screen sharing world i sometimes don't see the chat um or have a hard time thank you for that sasha i saw the chat that time feel free also to interrupt me at any point if you have a question um that's related to what i'm talking about or unrelated we can we can talk about it later so what we're talking about here today is two hour workshop on making an open source web map and the basic kind of outline right here we're doing introductions right now and i'm going to continue that for a few more minutes we're then going to talk about how to set up your map in qgis that's the first step to making a web map then we'll go through the steps of using the qgis to web plugin there are tutorials for this out there which i've used in order to teach myself and hopefully we'll be able to demonstrate that without too many problems live then we'll take a short break because this is a two-hour workshop i want to make sure people can can get a break from this when we come back we will then move on to the platform github and learn how to publish that map and then hopefully there will be time at the end for you to do this yourselves and or if you have questions we can we can also use that time to answer specific questions but again at any time you are welcome to ask me questions just unmute yourself if i don't see your chat all right so again this is the website that i put together we're going to start very briefly by talking about the difference between static maps and web maps and the first question that i think i would recommend asking yourself is if you have a story you want to tell in map form what is the best way to do that static maps are a really great way to tell a story we see them everywhere we see them in printed articles um we see them in journal papers and other kind of scientific publications they're a great thing to me to make if you want to just post it on twitter and get some likes so here's an example i put together this data set um because i'm a big fan of sunlight and we are kind of in this moment right now where daylight savings time is kind of up for debate in congress so i thought this would be a timely topic to look into i will just come out there right away and say i am pro like sticking with daylight savings time forever because as this map will show you i made the static map basically showing what time the sun sets on the shortest day of the year december 21st this past year and how many people i call this my map of darkness suffering like how many people are you know living in these early sunset times on that shortest day of the year so we're over here in this dark corner of the u.s and there are certainly some places in the u.s where you probably aren't affected so much by the early sunset in december like texas and florida and georgia those are great places to be if you like the sun and so this could be an interesting infographic that i share with people and it might accomplish everything that i want to accomplish which is for me just to share with people no worries about being late welcome i'll repost the website link in the chat all right there it is um yeah so this would get across you know my point which is pro daylight savings time but what if i wanted to get people more interested in exploring this data you know this is not an interactive map if somebody lived in nebraska they wouldn't be able to learn much more than they have a pink dot which tells them sunset is between 5 and 5 15. that's not very precise so what web maps allow us to do if i click on that is create an interactive version of this this is not this is a draft that i made please do not judge too harshly but the point that i'm trying to make here is that now this person who lives in nebraska could click on their city and find out more about it so they can find out that sunset specifically is at 5 10 p.m on that shortest day of the year they have 9.3 hours of daylight um they're in the america chicago time zone and it has the population and density you know i could customize this however i want to show what information i want to be in this pop-up so people could click around on different cities they could zoom in and explore some really interesting differences like here um just east of chicago we have michigan city indiana where the sun sets at 421 and not far away benton harbor michigan michigan where the sun sets a whole hour later fascinating some other things you can do with web maps are create kind of in like responsive pop-ups info panels turning layers on and off i have some filters in here so let's say we wanted to just see the most populous cities we could filter that out by population let's say we only want to see things in the americas chicago time zone we can filter that out or alternatively just everything in california so these are some cool things we can do with web maps i'm going to back zoom zoom tools are in the way yeah i'm going to click the back button there we go all right so i have a just a quick little um kind of pro con comparing the two versions to help you decide whether making a web app is really worth your effort worth your time i assume because you are here in this workshop you think making a web map would be a really cool way to tell your story um but just putting this out there some pros and cons i think that from my experience putting these two different maps together i'd say that web maps generally are more accessible or more interesting or more exciting ways to share your data the difference is that like making a static map especially in terms of map composition is going to be a lot easier especially if you've already gotten experience with a gis software like ugis where you're used to creating a map and adding text and map elements through just like a button approach doing that in a web map is more complicated and that's where using qgis to web that plugin makes that so much easier it's much more of a kind of click button approach to creating a web map it's also totally possible to design a web from code using just coding expertise which is not what this workshop is about it's beyond our skill level today but otherwise i think static maps are are you know kind of the less interactive less exciting version but they are easier to make so today we're hoping to kind of tackle this will let's think about an easier way to make a web map for us all so on this website there's also an exercise which i'm going to kind of go through in real time right now um for the rest of this workshop but this layout is here if you want to go back and do it on your own time or in the last 30 minutes of the workshop when you have time to do this on your own it is not a thorough step-by-step tutorial but it does have the general steps so they're outlined here like step one get some data if you want to use the data i'm using you can download that here make the data look nice is step two install the plugin etc etc and i also want to just draw your attention to this step here step four which is use the qgis to web plugin i did not create a step-by-step guide for this because there already is an excellent one that is just about this step and so i highly recommend checking it out if you get stuck on that particular step here it is i can't recommend this website highly enough it has a really amazing tutorials just about qgis and this one about the qgis to web plugin is excellent has screenshots they might look a little different from the most recent qgis versions but they the steps are basically the same alrighty okay so with that i'm going to get started if you download the data set that i shared in the website and you unzip it it will look like this sunlight data pack there is a readme in there that just explains how i put this data together where it came from there is a csv file if you are interested in working straight from the source and you want to get some practice converting a csv file into a shapefile you can do that if you have a question about that at the end i'm also happy to go through those steps but this is showing you the raw data that i used to create the shape file so we have all of the city information that came from the simple maps u.s cities database and key within here it has a latitude and longitude value for each of the cities and these are the 1000 most populated cities in the u.s and it has other information like population and so on and then it has the time zone which turned out to be really like key for the next step from there i wrote a python script which is also available in the github repo where all of this material is stored there's a link in the readme text if you're interested in that script that i wrote basically it queried an api that had sunset times in it so it was able to retrieve for each of these latitude longitude values the sunrise the sunset and how long the day was which i guess is here day length and i also did some things to convert it into human readable times that took into account the time zone so what we're having here is like the local you know sunset times which is super important oh let me post that website one more time for folks who just came in all right cool so these are the data that you can play with there's a lot you could do with this data you do not have to make a map just about sunlight if you want to make a map that's exploring population you can do that instead or time zones or whatever you want night length and so on but i also made a shape file out of this if you're interested in just getting straight into mapping there's a shapefile that's that's been cleaned up and i added a couple more fields to make it more fun so we're going to start by launching qgis and again if you need help installing qgis the link that sasha posted in the chat the learn the basics has a step-by-step kind of tutorial for how to get qgis onto your computer i'm going to start with a new empty project you might also have noticed that i'm running qgis 3.22 which is the latest long-term release i generally prefer to install those because they've been user tested and are less buggy it is also possible to install the most recent version i don't i can't remember what it is maybe 3.24 which has more features but is also kind of still it still has the potential to be buggy and since i'm leading a workshop live i thought i didn't need that extra extra added potential things to go wrong all right so i'm going to add that shapefile that i created into my session all right and we see here this is a map of a bunch of cities in the united states um one thing you might note if you start working from the csv file which is the full data set it it is the 1000 largest cities in all of the united states which includes alaska and hawaii and puerto rico and i removed those from the shapefile because i wanted to make a map that was just the contiguous 48 so that's that's why this one only has like 990 features not 1 000. all right so i added my shapefile um another thing that i like to do with qgis is use the base map function um this is a plug-in that i recommend everybody install if you're running qgis we go to the plug-in menu and search for quick map services this is a great plugin oh i see there's a new version available should i upgrade right now live maybe not but normally you would see an option to install the plugin once you install the quick map services plugin there is a menu that shows up in the top if you're working on a windows machine it might look a little different i'm working on a mac but generally there should be a web menu and you'll see quick map services and the standard base maps that come with this are osm and i think maybe the nasa layers it's not very extensive and so you can just click that and say i want to see the osm base map isn't that amazing okay that's super great another kind of hot tip is if you want to see more options like you see i also have access to the google maps and some cool maps like this weird watercolor map which i'll show you looks like that you can turn those on by going into the settings for quick map services and clicking the more services tab and click get contributed pack and once you click that button and it's warning you these are not validated they're kind of just you know who knows where they came from you can go to the visibility tab and turn them on and off so we can see that i've turned on a couple of the contributed packs that lets me use other services as my base maps like the positron that's a nice one that's the one i used in the examples but for now we'll use the osm all right so we have our base map the next step um is to like think about how this is going to look in a web map um right now the united states looks a little squished right that's not the way we normally see the country kind of portrayed on a map and that's because the projection has not been changed to the coordinate system has not been changed to a projected version we're looking at a geographic coordinate system and decimal degrees which we can tell because down here these are decimal degree values so i'm going to change my project coordinate system this button in the bottom right corner and we see it's right now highlighted on wgs 84. the one that i'm going to use for the purposes of this map is wgs84 web mercator auxiliary sphere this is a coordinate system that is basically designed for web maps and it's in the mercator version that we normally see if this is not an option clickable here you can search for web mercator and as you start typing in the filter box it filters through all the many thousands of coordinate systems to return just things that match so you can select it from here and then click ok and suddenly we see that the united states looks a lot more you know the shape that we expect to see it in so i think this is a good choice for my web map and i'm happy with that all right so we've done the kind of like basic setup we've added some data we've added a base map we've changed the projection so it looks nice i'm going to save my project always something i forget to reference or mention to people so i'm going to name it and you'll notice that i'm working in a dedicated folder for this project and i also created a folder just for this demo data organization is something i talk about in the learn the basics workshop but just a friendly reminder that using folders will help you down the line and naming things um so that they make sense to you also is helpful you might instead of calling it working actually i realized maybe sunlight workshop makes more sense so i know that this is the one i created for the workshop okay i'll click save all right now if i get disconnected or my qgis crashes i'll be able to open my project and start where we left off which is great all right the next thing i want to do and i encourage everyone always before you start playing around and getting lost in the kind of nitty gritty of map design is to try to understand what data you are working with we already looked at the csv but as i mentioned the shapefile has some extra fields so let's take a look at that by opening the attribute table all right so as we saw in the csv file we have rows of data there are 990 of them so that's 990 points the attributes that they have in here are city name state id full state name some other kind of numeric information time zone and then we have all of the other things that we saw in the csv plus these three extra fields so what i did to prepare this was i took the day length which is the number of hours in the day of sunlight number of hours of sunlight and i translated it or configured it so it isn't many many many decimal points which is not really easy for the human eye to read and i made it so that the field only had a precision of one meaning one decimal point that's going to look a lot nicer in a pop-up so i'm already kind of thinking ahead to like what is the format i want my data to look like when i'm designing my web map i also created these other fields which are essentially ways of categorizing the data i came about this retroactively or retrospectively when i was playing with the qgis to web tool i realized it could not do all of the things i wanted to do we'll see that in a moment so for example when i wanted to kind of group categories like i wanted in my in my static map i grouped a bunch of these sunset times so that everything that is before 415 or so um is grouped together into a category that i labeled before 415 and the plugin couldn't really do that so what i did is i created a new column with the kind of category name in there so everything here i labeled 415 and that's the max sunset time and then i also did that for 4 30 and so on and so on so that's going to make it easier for us when it comes time to creating a web map so these are all the fields that you can play with on your own and you can decide how you want to display these and what symbology you want to apply so let us try to play around with that a little bit all right so i'm going to open the properties for this layer and go into the symbology tab it opened right there for me because that must have been the last thing i was working on and i'm going to change the symbology type from single symbol to let's say categorized let's say i'm interested in looking at some of the categories of data and when i choose this it only gives me the options to select from fields that have categorical data which is quite a lot of them or things that could be categorized so for example let us look at the time zone categories and if i click the button classify it will look in the attribute table and retrieve all of the unique values from that field and so we see that we have all of these different values and we have a legend which i could change if i don't want it to say america boise but just boise i could change that and when i click apply we will see that it updated my legend we can also change the colors that are applied to this right now it's random but maybe i want it to be drawing from this turbo option i'll click apply and it just updates them i can also change the base symbol so it's not two but let's say four millimeters in size click ok click apply there we go cool so that's a map i can make i can make a web map of this time zones in the united states i don't actually know what's going on with these ones um if anybody here knows more about this please feel free to chime in why is arizona its own i don't know what's going on with these cities down here i'm not sure um i didn't fact check that these time zones were correct i just downloaded this from the internet so maybe that could be something i'd want to check before i make this public um what other things we might want to symbolize let's see let's look at that that field that i was talking about trying to explain that sunset category so if i click that and then click again classify it's going to ask me do you want to erase all of the things that we already have in there yes i do and so we see that these are the categories i'm going to click apply and already this should look kind of similar to the map that i created um in that workshop i'm going to use the same color spectrum that i used before and remove this all other values i don't i don't want that to take away from my nice dark purple to yellow spectrum so i'm going to remove that and apply that color scheme again there we go now it's dark purple to yellow click apply and this should look basically the same at least in terms of color so what's happening here is that all of these things with this very dark black or purple they have a sunset time somewhere before 4 15. so i'm going to update that legend before 4 15. and that means that the rest of them are ranges 4 15 to 4 30 4 30 to 4 45 and so on i can't tell you how long it took me to figure out in qgis how to change legend items i think it's the same as an arcgis but um you know some things are just so slightly different they're hard to learn um and then this one i'm just gonna change to after 5 45 pm because i want to click apply again it didn't change the color at all but it changed the labels in my legend so now if i were to make a map it's going to pull those you know legend items all right cool so let's say i'm interested in that and the web map that i created was showing us kind of just point locations one of the kind of drawbacks of the qgis to web tool i noticed you cannot display two variables at once what do i mean by that right now we are using symbology to apply a color based on one field in a lot of maps like the static one that i made it's possible to show both color and size to convey information about two different fields what does this look like i'm going to duplicate my layer and show you okay so here's my copy this was one of the things that i didn't know how to do in qgis until i was preparing for this workshop so that was really exciting so you start with qgis by using a category categorical value like sunset times to apply something based on numerical data like population we're going to change the symbol um so if i click on the symbol instead of changing the size here i'm going to click on this button on the right hand side and open the assistant and this is basically asking you what is the second field that you want to use to change the size to make the size variable and the field i want to use is population i'm going to click this kind of fetch circular button to retrieve the minimum and maximum values from that field and i can also change the size so the smallest is one i might make it two because one might be too small that you can't see the color and i can go as high as i want i'm going to use 18 and i'm going to change the scale method to surface honestly i can't tell you why it seemed to look nice when i did it one drawback to this method is i can't reduce the number of circles it's it's just kind of like a range it's not like categories it's ranging from 2 to 18. so i'll click ok i'll click ok again i'll click apply and get ready let's see when i click apply we see it's now changing the size of those circles based on the population so this is now looking quite like the map i made that was a static map one of the powers of static maps you can show two variables at once with the qgis to web plugin you cannot for some reason it did not work and so my workaround for that was simply just to choose from my web map to show one variable sunset time and rely on users ability to click on items in order to find out more information like population so that is one drawback i could also do two layers i could have a layer for with color showing sunset time and i could do a second layer showing population so i'm going to try doing that for our demo data management practice hot tip i'm going to start renaming my layers so i know what they are so this layer is u.s city sunset and if i make a copy of it i'm going to call it u.s cities population and i'm going to change the way it looks from a categorical data type to graduated all right and i'm going to draw from that population field again i'm going to click classify i'm going to change the method i want it to kind of be scalar based on size and i'll go with those same minimum maximum values and let's change the classes maybe eight of them how does that look that does not look good i'm gonna experiment and try some more all right another hot tip um when you're doing a graduated symbology using numerical data you can also change the way those sizes appear by changing the mode so right now equal count means it's trying to fit the same number of circles into each grouping but actually for population i don't really want that i want the sizes to be more reflective of the actual underlying data if i did for example equal interval i'm realizing that's actually not great either because most cities are really small in this data set so for the purposes of my pretty map i'm going to choose natural break natural breaks jinx which honestly i don't really understand quite super well how it works but it is really nice for map making if you don't care very much about there being equal numbers in each bracket how does this look starting to look okay all right what if i make it bigger all right at this point you can just play around basically forever until you are happy with the way your map looks that's pretty good as showing us the hot spots of population i'm also going to change the symbol i don't really want it to be purple for this um i think i'll pick white maybe there we go or another color you can pick whatever you want blue it is all right so now we have a population layer so right now i've got a sunset times layer and i have a population layer um and i'm going to get rid of this extra one that i made showing i won't get rid of it i will rename it so i know what it is u.s cities sunset and population all right cool so we already talked about base map choices um the next step once i have the layers that i'm like happy with i know that these two layers are the layers i want to put my web map i also want to pick a base map what i chose when i was doing this for the demo was this positron no labels version which again comes from the cartodb contributed pack but you can choose whatever base map you want if you want it to be this if you want to use a base map that is say the google satellite you totally can whatever base map you want i will warn you that sometimes depending on the contributor and whoever's offering this web service it might not export super well um using the the qgis to web plugin so it's just a matter of testing and making sure that it works before you actually post it online but i know this one works i'm gonna go with that all right how are we with time at this point does anybody have any questions before i move on to the qgis to web plugin stop sharing for a second i don't see it oh how do you how do you copy a map what do you mean by that could you clarify like how did i copy the layers okay was it the layer that you were wondering about i can show how i copied the layer all right let me share my screen again all right so if i'm working here and i have let's say this u.s cities sunset layer let's say it's the only one i'm looking at and i just want to make a copy of it if i right click that layer there's an option in the menu to duplicate the layer there is also the possibility to copy it i wonder if that will work i have not tried that so if i click copy and then right click paste oh that's another way to do it so that made another or i can click duplicate layer and that duplicates it also so those are the two ways you can very quickly just like make a copy of a layer that includes all of the way you've symbolized it and your legend properties and everything like that awesome cool okay so i'm going to just take a moment and make sure that my web map layers are all here they're named appropriately i'm going to save my project again and at this point i'm going to move on to that section of the workshop which i recommended you you check out that extra tutorial on how to use this plugin because there's a lot more in there and there's also a lot of resources on the qgis to web github repo for ways to customize this tool i'm doing something very simple and there might be other things that you're able to do with it that i'm not showing you today okay so just like with the quick map services plugin you will go to the manage and install plugins menu and search for qgis to web that's two with a the number two and you'll click install plugin once it is installed you will see it in the web menu just above quick map services there is qgis to web so if i click create web map that opens the plugin all right what this plugin is doing is taking all my layers and it's going to output a whole bunch of files that are in css which is um like a style sheet kind of language that web applications use to style things like font and colors um there might be some javascript files javascript is a language that's used to handle things like clicking and pop-up behavior things that are interactive there will also be an html file html is the language that web browsers use to render a page out of just a whole bunch of code you don't need to know how to write in any of those languages or even read them if you do know how to read or write in those languages you could then customize them further that's one of the cool things about this plugin is it generates the base stuff for you and then it's possible to go in and kind of tweak the stuff and make it even further customized especially if the plugin doesn't do something you want it to do so there's basically this wizard here that walks you through all the different steps to turn your map into those files but the first thing that i recommend you do is go to the help tab which i really think should be the first tab because it has a whole lot of information about what to do to get started and to make sure your project is ready to be exported so key here prepare your map as far as possible and here are specific tasks that you want to do to improve your web map so first things first is set your project title and background and highlight colors and we can get to this through the project project properties menus so project project properties if i go to the general tab i see that there's a possibility for me to give this a project title so i'm going to call this sunlight workshop demo you can call it whatever you want selection color is by default yellow i'm going to pick bright red and the background color just so that we can see what it does in the application i'm gonna pick um it's kind of like pale orange okay all of a sudden you might have noticed that my project the title of my qgis project up here in this top bar which i can't see because of the zoom tools it's now called sunlight workshop demo so the file name is still if i look at it in my my hard drive it's still sunlightworkshop.qgz but since we added a title it's now up like updating it here okay cool we did that next give your layers human-friendly names in the layers panel actually i already did that not even intentionally but i've renamed them and to rename a layer you will right click it and go to rename layer this allows you to change how it's going to appear this is how it's going to appear in your web map so important to give it a name that like somebody who's viewing your web map will be able to interpret and make sense of without having to understand it or read something so so maybe i want to rename it something like u.s cities population and actually i'm not sure sunset makes sense sunset time okay i'm gonna save my project all right next it recommends to give your layer columns human-friendly names again that's the attribute table what each field is called and we can do this through layer properties fields alias okay so i'm going to open the properties for one of my layers and go to the fields menu here's property fields alias yeah okay this is what i found out i in my version of qgis i'm not able to update the alias in here i'm not sure if that's something everybody can't do so what i found is that if you go in the attributes form instead this is a place where you can change the alias so we see in this menu this is where we were in symbology before we'll go down to attributes form and select one of the fields and i can give it a different alias and what this means is again in the web map when i clicked on a city and i saw it read city you know boise or something like that it was reading with a capital c and that's because i had changed the alias to be capital c city and i'm going to do that for any fields that i think i'm going to want to appear in my pop-up so maybe my state id i also want to just read state people don't need to know it's the field name is state underscore id they just want to know that it's the state if i'm going to want the population value to be there i might put that in the alias density i might actually rename this pop density you know whatever you think is going to make sense to your viewer you can also have special characters and spaces in the alias which you cannot have in the field names so that's pretty cool let's say i want the time zone in a capital t time zone and sunset sunrise and sunset short this is an abbreviated version of the word short is the human readable time um that i designed so i would like those also to be my attribute tape and sorry my pop-up so i'm going to rename those just to sunrise [Music] and sunset and i also know that i'm going to want these last three columns so daylight in hours max population and max sunset would be like latest sunset time all right i'm gonna click apply don't forget to do that and then okay and that should save the changes you made all right next hide the columns you don't want to appear in your pop-ups which i have a lot of fields i don't want to appear in the pop-ups by changing their edit widget widget to hidden so we do that in that same place um in that attributes form so for example i don't want state name so i'm going to change the widget type to hidden i don't want latitude to show up hidden or longitude population we do want density we do want time zone we don't want the long versions of sunrise and sunset those are very difficult things to read they're like formatted in utc which does not make sense to humans it's gonna hide them those we want i don't think i want these longer versions of day length and night lengths because if you remember those are like fields that have lots and lots and lots of decimal points so i'm going to hide them all right and click apply okay next if any of your fields contain image file names which we don't there are instructions for how to handle that next it says to style your label labels which we have done already and i think that's all we need to do to get ready i just realized however with my u.s cities population layer i have to repeat that process in the attributes form and you know give them aliases and everything but because these are identical layers the only difference is i've changed the way the symbology is i'm just going to save myself a moment and duplicate the sunset time layer because that should have preserved yep it preserved all of the changes i made to the fields in the attribute form and now i'm going to this is pretty fun watch this i'm going to copy the symbology from the layer i already stylized for population and paste it into this one this is a cool thing that um that qgis can do i'm not sure if arcgis can do this maybe it can so if i right click the layer and go to styles copy style these are all of the things i can copy about that layer i'm going to copy the symbology now i go to this layer and i go to styles paste style the only option i can do is symbology paste it sure enough it has just brought in the same symbology for that layer so now i can get rid of that other layer that i created before and rename this so i know what it is all right okay we covered just a lot right now that was all getting ready prepping to use the qgis to web plugin do we have any questions about that checking the chat checking the time all right i think we're probably ready to go ahead and use that plug-in just what we're all here for i think so i'm going to share my screen again save my project one more time can never save enough and i'm going to open that plugin from the web menu create a web map and we already did everything on the help page so fingers crossed this goes well this is always fun so we see in the layers and groups tab anything that's checked are layers that will be exported with a web map so we see u.s cities sunset time us city's population and down here the positron layer which actually i should rename that i'm going to rename that right now because that is not a really nice name i'm gonna call it cartodb to give them attribution positron okay now let's get started all right so now we see that's been updated there um and everything else that is unchecked will not be exported with my web map um the next thing we can do is change things like do we want this layer to be visible yes do we want there to be pop-ups with it yes and for the pop-up fields um let me show you if i click update preview it will pull in all the layers so we see like a preview of our web map if i zoom in and click one of those points it's not letting me do that not sure why maybe i need to change that pop-ups well for now i'm going to turn on show pop-ups on hover no it's not working i know why okay down at the very bottom this is another fun thing about the um qgis to web plugin we can choose to export our files in three different kind of like languages um the open layers i don't know if that's a language but whatever version leaflet and mapbox gl js for javascript i'm going to use leaflet that's the one i'm most comfortable with there are a lot of tutorials about leaflet files it's open source it's super great that's the one i'm going to use for this demo feel free to experiment the others if i click update preview now hopefully we will see haha now yeah i'm going to turn off that hover we don't want to hover okay now we should see the responsibility that i was hoping for if i click we see a pop-up beautiful leaflet all the way um and so what these labels mean right now it's saying there will be no label telling the first row like the person in the pop-up that this is city so i'm going to change that to inline and let's see what happens when i do that now when i click on something we see city rapid city so i'm going to go ahead and use inline labels for everything so that people can see or interpret the information in that pop-up okay update preview ta-da there we go so now we can see that the pop-ups all have this label associated with them and it's the label we put into that alias field right so that's why we can see however we stylized it i'm going to do that also for my u.s cities population layer i want them to have inline labels as well and under my base map layer right now it's visible and pop-ups i'm just going to disable pop-ups because i don't want people to query the base map i don't even know if they can um anyway i'm gonna click update preview and it's just kind of like updating everything all right next we can go to the appearance tab so um ooh right add abstract this is a thing that i don't think the help page mentioned but if you go back into the project properties where we added a title you can also change the abstract in the metadata tab so we can put some information about this map i think this is a web map designed for a workshop in march 2022 to show sunset times and population in the 990 largest cities in the continental or the contiguous 48. you can put whatever you want you could put attribute credits you could say you designed it you could put your name and contact information you could put credits for the data set that i actually strongly recommend if you're using other people's data which i've done in the live version of my web map so i have links to simple maps and the sunset sunrise sunset api i'm not going to do that right now but that's where you would put it all right so now we can say we want to add an abstract you can say where you want it to be maybe the upper right corner lower right corner and i'm going to update the preview and so by adding an abstract right now it's just kind of like floating there in a box um i don't remember how to make that smaller like a pop out we'll work on it so anyway i've added an abstract you can add an address search what that does i just checked the add address search it allows people to type in an address here i'm not going to do that for my particular web map but that's something you could do you can also add a layers list and i'm going to pick collapsed and what that does is allows users to turn on and off the layers and you see that it's bringing in the legend that we styled so i like that and you can either have it collapsed so that people hover over it and it pops out or you can pick expanded and then it's just there expanded i didn't mean to do that this is how it would look if it was expanded i personally like the collapsed option so i'm going to do that and then we have this attribute filter and this is something that i think is super helpful we saw this in the web map i mean i made it allows people to filter out the points that are visible in the web map so if i want max sunset and max pop to be filters for example now people can kind of filter out those max population groupings or they can select just things that have a max sunset time that's pretty neat actually i think i'm going to keep max sunset and not use max pop but instead use regular pop i don't want to use the groups i made i want people to query the full population data and you can also put the state id in here so let's see what we get now great so now people can filter by population like the raw data or those sunset groups or the state all right i like that interestingly this is not something maybe i didn't test i'm not sure why these are not bringing in the names that i renamed them from the aliases something to look into all right you can click a geolocate user option this means that when somebody clicks on that button it asks are we allowed to use your location and if they say yes then it will zoom to their position in the map um and then highlight on hover i think is a fun option right now without it applied as i move my cursor over the map nothing's happening seemingly if i update the preview with geo with highlight on hover turned on now you see it's highlighting my points with that highlight color i picked i picked red red might not have been the best choice but you can see how that's working cool uh layer search i'm going to put on layer search and this allows people to search a layer and field within that layer so let's say i want people to be able to query the city name so i'll choose that and now we have this this little binoculars icon and that allows somebody to type in say boston and it searches for boston and well it pans pans to it i guess there we go so there that's one way to get people to be able to interact with the map wow there's a lot of options in here we can turn on a measuring tool we can have those pop-ups show on hover rather than having to click on it it can just appear um template i'm not really sure what those things are let's try canvas size i don't know what it's going to do oh i'm not sure i like whatever canvas size is i'm going to go with full screen okay and widget background i can choose a different color for my widget background so it made all of these blue okay that's cool you need to change the color of the widgets as well um like i don't know what that would do what happens if i do that and make the text white i don't know oh neat okay we can also change the default extent so you noticed every time i click update preview it's kind of like zooming and panning to a specific extent so i could change that maybe like fit to layer's extent i don't know what that's going to do there so that zooms in to the extent unfortunately my sidebar is kind of interfering with the right side of my map so you can play around with that a little bit if you want and see what is best for you this is these are also things you can change in the files your cells if you have coding ability you can go in and change the stuff there max zoom level min zoom level cool all right pretty happy with this so far um next we have let's see i realized going back here right now by default if somebody opens my web map they're going to see both layers turned on by default but i want them to be able to just see one at a time and then come in here and turn them on and off so i'm going to uncheck city population visible on the layers and groups menu and see if that does what i'm hoping it will do it does all right so now somebody could come in here and turn on the city's population layer but it is not a layer that is turned on by default all right i think getting to the point where i'm pretty happy with this web map so the next thing to do is to export it and i really recommend doing this just you know try to configure it as best you can do an export and then you can test it and make sure it looks the way you expect you can always come back and do another export so we just have to tell it where to save this on our computer by clicking the three dots icon and navigate to wherever you are saving your files um so i have this qgis to web dedicated folder you can see i made a couple other exports and how it names them has the date and time i guess so i'm just going to click open and click what is under the settings yeah that's fine i'm going to click export woohoo it was successful and now the fun part is actually testing it to make sure it works so if we go to that export that folder that just got exported we see it has all of these different folders there's a folder for css files there's a folder for the data layers that have been transformed into js files we have some images which not sure what they use them for in this web map but they will be used we have a javascript folder some stuff related to the legend there's nothing in the markers folder and there's a couple things in the web fonts and the key thing is our index file if i open this with a text editor that didn't work okay if i open this with a coding software like adam this is this is a little more advanced for people who know how to kind of edit code this is what is in the html file it's written in the html language this is what a web browser is going to use to create a web map it's telling the browser all about how to style these things you know where what elements will be on the web map you're having a pane for this and a panel for the legend and so on this is what's in that html file you don't need to be able to understand it in order for this to work now once this is exported this is like its own package this works as an entity references in index file point to these folders so if i just double click this html file it should open in a web browser and it should be a web map there it is this is a web app it exists on my computer in that folder that i just created it has all the interactivity that we saw in the kind of preview pane i can zoom in i can query things i can apply those filters i can apply these filters the only thing i'm not happy with this web map because i have not figured out yet is why my labels here did not pull from the aliases that is something for me to think about later and if you have this problem you might want to look into it as well and at this point we have finished using the qgis to web plugin congratulations the next step after this is to now actually share this web map with the world and we're going to use github to do that because github is free also but we're going to take a break so i'm going to be here but please feel free to take a break we'll come back at 1 32 for the rest of the workshop let me know if you have any questions i think you are muted thank you yes welcome back everybody i hope you had a nice break um so the session runs until 2 15. we're right on time which is super great so in this last part um we're i'm going to show you how to get those files we just created with the qgis to web plugin into github and use um github pages which is the kind of like amazing functionality of github to just create a url um that hosts those pages and what we're going to see at the end i will share my screen will be exactly what we're seeing right here which is a locally hosted web map but we will see it with a url that we can then share with people because it will be posted in github all right so again the workshop exercise which you all have a link to we're now onto step four upload the files to github so the instructions are here and there are a couple of screen shots to help you walk through this particular part of the kind of exercise because this was not included in the in the other tutorial which i again strongly recommend and this does not go into how to host this then in github so that is what this is about all right so to get started um you will go to github.com if you already have an account awesome if you don't it will look like this and you'll be invited to sign up for github github is free so you can use whatever email address you want and sign up once you sign in you'll be taken to this kind of like basic page i don't know what a page would look like for somebody who's totally new to it but you can navigate to your own kind of like profile up in the upper right corner and go to your profile and if you are totally new to github you probably won't see anything here um but that's okay if you are involved in github you'll see some things so we want to create a new repository um how to do that maybe if we go to your repositories or just click repositories right up here in the top you'll be able to create a new one so we see that i already made one for this project because that's the web map linked in the website but i'm going to create a new one for the purposes of this demo so that we can see how to do that together all right so we'll click new and you're invited to kind of fill out this fun little wizard how to create a new repository um you can pick a different template i think that might only work if you're a member of an organization that has other templates so you don't need to do that you'll just give it a name and it has to be a name that is unique to your space so since i already have one called sunlight in the us i can't give it that name again if i try it tells me this account already has something with that name so i'm going to give it a different name for the purposes of this demo i'm going to call it workshop demo and i'll probably delete the repo afterwards but anyway um they give you some tips here something short and memorable you can give it a description the descriptions what's going to show up on the main repo in the upper right corner just a brief something to let people know so web map design for a workshop on web maps in march 2022 you can optionally choose to make this a private repo but if you do the url function will not work so essentially you have to choose public if you're intending to make a public web map some other things you can start the repo with we can add a readme file the git ignore i don't think is necessary for the purposes of what we're doing we don't need to really know it choosing a license is also a good idea if you want to let people know whether they can reuse your stuff or not so i might choose i'm a fan of the creative commons attribution license which is not one of the options on here so what i might do is create my repo without a license and then paste license into it later that i get from another repo if you want attribution the options here they're really pushing people towards don't even have to to attribute just like anyone can use it for any purposes you want and if you're cool with that then pick one of those um this general public license for example is a good choice and you can google these if you're curious about what the different licenses mean it seems like this link might tell us some more about the licensing yes how to choose the right license etc okay and i'm going to add a readme file readme files are really great as we'll see in a moment then i'm going to click create repository ta-da we see i have a license that i chose which when i click on it is in fact the license i selected from the drop-down and we have a readme file this is the readme file it appears on the home page of your repository we are right now in the workshop demo repository in my github space so my github space slash the repo name and anyone who goes to this will see the readme file so it is very helpful to have one so that you can add more information and we do that i did not say how by clicking the little pencil icon this allows me to edit the contents of that so i can rename it workshop demo i can add more content i could say made by me you know you can this the styling what we're seeing here with the hashtag and things like that that is something called markdown so if you're not familiar with markdown and you google markdown you'll find lots of guides to help you know how to use it so for example a hashtag means it's a heading level one two hashtags means um heading level two and if i click preview we'll see what that means so this is heading level one this is heading level two and whatever okay oh nice thank you sasha sasha posted something about how to format uh text in markdown all right so now i can kind of preview and make sure i like what's in my readme file ideally you'll have more content than this and when i'm done i'm going to github uses this language of committing changes like committing so i've made these changes and do i want to make them it's like saving do i want to make them real in my repo it's highly recommended to add some information to let your future self know what changes you made by default it's putting a general like update readme i might put in there like change title and added data sources something like that something brief and short and then i have the option to commit directly to the main branch that's like the core live code that'll make it real and live right away um or i can create a new branch let's not think about that now if you're new to github don't worry about branches right now we're just going to commit directly to the main so i'm going to click commit changes now when i go to that repo landing page we'll see that the changes i made are now live awesome we also see that that blurb that i put in when i created the repo is appearing in the upper right corner as well as some other basic information about it okay so now we need to add our files and it's as simple as taking all of the outputs that the qgis to web plugin created and putting them into our repo so i'm going to click add file and upload files and now i can either choose them from my directory or i can just drag and drop them all just like this and you can see it's uploading them and it's preserving the folder structure so everything i had in the css folder is going to go into a css folder here in my repo which is exactly what we need in order for the web map to function correctly you can see it's listing all of the files as it's uploading them there's lots of them all right and now when we're all done we see that these are all the files that are going to get uploaded we see the folder that they're going to live in and the file name and again commit changes i can put a little brief note here to let me know like maybe initial upload of qgis to web files um the reason why i'm saying this to myself is what i've found is if i decide to make a change into the qgis to web kind of out like export if i want to export it again i might replace some of these files in the future and so i can keep editing the files in this repo i don't have to create a whole new repo i can replace the files that are in there and so i'm going to want to use commit memos that make sense to me when i look back you want to click commit changes and it's taking a few minutes in the meantime and while that's working i'm going to show you the repo for the web map that i already created so we see that this is what it's going to look like when it's done we're going to have all of that those files uploaded from the qgis to web plugin you see that the readme i made for this is a bit longer and it has some links that i built in so that people can access those data sources um i have yeah it's just a little bit more fleshed out yeah so that's a great question there's a question in the chat um whose servers are these files in github being deposited to and for how long if anybody else knows the answer to that question please chime in um github is its own company organization i can't remember who purchased it if it's microsoft um so this is a cloud repository we're uploading these files to a server somewhere else so yeah if you're working with like private or sensitive data github is not going to be a good solution for you for hosting data because we don't really have control over the security um for how long theoretically forever um practically for as long as github exists and continues to operate on a having with a free tier i think github does have more like pay tiers for people who are doing a lot in here and hosting a lot of data but for that reason a general good practice is to not put a lot like you don't want really large files in your github repo i don't know what the limits are but there are limits so it's really good for lightweight things like web maps which are essentially just text files you can you can put web maps in github probably can't put research data in github would love it if other people have other ideas to contribute okay 100 megabyte limit thank you yeah again web maps are just text files not so big let me just double check without without double checking i don't know so how big is the export from qgis to web it is 1.6 megabytes so that is what i just put into my github repo all right so when we go back to it we see it has just completed we see it's if we look at the file folder structure um here comparing the github to my folder we see a folder for css one for data images there's a js legend web fonts it did not upload markers because there's nothing in there um and we have the index file beautiful it's got everything there we also see next to each folder the the memo of the commit that i saved so it's telling whoever looks at my repo that the last change made to this folder was two minutes ago and this was the commit message so the last change made to license was made eight minutes ago and that was the initial message all right so next the next step to do basics we have everything ready we're now ready to make this public so we're going to go into the settings panel for this repo and go down to the pages page a page called pages and now what it's going to do is basically take all the files that are in our repo and spin them up into a url and because the files that we're uploading are designed to be read as a page it just works it's like magic it's amazing so it says that github pages is currently disabled if i want to enable it i have to select a branch there's only one branch main perfect very easy and then i just click save ta-da that is all you have to do it says now that your site is ready to be published if i go to that url right away it says site not found that's because it can take a couple minutes for github to spin up the url but this will be the location of my of my web map again looking at the one i already made if i go to that url that is the url for the web map there it is so that is what we're going to see once github gets done with whatever it's doing the magic behind the scenes and i can refresh this page while i'm waiting and eventually we will see like a green success message saying your page is now published um yeah so that is what i have for this workshop um at this point we have about 30 minutes left in the scheduled workshop time so i'd love to open this up to um q a also if anyone has other ideas or things to contribute also if you want to try this exercise on your own and then if you have questions as they come up i'm here to help you out so i'm going to keep this room open for two for half an hour more and i just want to thank you all for attending and i hope that you continue to come to the gis workshops that we at the libraries are offering thanks so much

Channel: Rebecca Seifried

Views: 33,410

Keywords: GIS, web maps, QGIS, QGIS2Web

Id: ZHynmLFhRZs

Length: 76min 28sec (4588 seconds)

Published: Wed May 04 2022