Mapping Paris bakeries¶

Data¶

Download the data for this tutorial.

This archive contains a single point shapefile, consisting of the locations of bakeries in Paris.

Preparing the application in QGIS¶

First, we have to set up our data layers in QGIS. The tutorial data contains a QGIS project. Open it and you will see that it has a single layer.

If you open the attributes table for this layer, you will see that the layer has several fields with information about each bakery, and a field named Text with a HTML-formatted text which includes that information. We will be using this field for showing the description of each bakery.

Attribute table

Configuring the application¶

Start the Web App Builder by selecting Plugins ‣ Boundless ‣ Web App Builder. This will bring up the interface used to configure our web app. There are several tabs, each one used to define a particular set of parameters. We will go through each of them and describe their meaning.

1. In the Description tab, fill out the form with the following:

   1. Enter Paris bakeries in the title box.
   2. Select the fullscreen theme.
   

   Description tab

2. In the QGIS Layers tab, fill out the form with the following:

   1. Make sure the bakeries layer is checked.
   2. Uncheck the Allow selection on this layer check box, since we do not want to let the user interact with the layer.
   

   QGIS Layers tab

3. In the Other Layers tab, select the OSM Mapnik layer.

   

   Other Layers tab

4. In the Controls tab:

   1. disable all selected controls and select the Bookmarks tool.
   

   Controls tab

   1. Right-click the Bookmarks tool and select Configure. This will be the central part of our web app, since the main storytelling functionality will be based on it.

   2. You will see the following dialog:

      

      Bookmarks dialog

   3. Bookmarks can be taken from a collection of QGIS bookmarks or from a layer. In this case, we will take bookmarks from a layer, generating one bookmark for each bakery location. Click the Add from layer button.

   4. In the Layer field, select bakeries. In the Name field, select Name. In the Description field, selection Text. The content of these two fields will be used to create the content of the panel that will describe each of the bookmarks. The name will be shown as a header title, and the description text will be shown below in a normal paragraph.

      

      Creating bookmarks from layer

   5. Click OK. The bookmarks will be added to the list of defined bookmarks for the web app.

      

      Bookmarks added

   6. If you select any of the bookmarks in the list, you will see its description text in the lower panel.

      

      Viewing the contents of a bookmark

   7. Click the Configuration tab.

   8. Check the Show in story panel box, as we want to display bookmark descriptions in a panel.

   9. In the Intro title box, type Paris Bakeries.

   10. In the Intro description box, type Explore the best bakeries of the capital of France.. These will be used to create the content of the panel when the web app is started, before moving to the first bookmark.

   11. Change the Animation type to Pan to.

       

       Bookmarks configuration

   12. Click OK.

Creating the application¶

1. Save the application configuration by clicking the Save (disk) icon at the bottom of the dialog.

2. With the configuration defined, we can now create it by clicking the Create App button at the bottom of the Web App Builder dialog.

3. Select the directory where you want to store the web app.

4. The app will be created and saved in this directory. When finished, a dialog will display.

   

   App successfully deployed

5. Click Yes to see the deployed app.

Improving the application¶

If not already open, launch the app by opening index.html file inside the directory where you created your web app.

The application is now created but when you move through the story points, you will notice that the zoom level effect is set too high. This is because the layer that used for creating the bookmarks is a point layer, so the extent covered by each bookmark is just the point itself, not a real bounding box. That causes the app to zoom to the maximum zoom level.

As a way to solve this, you can use a different layer for computing the extents of the bookmarks. We will generate one here.

1. Back in QGIS, close the Web App Builder and open the Processing toolbox (Processing ‣ Toolbox).

2. Find the Fixed distance buffer algorithm (Geoalgorithms ‣ Vector ‣ Geometry operations) and double-click it to open its parameters dialog.

   

   Fixed distance buffer process in the Processing toolbox

3. In the Input layer, make sure that bakeries is selected.

4. In the distance field, enter 0.005.

   

   Fixed distance buffer parameters

5. Click Run to compute a buffer around each bakery point. The result will be displayed as a new layer in QGIS.

   

   Buffer result

6. Now reopen the Web App Builder. Since you have already created a web app based on this same QGIS project, you will see the following message dialog:

   

   Recovering the application definition

7. Click Yes to recover the configuration parameters that you used when you first generated the web app.

8. Go to the Controls tab and configure the Bookmarks tool again.

9. Click Remove all to remove all existing bookmarks.

10. Recreate the bookmarks in the same way as before, except this time when creating bookmarks from a layer, use the Buffer layer instead of the bakeries layer. It will have the same attributes table as the original bakeries layer, so you can select the same fields for the Title and Description.

    

    Bookmarks from Buffer layer

11. Click OK twice, then recreate the web app by clicking the Create app button.

Final result¶

Open the app and navigate through the story points. You will see that each point zooms to a more sensible area.