Web Mapping with QGIS2Web

Warning

This tutorial is now obsolete. A new and updated version is available at Web Mapping with QGIS2Web (QGIS3)

Web mapping is a great medium to publish your GIS data to ther web and make it accessible by other users. Creating a web map is a very different process than creating one in a GIS. GIS users are typically aren’t web programmers and it presents a challenge when one needs to create a web map that is of the same quality as a map creating in a GIS. Fortunately, there are tools available to easily translate your work in QGIS to web maps. In this tutorial, you will learn how to use the QGIS2Web plugin to create a web map using OpenLayers or Leaflet lubraries from your QGIS project.

Overview of the task

We will create a openlayers web map of world’s airports.

Other skills you will learn

  • How to use Edit Widgets in QGIS to hide certain fields and set custom types.

  • How to create a virtual field using Field Calculator.

  • Creating labels for features that appear only at certain scale.

Get the data

We will use the Airports dataset from Natural Earth.

Download the Airports shapefile.

For convenience, you may directly download a copy of the datasets from the links below:

ne_10m_airports.zip

Data Source [NATURALEARTH]

Procedure

  1. Open QGIS and go to Layer ‣ Add Vector Layer. Browse to the location of the downloaded file and select ne_10m_airports.zip. Click OK.

../_images/1288.png

  1. We will now create a map in QGIS that looks and behaves just like we would like in the web map. The plugin qgis2web will use replicate the QGIS settings and automatically create the web map without us knowing about web mapping libraries. When a user clicks on a airport marker, we want an info-window to disply useful information about the airport. This information is already present in the attribute table of the ne_10m_airports layers. Right-click on the ne_10m_airports layer and select Properties.

../_images/2190.png

  1. Switch to the Fields tab. You will notice the different attributes present in the layer. Some of these aren’t relevant to the users of our web map, so we can choose to hide these. We will keep type, name, iata_code and wikipedia fields and hide the others. Click on Text Edit button under the Edit widget column for `scalerank field.

../_images/3131.png

  1. In the Edit Widget Properties dialog, choose Hidden as the type. Click OK.

../_images/484.png

  1. Similarly set other fields to Hidden type. As you may have notices, there are other field types available that allow us to set how the fields appear to the users of our map. Click Edit Widget for wikipedia field.

../_images/578.png

  1. Select Web View as the field type. This type indicates that the value contained in this field is a URL.

../_images/675.png

  1. We can also use the Alias column to indicate an alternate name for the fields without actually changing the underlying data table. This is useful to give more user-friendly field names to the users of our map. Add aliases as per your choices and click Ok.

../_images/774.png

  1. Back in the main QGIS window, choose the Identify tool and click on any point. The Identify Results panel will display the nicely formallted attributes with the newly added aliases. You will notice that the hidden fields do not appear in the results.

../_images/872.png

  1. While this method is useful, there is one limitation. We are not able to change the order of the fields. One way to overcome this limitation is to create a Virtual Field. In our case, if we wanted the type field to appear at the end of the info window, we can simply add a new virtual field the end and hide the original type field. While we are at it - we can also use an expression to better format the type values. Right-click the ne_10m_airports layer and choose Properties. Go to the Fields tab and click Field Calculator.

../_images/971.png

  1. As the field names need to be unique, use Type as the new field name. Set the field type to Text (String) with a length of 25 characters. The field type contains values such as small, mid, large etc. We can add an expression to change the case of the words to sentence case and append the word airport for better readability. Enter the following expression in the Expression box and click OK.

concat( title("type"), ' Airport')
../_images/1079.png

  1. Now that we have a much better looking Type field, you can go ahead and set the Edit Widget for type field to Hidden.

../_images/11116.png

  1. Use the Identify tool to verify that the attributes appear as expected.

../_images/1289.png

  1. Now let’s style our layer to be more visually appealing and informative. Right-click the ne_10m_airports layer and select Properties. Switch to the Style tab. Choose Categorized style and our virtual field Type as the Column. Click Classify.

../_images/1376.png

  1. You will see a different colored circle gets assigned to a differnt type of airport. For the purpose of this tutorial, we will restrict the map to civilian airports. Hold the Ctrl key and select all categories for military airports. Once selected, click Delete.

../_images/1472.png

  1. Apart from assigning a different color to the category, we can change the size of the symbol to visually help our users distinguish different type of airports. Right-click on a category and select Change size.

../_images/1564.png

  1. Set the Size value to 3 for the Large Airport category.

../_images/1661.png

  1. Similarly, set the Size to 2 for Mid Airport and 1 for Small Airport.

../_images/1758.png

  1. For a complete map, we also need to label each airport. Switch to the Labels tab in the Properties dialog. Select Show labels for this layer and choose iata_code as the value for Label with. We will also set Rendering option so that the labels only appear when the user is sufficiently zoomed in. Check Scale-based visibility under Label options. Enter 1 as the Minimum scale and 10000000 as the maximum scale. This setting will render the labels only after the user has zoomed in more than 1:10000000 scale and will be visible till 1:1 scale.

../_images/1854.png

  1. As we are using circles to depict the airports, we need to ensure that the labels don’t overlap with the circles. Go to the Placement tab in the Labels dialog and set the Placement to Cartographic. Select From symbol bounds as Distance offset from. Click OK.

../_images/1945.png

  1. Our map is now ready. This is a good time to save our work. Go to Project ‣ Save. Enter Airports as the name of the project.

../_images/2040.png

  1. Now we are ready to export our project to a web map. Install the qgis2web plugin by going to Plugins ‣ Manage and Install Plugin (See Using Plugins for more details on installing plugins in QGIS). Once the plugin is installed, go to Web ‣ qgis2web ‣ Create a web map.

../_images/2191.png

  1. In the Export to web map dialog, check Add layers list in the bottom panel under the Appearance section. Also select ne_10m_airports: iata_code as the field for Label search. Check the Show popups on hover to allow display of info-windows on hover. We can also set a basemap so the users have more context when looking at the airports layer. Select OSM B&W to use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from either OpenLayers or Leaflet as the web mapping library. We will restrict this tutorial to use the OpenLayers library. Click Update Preview` to see how your exported map will look like. Before we do the actual export, we need to set the Export folder. You can select a folder of your choice and click Export.

