Web Mapping with QGIS2Web¶
This tutorial is now obsolete. A new and updated version is available at cartographie web avec 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:
Data Source [NATURALEARTH]
Open QGIS and go to. Browse to the location of the downloaded file and select
ne_10m_airports.zip. Click OK.
We will now create a map in QGIS that looks and behaves just like we would like in the web map. The plugin
qgis2webwill 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_airportslayers. Right-click on the
ne_10m_airportslayer and select Properties.
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
wikipediafields and hide the others. Click on Text Edit button under the Edit widget column for
In the Edit Widget Properties dialog, choose
Hiddenas the type. Click OK.
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
Web Viewas the field type. This type indicates that the value contained in this field is a URL.
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.
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.
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
typefield to appear at the end of the info window, we can simply add a new virtual field the end and hide the original
typefield. While we are at it - we can also use an expression to better format the type values. Right-click the
ne_10m_airportslayer and choose Properties. Go to the Fields tab and click Field Calculator.
As the field names need to be unique, use
Typeas the new field name. Set the field type to
Text (String)with a length of
25characters. The field
typecontains values such as
largeetc. 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')
Now that we have a much better looking
Typefield, you can go ahead and set the Edit Widget for
Use the Identify tool to verify that the attributes appear as expected.
Now let’s style our layer to be more visually appealing and informative. Right-click the
ne_10m_airportslayer and select Properties. Switch to the Style tab. Choose
Categorizedstyle and our virtual field
Typeas the Column. Click Classify.
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.
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.
Set the Size value to
Similarly, set the Size to
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 layerand choose
iata_codeas 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
1as the Minimum scale and
10000000as the maximum scale. This setting will render the labels only after the user has zoomed in more than
1:10000000scale and will be visible till
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
From symbol boundsas Distance offset from. Click OK.
Our map is now ready. This is a good time to save our work. Go to. Enter
Airportsas the name of the project.
Now we are ready to export our project to a web map. Install the
qgis2webplugin by going to (See Using Plugins for more details on installing plugins in QGIS). Once the plugin is installed, go to .
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_codeas 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&Wto use a black-and-white themed basemap create using OpenStreetMap data. You also have an option to choose from either
Leafletas the web mapping library. We will restrict this tutorial to use the
OpenLayerslibrary. 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.
Once the export is complete, the default browser for your computer will open and show the interactive web map.
Your web map is now ready for publishing.
qgis2webplugin has many limitations and it cannot do everything that the powerful web mapping libraries
Leafletcan 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
resourcesfolder and open
qgis2web.jsfile in a text editor.
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
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
Leafletlibraries to customize the web map.
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-tutorialsand 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
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