Thematic Mapping Techniques

In this workshop we are going to explore various thematic mapping techniques. We will be using QGIS and Mapbox Studio to do this. By the end of it we will have created 5 different maps, all using the same data source.

The data that we’re using is about the greenspaces in Greater London. We have processed OS Open Greenspace and created a centre point for each greenspace. We are also using some data from Boundary-Line and OS VectorMap District.

Let’s get started…

QGIS

All the data for this workshop can be downloaded here. Make sure it is downloaded onto your machine:

Open QGIS
First, we’re going to add in some contextual layers.

Add these 3 shapefiles (the files ending in .shp) from the ‘Data’ folder:

‘Thames.shp’
‘London-Boroughs.shp’
‘London-outline.shp’

You can do this by dragging & dropping them into your QGIS window or by going to Layer in the top ribbon of QGIS > Add Layer > Add Vector Layer and browsing to the files on your machine.

Re-order them in the ‘Layers Panel’ like this:

Now we’re going to remove the fill from the Borough polygons.

Open the ‘Layer Properties’ panel by double-clicking on the layer ‘London-Boroughs’.

Go to the Symbology tab on the left, yhen click ‘Simple fill’ and change the ‘Fill style’ to ‘No Brush’, like this:

Click ‘OK

Now style the Thames polygon with a light blue fill and remove the outline:

Next, style the ‘London-outline’ to make it black with a width of 0.8mm.

You should have your contextual map ready now and it should look something like this:

OK, now we’re going to add in our data about the greenspaces in London.

From the ‘Data’ folder, add ‘greenspace-within-london.shp’ to your map and make sure it’s at the top of the ‘Layers Panel’.

The points will be given a default style and will look something like this:

It isn’t very easy to make sense of this data so we’re going to style it to help improve the depiction.

Double-click on the layer to open up the ‘Layer Properties’ panel.

Then click on the ‘Color’ to open the ‘Select color’ panel.

Within this panel, change the colour value (the ‘HTML notation’) to #7dc579 and reduce the ‘Opacity’ to 50%:

Click ‘OK’ and then adjust the settings in the ‘Layer Properties’ panel to look like this:

The ‘Multiply’ blend mode means that overlapping features will appear darker on the map, giving us a better idea of density. (You can read more about blend modes here.)

With a couple of simple colour techniques we have created a nice dot density map which shows ALL the data and gives us a good picture of the density and distribution of greenspaces across Greater London.

Your map should look something like this:

Next, we’re going to explore some options for aggregating the data, and we’ll start with a proportional symbol map.

Before we do this, turn off the ‘greenspace-within-london’ layer by unchecking the box next to it in the ‘Layers Panel’.

For this map we need to do some geospatial processing. We’re going to count (or bin) the greenspace points into the London Borough boundaries.

From the top menu click ‘Processing’ then ‘Toolbox’:

This should open up the ‘Processing Toolbox’ along the right-hand side of your QGIS window.

In the ‘Processing Toolbox’ search for count points.

Under ‘Vector analysis’ you should see a tool called ‘Count points in polygon’ - double-click it to open the settings panel.

Change the settings so they look like this (you can choose to save to file if you want) and then click ‘Run’:

The processing should only take a few seconds, and then a new layer called ‘Count’ will appear in your ‘Layers Panel’:

If for some reason this doesn’t work, you can use ‘Boroughs-with-counts.shp’ from the ‘Backup Data’ folder.

OK, now we need to style this layer to create our proportional symbols (circles in this instance).

Double-click the layer to open up the ‘Layer Properties’ panel and under the ‘Style’ tab, select ‘Graduated’.

Next, choose ‘NUMPOINTS’ as the column and click on the colour swatch next to ‘Symbol’

In the ‘Symbol selector’ panel change the ‘Symbol layer type’ from ‘Simple fill’ to ‘Centroid fill’:

Now click on ‘Simple marker’ to expand the style options.

Next, click on the ‘Data defined override’ button next to ‘Size’ (see image below) and click ‘Edit…’:

We’re now going to write a short expression to size the circles based on their value - we need to divide the values in order for the sizes to be correct for our scale of map.

In the ‘Expression string builder’ add in the following expression:

"NUMPOINTS" / 17 ← you can copy & paste this if you want to

The number 17 here is arbitrary really and may need to be changed dependent on the scale of your map and size of your monitor.

Click ‘OK’ to return to the ‘Layer Properties’ panel.

Now, adjust the colour ramp to a ramp of your choosing (a single colour, light to dark colour ramp works nicely).

Then click ‘Classify’

By default, this adds in 5 classes using the ‘Equal Interval’ algorithm (you can read more about the different options here).

Your proportional symbol map should look like this:

Next we’re going to look at creating a choropleth map and for this we are going to use the same data but change the styling.

First we need to run an extra bit of analysis on the data. You will often hear cartographers discussing the problems of mapping totals using choropleth maps (read more here).

Without normalising our data to a consistent denominator the map is not very useful and we can't make any sensible interpretations of the information.

We are going to normalise our greenspace data against the size of each Borough. We will be mapping the amount of greenspaces per km2 in each Borough rather than the total number of greenspaces per Borough. This takes into account the fact that they’re all different shapes and sizes and makes comparison fairer across the whole map.

OK, so we need to add a new attribute to our data.

In the ‘Layers Panel’ right-click on the ‘Count’ layer and then click ‘Open Attribute Table’:

Click on the little yellow pencil button to start editing then click on the abacus button to ‘open field calculator’:

Now we’re going to create a new field.

Type in perkm2 as the ‘Output field name’ and then add the in this expression:

"NUMPOINTS" / ( $area / 1000000 ) 🡨 you can copy & paste this if you want to

We’re working in British National Grid (ESPG:27700) so our map units are meters. This calculation converts our values to kilometre squared.

Click ‘OK’

Click on the little yellow pencil button again to stop editing and then click ‘Save’.

We now have a new attribute field called perkm2 which contains a number for every Borough which represents the number of greenspaces per km2.

Close the attribute table and now we’re going to style our choropleth...

In the ‘Layers Panel’, double-click on the ‘Count’ layer to open up the ‘Layers Properties’ panel.

Click on the little symbol next next to ‘Symbol in order to open up the ‘Symbol selector’:

In this panel, change the ‘Symbol layer type’ from ‘Centroid fill’ to ‘Simple fill’:

Click ‘OK’

In the ‘Layer Properties’ panel. Change the ‘Column’ to perkm2 and click ‘Classify’

Feel free to experiment with the different classification algorithms:

Click ‘OK’ and you have a choropleth map which should look something like this:

Great! We’ve now made 3 different maps, and visualised the same data source in 3 different ways!

So far we’ve been using the London Borough boundaries and these geometries are irregular sizes and shapes.

Next we’re going to look at using a regular grid. We’re going to use hexagons to create a hexbin map. Read this for more information about the benefits of using Hexagons over other tessellating shapes such as squares.

We are going to use a QGIS Plugin called ‘MMQGIS’ to generate our hexagon grid. If it doesn’t appear in your top menu then you will need to install it by clicking ‘Plugins’ then ‘Manage and Install Plugins…’

Search for ‘MMQGIS’ and click ‘Install plugin’

Once the plugin has been installed, in the top menu click ‘MMQGIS’ then ‘Create Grid Layer’ to open up the ‘Grid’ panel:

In the ‘Grid’ panel, choose Hexagons as the ‘Shape Type’ and change the ‘Y Spacing’ to 2000 (this will give us hexagons that are 2km in height). Choose a location to save your new shapefile (…) and click ‘Apply’:

You should now have a new layer in your ‘Layers Panel’ and a hexagon grid covering the extent of your map window.

If for some reason this doesn’t work, you can use ‘hexagon-grid.shp’ from the ‘Backup Data’ folder.

Now that we have a grid, we need to count (or bin) our greenspace points into each grid cell. To do this, we’re going to go back into the ‘Processing Toolbox’ and use the ‘count points in polygon’ tool again:

In the settings panel, select your hexagon grid layer as the ‘Polygons’, ‘greenspace-within-london’ as the ‘Points’ and make sure the ‘Count field name’ is NUMPOINTS.

Click ‘Run’. This will add a new layer into your ‘Layers Panel’

If for some reason this doesn’t work, you can use the ‘hex-with-counts.shp’ from the ‘BackupData’ folder.

Before styling our grid, we’re going to add a filter on it so we only see the cells that contain data. Double-click the newly created layer to open up the ‘Layer Properties’ panel then switch to the ‘Source’ tab and click ‘Query Builder’:

Add the expression:

"NUMPOINTS" != 0 🡨 You can copy and paste this if you want

Click ‘OK’

Now we’re going to style our hexagon grid. Switch back to the ‘Style’ tab.

Change the style settings so they look like this:

To change the colours of each category, right click on the colour swatch and go to ‘Change Colour’. Use the colour hex codes in the ‘HTML notation’ box as follows:

#FCE1A4, #FABF7B, #F08F6E, #E05C5C, #D12959, #AB1866, #6E005F

These colours are from our GeoDataViz Toolkit.

Please feel free to choose a different colour palette.

When you’re happy, click ‘OK’.

Your map should look something like this:

So far, we have explored 4 different mapping techniques within a GIS. If we were creating a finished map, then we would probably add some other features. These may include a title, description, legend, labels/annotations and possibly even a scale bar or locator map.

Have a go at creating a full layout! Go to ‘Project’ and ‘New Print Layout’. Give your layout a name and click ‘OK’.

Add a map, legend and text to your layout

You may need to edit each item using the ‘Item Properties’ panel on the right of your screen. This may mean changing the ‘scale’ of your map Item so it fits on the page (Try 250000). You can also use the ‘Interactively Edit Map Extent tool’ so you can move your map around and zoom in/out.

For your legend, you’ll likely want to turn off ‘Auto Update’ and use the Minus button to remove unwanted legend items.

Your layout might end up looking something like this:

Now we’re going to look at Mapbox Studio and create a web map that will be mobile friendly by default. We’re going to take our hexbin map a step further and explore the z-axis - adding a 3rd dimension to our data.

Mapbox Studio

In a web browser, preferably Google Chrome, go to studio.mapbox.com.

If you have an account, login. If you don’t have an account, you can create one for free – it doesn't take long.

Once you’re in Studio, click on ‘Tilesets’ in the righthand menu, under ‘Resources’.

Click on ‘New Tileset’

Click ‘Select a file’, then browse to the ‘Data’ folder and select ‘hex-with-counts.geojson’:

Click ‘Confirm’.

It may take a few minutes to upload the new data (but it will be worth it, honest).

When our new tileset has successfully uploaded it will appear at the top of our Tileset list.

Now we’re going to create a new map. Click on the ‘Styles’ tab on the right-hand menu and then click ‘New style’
Select ‘Monochrome’ and then ‘Dark’. The click ‘Customize Monochrome’

This will load up the map interface. Pan around and zoom in to London.

Now we’re going to load our hexagon grid into this map.

Click on the ‘+’ (Add New Layer) button in the top-left.

Click on ‘Custom Layer’. A new panel then should open up just to the right.

Under ‘Source’, click on ‘None Selected’ and then select your ‘hex-with-counts’ data you just added.

You should now have something that looks like this:

In the editing panel, change the ‘Type’ to ‘Fill extrusion’

Our new layer should now appear in the layer panel on the left. Click on the 6 little dots next to the layer.

The map view will now change to be tilted. The data is given a default black fill - so now we’re going to style it.

Click on ‘Colour’ and then ‘Style across data range’ and then ‘Num #’

Check there is a number 1 in the ‘Num’ box, change the ‘HEX’ to #ffffff and then click ‘Done’

Next, select ‘edit’ on the ‘num 90’ box. Repeat stage 4, checking there is a number 90 in the ‘Num’ box and this time change the ‘HEX’ to #009991 and click ‘Done’. Your setting and map should look like this:

15. Next click on ‘Height’ then select ‘Style across data range’ and then ‘num #’.

Like you did before, ensure there is a number 1 in the ‘num’ field and change the ‘Fill height’ to 100. The click Done.

Click ‘Edit’ for ‘num 90’ and change the ‘Fill height’ to 10000. Click ‘Done’

Your settings and map should now look like this:

Click on ‘Opacity’ and change the ‘Fill Opacity’ to 0.65. This allows you to see some of the underlying data. Feel free to have a play with the opacity.

You can use your right mouse button to adjust the pitch and bearing of your map. It should look something like this:

Feel free to play around with the other layers in the map (roads, water, labels etc.) - style it to suite your own needs or preferences.

It is also good practice to move your new thematic layer below the map labels. You can do this by dragging and dropping it in the left-hand panel.

When you’re happy with your map, you’re ready to publish it!

Click on the ‘Publish…’ button in the top righthand corner of your screen.

On the next screen, click ‘Publish’ again. You should get a pop up saying your Style has been successful published. Click ‘OK’.

Your map is now hosted on your Mapbox account and you have a number of options for how you can use it; from simply sharing it, viewing it in a GIS or developing it further using one of Mapbox’s libraries.

For our final step we’re going to check that our map looks good on a mobile device. Mapbox have an app that makes this easy for us. If you have an Android or iOS device then install the Mapbox Studio Preview app from the relevant store.

Using this app you can sign-in with your account details and view your styles on your device.