Mapping songs about Madrid

This tutorial shows how to create a web app that explores songs related to the city of Madrid in Spain. For each song, an entry is added to a map, which contains information abut the lyrics and the author. A popup is shown when hovering over each song point, with an embeded video for the song. This app is inspired by a similar work published in this article in the Huffington Post.

Data

Download the data for this tutorial.

This archive contains a point shapefile with song information, along with an icon that we will use to render song locations on the map.

Preparing the application in QGIS

First, we have to set up our data layers in QGIS.

  1. Add the vector layer to a QGIS project.

    ../../../../_images/defaultlayer.png

    Layer with default style

  2. Improve the default styling by replacing the default symbol with the SVG marker included in the data. (note.svg). This can be done in the Layer Properties interface (found by right-clicking the layer name and going to Properties.)

    ../../../../_images/style.png

    Adding styling

    ../../../../_images/styledlayer.png

    Layer with SVG marker

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 Mapping Madrid songs in the title box.

    2. Select the fullscreen theme.

      ../../../../_images/descriptiontab2.png

      Description tab

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

    1. Make sure that the Songs layer is checked.

    2. Click the Edit link to edit the content of the popup for the layer.

    3. Enter the following in the text box to define the content of the popup:

      [Video]

<p><i>[Lyrics]</i></p>
<p>[Song], <b>[Author]</b>

      This popup will display the embeded video as well as lyrics, song, and author information.

      ../../../../_images/popup.png

      Feature popup

    4. Click OK.

      ../../../../_images/qgislayerstab2.png

  3. In the Other Layers tab, select the Stamen toner lite layer.

    ../../../../_images/otherlayerstab2.png

    Other Layers tab

  4. In the Controls tab, disable (unselect) all controls.

    ../../../../_images/controlstab2.png

    Controls tab

  5. In the Settings tab, check the Show popups on hover parameter, so popups are shown when passing the mouse over the points without having to click on them.

    ../../../../_images/settingstab.png

    Settings tab

Note

There is no need to edit any of the parameters in the Deploy tab.

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.

    ../../../../_images/deployed3.png

    App successfully deployed

  5. Click Yes to see the deployed app.

Final result

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

../../../../_images/app1.png

Deployed app

To see the application in action, hover over any of the points on the map.

../../../../_images/apphover.png

Hovering over a point