Make an Open-Source Web Map with QGIS

Learn how to create a free, interactive web map using the open-source mapping software, QGIS, and the QGIS2Web plugin. After designing a map and generating the web map files, the workshop shows how to deposit the files in a GitHub repo and publish the web map to a live URL that you can share. A sample dataset showing sunset times across the U.S. can be used with the exercise tutorial. View the workshop materials on GitHub: umass-gis.github.io/workshops...
Introduction
2:01 - Workshop overview
Setting up the map in QGIS
3:10 - Static vs. web maps
8:46 - Exercise overview
10:10 - What's in the sample dataset
12:29 - Opening QGIS / adding data and basemaps
15:53 - Changing the project's Coordinate Reference System
17:22 - Organizing project files
18:24 - Exploring the attribute table
20:55 - Symbology (categorized)
24:55 - Symbology (two variables)
28:22 - Symbology (graduated)
Using the QGIS2Web plugin
34:03 - Overview
36:40 - Setting up the project for export
45:04 - Plugin's layers and groups tab (layer visibility, popups)
49:07 - Plugin's appearance tab (abstract, widgets, default extent)
56:06 - Plugin's layer visibility tab
56:50 - Exporting the web map files
Publishing the map in GitHub
1:00:54 - Overview
1:02:14 - Logging in to GitHub / creating a new repo
1:06:04 - Editing the ReadMe file
1:09:10 - Uploading the web map files
1:13:34 - Publishing the web map with GitHub Pages
Random hot tips
27:58 - Renaming a layer
33:08 - Making a copy of a layer
43:12 - Applying symbology from one layer to another
Recording from the workshop "Make an Open-Source Web Map with QGIS" by Dr. Becky Seifried, Geospatial Information Librarian, UMass Amherst Libraries.

[@Archiblog]

Thanks, Becky - especially for 'Publishing the map in GitHub'.

[@ados1312]

One of the best workshops I've watched recently. Thank you, also on behalf of my students.

[@manix8499]

I followed each step and finished my first successful web map with my own data that I collected. Thank you so much!

[@metarovers7660]

Ma'am Rebecca, I truly admire your teaching style and the way you explain everything in great detail. Your efforts are highly appreciated.

[@rmuser08]

Great workshop, very clear, thank you so much Rebecca

[@muhammadzia8237]

Excellent workshop. Thank you

[@martontapas1283]

That was very detailed and exactly what i was looking for. Thank you so much

[@GeoXY]

Thanks Rebecca for the informative tutorial!

[@adnansijercic8727]

Excellent workshop 😀

[@harryflashman4542]

Very impressive presentation.

[@paulbridgman3437]

Thank you very much for this 🙏

[@wanderingnaturephotography7223]

Great tutorial.

[@MotionEpic]

Interesting. Thank you for sharing.

[@daobuithithuy1880]

Thank you for your sharing.

[@lFoRGoTl]

Thanks Rebecca it is a great tutorial video :)

[@Thinkernomics]

Great work

[@DrZubairulIslam]

Thanks, Rebecca Seifried, I subscribed to your channel, Well done.

[@tomchadwin3293]

What a great qgis2web tutorial. Thanks so much for all the work in putting it together and sharing it! I'm sorry about the attribute filters not picking up the layer names properly - that is a bug. And I'd love to know why popups weren't working when you initially chose OpenLayers as your export format. They should work! But again, thanks!

[@rebeccaseifried2823]

Thanks, Tom - that means a lot! I'm a big fan of qgis2web and gain ever more appreciation for it every time I work on my web maps :)

[@Lucas_RFS]

Thank you =)

[@etergreen]

Thanks Rebecca

[@selectedvideos6180]

GREAT VIDEO! You've probably already covered this in previous videos but I'd just like to add that I found out the hard way that when you duplicate or copy a layer, it uses the same underlying data as the original layer you copied from. This means that any changes or "edits" you make to the newly copied/ duplicated layer will also be made to the original. Also, never have two maps open in separate instances of QGIS that are editing the same data set. BIG mistake. LOL..... (I can laugh now)

[@rebeccaseifried2823]