../_images/2238.png

  1. Once the export is complete, the default browser for your computer will open and show the interactive web map.

../_images/2334.png

  1. Your web map is now ready for publishing.

../_images/2433.png

  1. The qgis2web plugin has many limitations and it cannot do everything that the powerful web mapping libraries OpenLayers and Leaflet can do. This process can act as the starting point in your web mapping process and save you valuable time by creating a basic template from which you can further customize the web map. To highlight the fact that the output created from this process can be readily changed to suit your requirement - we will make a simple change to the web map to zoom to a particular airport when the user initially loads the map. On your computer, go to the folder where the web map was exported. Locate the resources folder and open qgis2web.js file in a text editor.

../_images/2530.png

  1. Locate the line where the map.getView().fit() function is called and add the following code after that. This new line of code instructs the web browser to center the map on the coordinates of Paris. Save the changes to the qgis2web.js file.

map.getView().setCenter(ol.proj.fromLonLat([2.35, 48.85]))
../_images/2627.png

  1. Refresh your browser and see that the web map will load with Paris at the center. This is a trivial example, but you can see how you can use any function available in the OpenLayers or Leaflet libraries to customize the web map.

../_images/2727.png

  1. The exported map resides on your computer. While you can see it in action, it is not very useful since you cannot share it anyone. For others to be able to see the map, you need to upload it to a web server. While the upload process will vary on the type of server you have access to - a cheap and easy way to publish your map on the web would be to use any of the public cloud storage services. Amazon S3 is a popular storage service. You will need to sign up for an account and follow the instructions to create a bucket. Once a bucket is created, you can upload the contents of your exported folder to the bucket and set it to public. Here I created a bucket named qgis-tutorials and uploaded the contents of my exported folder to a sub-folder named qgis2web. You can access the resulting map at http://s3.amazonaws.com/qgis-tutorials/qgis2web/index.html

../_images/2826.png

  1. Similarly, Google also offers a cloud storage service called Google Cloud Storage. Once you have created an account and enable billing, you can create a bucket and upload objects to the bucket. I create a bucket and sub-folder similar to Amazon and set the folder to public. The resulting map can be viewed at https://storage.googleapis.com/qgis-tutorials/qgis2web/index.html

../_images/2923.png

If you want to give feedback or share your experience with this tutorial, please comment below. (requires GitHub account)