Web Mapping

Overview

We unfortunately do not have time to cover this in our workshop today. However, I will leave this information up incase anyone wants to try it out!

Create a leaflet web map of the movement data using the qgis2web plugin. The plugin will generate the web map files and then we will deposit them in a GitHub repo and publish the web map.

Web maps are great ways to share data with others in a visually exciting and interactive way. The great power of web maps (vs. printed or static maps) is that users can zoom, pan, click, search, and explore the data in new ways.

Use the qgis2web plugin to export your map as an interactive Leaflet or OpenLayers map

This will prompt a form that you need to fill in. There is a whole of customizations that are available including the following:

  • Layers and groups to display

  • A radio button for either OpenLayers or Leaflet type of map

  • Basemap choice

  • Data export path

  • Popup fields labels

  • Scale/zoom levels

In addition, there are several widgets available as well to add to your web map. For example, this includes everything from a measuring tool, layer search, layer list, address search, show pop-ups, and highlight on hover.

Once you’re OK with all the settings, click “Export”. Next, it will build a web map package to the folder location you select. After it finishes exporting, it packages all the contents and settings you selected into a folder.

The folder contains all of the supporting files and folders. For example, it also contains any images, layers, resources, and styles. But it also has an index file, which has all of the HTML that gets presented on the screen.

If you double-click the index.html file, this will open your browser and display everything from your setup from the QGIS2Web plugin. From here, you will have to upload the contents from QGIS2Web into your web server so the public can view your new web map.

Sign in to GitHub

Or create a new account if you don’t have one yet.

Create a new repository

Click the green New button to create a new repository that will host the web map files. Give it a name and description, and configure the rest of the settings.

Once the repo is created and you see the main overview page, click Add file > Upload files. Drag-and-drop or upload the files that the qgis2web plugin created (making sure to preserve the folder structure), add a short note in the “Commit Changes” box, then click Commit Changes.

Use GitHub Pages to generate a website from the files

  1. Go to Settings, then navigate to the Pages tab on the left panel.

  2. Below “Source”, select the main branch from the dropbdown menu. Click Save.

Your web map should go live in a few minutes. Once it’s done, the Pages page should look like this:

Last updated