Great tips - thanks for sharing!

[@hyelduke]

Great Becky, thanks for the knowledge shared. pls what's the best methods/apps to use in developing a GIS web based land information system (LIS)

[@narinnarin5244]

hi, do you have a link of a complet guide or toturials for webgis, thanks a lot for shring

[@christianalvarez9930]

Great video, right now I'm having a bad time trying to figure out how to add a legend for a raster for this webmap. It's actually a simple idea, my raster has 8 categories, but I can't find how to show those categories on a legend in the webmap... do you know how could I do that? Thank you!

[@rebeccaseifried2823]

This is a great question. I found one workaround solution on Stack Exchange by the qgis2web creator: gis.stackexchange.com/questions/203438/how-to-add-a-legend-to-rasterlayer-in-qgis2web-plugin-while-exporting-maps. Basically: take a screenshot of the legend you want to appear in the web map, save the file to the `legend` folder that qgis2web creates on export, then edit the code in the index.html file to link to that image. Look for the line of code that begins `L.control.layers` and replace "YourRasterName" with ' YourRasterName'. This forces the legend to use your screenshot as a symbol in the legend. You'll likely need to play around with HTML code to get the screenshot to be the right size.

[@user-mc8yq4pn1d]

Rebecca, thank you very much! your video is realy well done, clear and complet! I had develop my own webmap but I have some dificulty: - With just some datas, I can charge the update preview easily. But when I use more layers, it's difficult/impossible to download the preview and so to export... Do you know if there is a way to make it easier for the software? - In the legend, I have some layers with a lot of informations, but they contaminate the legend. Do you know if it's possible to manage the legend and take off some informations? I saw that I can delete the color information in my source document, in "legend", but not the wrote informations. Thanks again! Have a great day. Thomas

[@rebeccaseifried2823]

