, , , , , , , ,

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

See you at our 1st Victoria GoGeomatics Netoworking Social

FIRST VICTORIA GOGEOMATICS MEETUP NOVEMBER 9 @ 6:30 PM – 9:00 PM Join us for our 1st Victoria GoGeomatics Meetup where we…

2022 Back to School Socials in Pictures – Thank you Sponsors & Participants!

The 7th annual GoGeomatics 2022 Back to School Socials have been a tremendous success. Our groups and group leaders across…

Using Geospatial Technology to Pinpoint Canada’s Hottest Neighbourhoods

Heat waves are seemingly becoming more intense and more dangerous for vulnerable populations. GIS has helped to pinpoint the hottest…