Georeferencing for HK Constructions Plan using QGIS

I am interested in HK infrastructures development since I live in HK, I did read plan documents a lot and really enjoy it!

I found that construction documents are somehow “decontextualized” / “separated” from ambient environment / community, it’s understandable that “construction should focus on construction”. But I think we can do more to contextualize constructions to raising public awareness about developments.

Construction plan of Central Kowloon Route in Hong Kong (partly)

In technical aspect, I would like to put the construction plans onto map, so that it is clearer to show how the development interacts with surroundings.

Since my learning and working experience is not related to geospatial, so at the beginning I googled “Draw image on leaflet map” to find any solution. Then stackoverflow tells me I can use Leaflet’s imageOverlay.

imageOverlay is exactly what I need! Providing image url and image bounds, one-line code to draw the image on the map.

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',     imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; 
L.imageOverlay(imageUrl, imageBounds).addTo(map);

However, it would be troublesome if the original image bearing is not aligned to the North. Calculating bounds is time-consuming and error-prone.

And then I continue google “leaflet imageOverlay rotation”, a nice solution founded, leaflet plugin Leaflet.ImageOverlay.Rotated. Providing images corners coordinates to add it to map.

var topleft    = L.latLng(40.52256691873593, -3.7743186950683594),
	topright   = L.latLng(40.5210255066156, -3.7734764814376835),
	bottomleft = L.latLng(40.52180437272552, -3.7768453359603886);

var overlay = L.imageOverlay.rotated("./palacio.jpg", topleft, topright, bottomleft, {
	opacity: 0.4,
	interactive: true,
	attribution: "&copy; <a href='http://www.ign.es'>Instituto Geográfico Nacional de España</a>"
}).addTo(map);

Excellent! More flexible, barrier of bearing-rotated image is removed!

Then I drag-and-drop the images many times to get the proper coordinates for imageOverlay, I found that I was trapped again!

This time is performance issue, (re-)rendering images in leaflet during loading / zoom / pan is very slow, especially my images size is big and I had lots of images to overlay. Then I googled for the solution, it is suggested to save the images as map tiles.

GIS software like QGIS can export xyz map tiles, but I had to georeference the image first.

(So sorry for telling a long story, I will introduce georeferencing now.)

From the Wikipedia, Georeferencing means that the internal coordinate system of a map or aerial photo image can be related to a geographic coordinate system.

In my loose definition, it is matching the geospatial related image with coordinates.

For example, HK Lands Department published e-HongKongGuide, in which they provide georeferenced PDF.

GeoPDF of e-HongKongGuide

The Georeferenced PDF can be view normally as general PDF. When I open it in QGIS, the PDF will align with coordinates.

View the GeoPDF in QGIS with basemap

I guess you have basic understanding what georeferencing now. Let’s start!

LandsD basemap

Construction Plan for Georeferencing

Georeferenced Construction Plan, view with basemap in QGIS

Step 1: Prepare image for georeferencing

The original document image is usually not ready for georeferencing. It may be with border / unnecessary description / background colour… We have to clean the image first. I use GIMP for image editing, it is free and powerful software!

Import PDF into GIMP and start editing

Edited image, ready for georeferencing

I would not demonstrate how to use GIMP here, but I give some hints for preparation:
- When importing images / pdf, try to take good balance of resolution and size. Make sure the image is clear enough but not too big.
- DO NOT crop the image, just remove the irrelevant part is okay
- Why do not crop the image? Because we will use the original image for georeferencing, it is much easier to georeference if the reference features are clear (e.g. existing building that we will delete it). A clean image is almost infeasible for matching the features on map. That means we keep an original copy in one layer and export it first, then georeference the image, then hide the original image layer and export the clear image layer, replace the georeference image with the reference points unchanged.

Step 2: Georeferencing

Open Georeferencer in Raster

Follow the below video, it’s good tutorial of QGIS georeferencing. (I am Lazy to “reinvent the wheel” lol)

How to Georeference a Map (PDF/JPEG) in QGIS

Logic and procedure of georeferencing is very simple, while the points you selected would affect the accuracy a lot. Ambiguous reference point / biased reference points would greatly lower the georeference quality.

Usually I choose the corner position of features (e.g. building) for georeference, because corner is much more definite than line / curve. The construction plan usually draw on government / official map, it is more preferable to use official basemap for point reference, accuracy is much higher. (If you use non-official basemap like OpenStreetMap / Google Map, you will find out it is very very difficult to georeference)

Apart from clicking definite features for georeferencing, sometimes the construction plan will show coordinates as well!

EPSG:2326 — Hong Kong 1980 Grid System on the construction plan

The grid line intersection points are very accurate and precise reference! The above image shows two intersection points: (834600E, 819000N) and (834800E, 819000N). Grid line intersection is the best reference point! It would be great if QGIS Georeferencer provides grid interface, so that no need to click on many points… lol

Last but not least, remember to compress the TIFF! The uncompressed TIFF exported can occupy >1GB per file. I choose LZW compression in QGIS when I do the georeferencing, the file size is more acceptable.

In next article I will introduce how to export map tiles in QGIS.