First question - if your layer is too large (it has thousands of features, or the geometry is very complex), then this method won’t work for your web map. Vector layers are exported in geoJSON format, which is only suitable for smaller files. Similarly, if you have large raster layers, it will slow down the web map significantly. Second question - rewatch the video starting at 23:30 for how to change the text that appears in the legend. Alternatively, you can edit the code in the index.html file (this line: github.com/rmseifried/sunlight-in-the-us/blob/f5fc21a2d3d18ac7f27b4a96fa3392eba76752a5/index.html#L555C1-L556C1)

[@antoniepeens9667]

Thank you so very much for this. Definitely learned a few new things I have not noticed before. One question, is there any way to make the legend collapsible to hide the symbology? If the symbology that is applied has a large variation, it leads to having to scroll to turn layers on and off. Any idea on how to achieve this perhaps?

[@rebeccaseifried2823]

The layers list can be set to "Collapsed" or "Expanded" - check out the video starting at 51:15. Does that fix the issue for you?

[@antoniepeens9667]

@@rebeccaseifried2823 thanks for the feedback. It gives a kinda basic collapsible option straight from leaflet export. I realised that I am actually looking for a button, which when pressed will expand the legend. It seems that it requires a bit of coding to get to what I am looking for.

[@rebeccaseifried2823]

@@antoniepeens9667 Yep if you're able and willing to dig into the code itself, the Leaflet documentation will come in handy: leafletjs.com/reference.html

[@dennismejia]

Hi Rebecca thanks for the clear explanation, almost everything is working great for me, but tab "Layers and Groups" never show me the Popup Fields, only shows "Visible" and "Popups", do you have an idea what can be happening. Thanks!

[@rebeccaseifried2823]

Is it a vector layer with an attribute table? A file like this might end in the extensions .shp, .csv, .kml, .geojson, etc. If it's a raster layer (such as a base map, or a file ending in .tif, .img, .jpg, etc.), then it won't have an attribute table and therefore there wouldn't be any data for a popup to show.

[@dennismejia]

@@rebeccaseifried2823 Hi, I use vector .shp with Attribute table and XML and no Popup Fields option is displayed, I´ll continue making test. Thanks for taking the time to answer.

[@Gautam1108]

Great tutorial. But I am unable to see the column for the 'Filter' created once I have selected a feature as the Attribute Filter in the Appearance tab. I don't understand what I'm doing wrong. Could anyone help?

[@Gautam1108]

Would love to hear what you think Rebecca. Please help.

[@rebeccaseifried2823]

The first thing I would check is that "Leaflet" is selected as the export format (to the left of the "Update preview" button), since attribute filtering is only supported for Leaflet-based maps. See other known limitations on the plugin's GitHub page: github.com/tomchadwin/qgis2web

[@Nat-mv4os]

Thank you for the video. Is it possible to make a web map with time-series data?

[@rebeccaseifried2823]

Great question. It looks like there was some effort to integrate a time-slider extension into the qgis2web plugin about 5 years ago, but it wasn't tested for QGIS 3 (extension: github.com/ruz76/qgis2web_time_extension ). If you're comfortable with HTML, you could use the sample code in that repo as a template and try editing your web map files manually.

[@redahassanin4255]

Is there a way to communicate with

[@adebayooluwatosin8103]

Great work, please what's the source of the sunlight data.

[@rebeccaseifried2823]

I got the sunrise/ sunset times and hours of daylight from Sunrise-Sunset.org via their API. More info and data sources are listed in the GitHub repo for the webmap: github.com/rmseifried/sunlight-in-the-us.

[@user-sz2if9sv7i]

How can we create/link a webbased Jason/GeoJason data from html and make it into a static QGIS map

[@rebeccaseifried2823]

I think you're asking if it's possible to download a layer from a webmap and import it into QGIS. The first step is to download the file, which you can do with a browser's inspect tool (see the answer by tsando here: stackoverflow.com/questions/40772571/how-to-download-a-json-file-from-url). If the layer was created by the qgis2web plugin, it will have been converted to JSONP, so you'll need to remove the first bit of code up to the first curly bracket and then rename the file format from .js to .json (see gis.stackexchange.com/questions/265612/qgis2web-outputs-data-layers-as-jscript-script-file-can-i-convert-them-bac).

[@josepablorodriguez8207]

Hello, is there a way to show an image of the State once you select it?

[@rebeccaseifried2823]

Not sure I understand - do you want the image to appear in a pop-up box when you click on a feature? If so, I'd recommend Googling "qgis2web image in pop-up" - there are step-by-step tutorials and videos that show how to do this.

[@josepablorodriguez8207]

I'll look into it, thanks for your response@@rebeccaseifried2823 !!

[@MerkatoGebeya]

Hello, I watched your video. I wanted to learn it a lot of time. Now, thank you for preparing and sharing it in a simple and easy-to-understand manner. What I want to ask you next is that I wanted to publish my web map, but the institution I work is wants the shapefiles to be protected, and what method should I use? please accept my request on linkdin

[@rebeccaseifried2823]

If your data is private or for whatever reason should not be shared with the public, you can still follow this tutorial to create the web map files. The files will be saved to your local hard drive, and you an open them in a web browser. You should not follow the parts of the tutorial showing how to upload the files to GitHub to create a public website.

[@sajanbalami7616]

Hello Mam, Which programming language is used for this webmap?? And Great Video

[@rebeccaseifried2823]

The qgis2web plugin generates a bunch of files. Some use JavaScript (files ending in the extension .js), some use CSS (.css), and the main file that the web map uses is in HTML (index.html).

[@sajanbalami7616]

@@rebeccaseifried2823 Thank you

[@kentthomas1045]

What would you say is a great way to host such an open source Webmap?

[@rebeccaseifried2823]

Starting at 1:00:54 I show how to host the web map for free on GitHub

[@misstalleyne929]

Could anyone answer ...Does the web map work well for layers with thousands of features.? When i preview my web map (before exporting) , the preview of my web map is very slow and sticky.

[@rebeccaseifried2823]

Layers are converted to geoJSON format, which will definitely slow down if the file is too large. If you are able to export the web map, check the file size of this data layer (in the "data" folder) - it should only be a few megabytes or less, ideally. If you need to reduce the file size, you can try deleting attribute fields you don't need, or simplifying the geometry (if the data are polygons or lines).