Mapping French schools¶

Data¶

Download the data for this tutorial.

The layer contained in this archive is a collection of schools, based on the original data from the article linked above. This was converted to a shapefile, with attribute field names translated into English. Some entries were removed to reduce the size of the file.

Also, only schools in metropolitan France are considered to simplify handling projections, as the original data had coordinates using several CRSs in the same file.

Preparing the application in QGIS¶

The first step in building a web app using the Web App Builder is to set up our project in QGIS.

1. Open the QGIS project included in the exercise data.

   

   Schools QGIS project

   The project contains one layer with a rather basic styling. We don’t need to add more complex styling, as our web app is more about the data analysis than the map itself, so we will leave it as is.

2. If you’d like, zoom into any place you would like to use as your initial extent. When the web app is loaded, it will be focused on that area.

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 French School Names in the App Title box.

   2. Leave the Logo image box empty.

   3. Select the basic theme.

      

      Description tab

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

   1. We only have one layer, so make sure that the schools layer is checked.

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

   3. Enter [NAME] in the text box to display the name in the popup when the feature is clicked on the map.

      

      Popup editor

   4. Click OK to close the dialog.

   5. Check the Allow selection on this layer box. This is important, since we want the user to be able to select schools, and then create their own custom charts based on that selection.

   6. Check the Cluster points box. Since the number of features is large in the schools layers, clustering will ensure that the web app has good performance when rendering at a large scale. The default clustering distance is fine, so there is no need to modify it.

   

   Layers tab

3. In the Other Layers tab, select the MapQuest aerial layer as the base layer to use. Leave all others unselected.

   

   Other Layers tab

4. In the Controls tab:

   1. For our web app, we will leave the default three controls activated (Scale Bar, Zoom, Layers) and add the following:
      • Selection
      • Attributes table
      • Charts
      • Query
      • About panel
   

   Controls tab

   1. Right-click Charts and select Configure.

   2. Here’s where we define how to produce the charts when the user makes a selection in the layer. We want to count the number of schools with the same name, so in the Display mode list, select Count by category.

   3. Categories are defined by school names, so the NAME field has to be selected in the Category field list.

   4. Enter Count By Name in the Chart Name box, and click Add/modify to add it to the list of charts that will be available in the web app.

      

      Chart tool

   5. Click OK to finish configuring the Chart tool.

   6. Right-click About panel and select Configure.

   7. Click the Edit link to open the text editor.

   8. The content of the panel is defined using HTML. Enter the following in the text editor:

      <h1>Analysis of school names in France</h1>
      <p>This web app replicates the work described in
      <a href="http://www.lemonde.fr/les-decodeurs/article/2015/04/18/de-jules-ferry-a-pierre-perret-l-etonnant-palmares-des-noms-d-ecoles-de-colleges-et-de-lycees-en-france_4613091_4355770.html">Le Monde</a>.</p>
      <p>It allows for analyzing the naming of schools in France, findinf out the most common ones
      and studying their distribution across the country.</p>
      <p>Select points by dragging while pressing the Shift key to define a rectangle.</p>
      <p>You can also use the <i>Query</i> tool to select based on attributes.</p>
      

      

      About panel editor

   9. Click OK to close the text dialog.

   10. Leave all other parameters as-is, and click OK to close the About panel parameters dialog.

       

       About panel parameters

   11. Right-click Layers and select Configure.

   12. Check the showDownload check box. That will give the user the option to download the schools layer as a GeoJSON file.

   13. Check the shownZoomTo check box. This will give the user the option to fit the extent of the view to the layer extent.

   14. Leave all other parameters as-is, and click OK to close the dialog.

       

       Layers list parameters

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.

Customizing the application code¶

The code of the application is now in the selected directory and the web app is fully functional. The generated code can be edited to suit our needs. We will do one small modification.

1. In a text editor, open resources/tools.js from the directory where you stored the web app.

2. Scroll down to around line 650, where you will see:

   for (i = 0; i < sorted.length; i++) {
       columns[0].push(sorted[i][0]);
       columns[1].push(sorted[i][1]);
   }
   

   The code takes all the count values and uses them for the chart bars. That might not be a good idea, since there might be too many of them, and in most cases would just be equal to 1 (since most names might just appear at a single school). It is more interesting to focus on those names that appear in several schools, meaning to focus on the categories that have larger count values.

3. Replace the above code with the following:

   for (i = 0; i < Math.min(sorted.length, 30); i++) {
       columns[0].push(sorted[i][0]);
       columns[1].push(sorted[i][1]);
   }
   

   This will generate more informative charts.

4. Save and close the file.

5. Refresh the app in the browser.

Final result¶

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

Deployed app

Using the application¶

Here are some ways you can test the application’s functionality: