, , , , , , , ,

Using Swipe Maps to View Wildfire Destruction in BC

On July 7, 2017 a series of devastating wildfires began in the Cariboo region of British Columbia. The effects of these wildfires will take much time and many resources to make recovery. GIS can have an important role in such a project. GIS can:

  • Help managers to make real time decisions in rapidly changing conditions
  • Provide spatial information to the public
  • Feed data to fire-fighters in the field through mobile devices
  • Identify damage and help plan for recovery

One useful tool that GIS provides is a swipe map. This map shows one area in two maps side by side. One side represents the “before” scene of an event such as a fire, the other side represents the “after” scene of such an event.

Making a swipe map with Open Source software involves an impressive stack of technologies. This article shows how to make a swipe map this way.

Swipe images on CBC web site

Swipe images on CBC web site

First, we start with the before and after images of the given scene. CBC published an article which contained side-by-side images of the devastation in the Cariboo. These images were captured by Planet Labs. I have copied the images of Boston Flats.

These are excellent images, but they are not on maps. To put them on a map, we have to perform a number of steps.

To put two images side by side with a slider, we use the jQuery Before/After plugin. This plugin uses the great jQuery and jQueryUI libraries. Like a lot of plugins in the Open Source world, it was created at no charge by someone with developer skills who just wanted to make something useful.

Boston Flats swipe images inside jQuery Before/After plugin

Boston Flats swipe images inside jQuery Before/After plugin

You can see the Boston Flat images used with this plugin  by clicking on the image to the right.



Such is the excellence of the code that the details of jQuery and jQueryUI are all hidden and the web developer merely has to tell the beforeAfter plugin where to make the images:





Now we have the slider, but these images are not on a map. To do that, we open QGIS and invoke the Georeferencer tool. This tool provides an interface where we can match a discrete point on a map with the same point on an image. In this case the matching is easy because we can match to well defined features on the image such as the intersection between Highway 1 and Highway 97C.

Matching a point in an image with a point on the map using QGIS Georeferencer

Matching a point in an image with a point on the map using QGIS Georeferencer

Now we have georeferenced images, but for the next step we must tile them. Tiling means cutting up an image into pieces so that the pieces can be assembled at different resolutions. Tiling speeds up the browser’s rendering of an image.

QTile dialog

QTile dialog

There are numerous tiling programs, but QTile is particularly easy to use because it is a plugin that we can easily invoke by opening QGIS. The plugin gives an impressive list of options:


Code generated by QTile

Code generated by QTIle

The great feature of this plugin is that after it creates the tiles it gives you an HTML page that shows you the JavaScript that you need to load the tiles in the HTML page.

The final component of our web map is Leaflet.Sync. This module allows us to see a synchronized view of two maps. Leaflet.Sync is based on the jQuery Before/After plugin described above, which in turn is based on jQuery.ui and jQuery. The mapping part is based on the Leaflet API. Got it all? Somehow every piece falls into place and the end code is quite simple.

Swipe map on giscourses.net site

Swipe map on giscourses.net site

You can see the Boston Flats Swipe Map by clicking on the image to the right. The map shows the images georeferenced to Boston Flats and is synchronized with the slider.

Viewing damage caused by forest fires is only one application for swipe maps. Changes in agriculture, population, and forestry are all suitable candidates for this type of map. Viewing the same map from two perspectives can help us to understand our world and to plan for the future of our planet.

Related Articles

Canadian Geospatial Digest November 27, 2023

Mapping the Semá:th X̱ó:tsa (Sumas Lake) after 2021 BC Floods. Mapping the health of Canada’s lakes. Canadian Geospatial Startups Revolutionizing…

GeoBC is recruiting at the GeoIgnite Career Fair

Meet GeoBC Recruiters at the GeoIgnite Career Fair

Discover your future with GeoBC at the GeoIgnite Career Fair from November 7-8, 2023! Learn about joining their team and…

Canadian Geospatial Digest Aug 21, 2023

Canadian Geospatial Digest August 21, 2023

BC First Nations adopts indigenous names for Protected Areas Maps Canada’s National Cycling Map City of Ottawa 3D geospatial endeavors…