Georeferencing with MapBox and QGIS
This tutorial is part of a series of articles
📝 Mapbox in Flutter — integrate MapBox map in Flutter and perform basic operations with it
📝 This article: Georeferencing with MapBox and QGIS — teaches how to take an old map image and convert it to a format used in real maps
📝 Historical map overlay with MapBox in Flutter — how to import a historical map to MapBox and then to Flutter
What you will learn from this article?
- Configure QGIS software
- Import Mapbox in QGIS
- Import and georeference a historical map
- Convert the ready map to a format that can be used in the MapBox Studio
Introduction
For this tutorial, I chose the old map of Budapest, but since this file was too large, I resized it, so you can download it from here.
Generally, we will follow Georeference imagery tutorial by MapBox. Here you will find step-by-step instructions on how to get the QGIS program and what settings are necessary for georeferencing.
Once you install QGIS, follow the steps below.
Step 1. Configure QGIS
This step is a matter of convenience. In order to convert the map image to a usable map, we will match its coordinate with corresponding points on the real map.
There are two ways to get the coordinates from your map image:
- In some cases, it can be found on the map itself on the borders, like in this tutorial by QGIS
- Some maps (eg. historical maps, aerial imagery) don’t contain coordinates, so you will have to rely on specific landmarks as your guide to guess them.
Since the old map I selected has no coordinates, by configuring a map view in QGIS, we can use an option to get the points automatically, which I will demonstrate in the next step. Such an example can be also found in Georeferencing Aerial Imagery tutorial.
To configure the map, follow these steps or see the screenshots below. I selected MapBox service, but it can also be OpenStreets map or any other provider.
In the MapBox studio click “Share” and copy the following URL:
💡 NOTE: If you don’t know how to reach the window above, refer to the MapBox in Flutter article
Add a new layer in the QGIS:
Click “New” to create the layer:
Choose your connection in the dropdown and press “Connect”, then click on the loaded layer and press “Add”:
Result
It’s important to set the Coordinate Reference System (CRS), so click on the bottom of the window as on the screenshot above. Now, select Google Maps Global Mercator and hit “OK”.
Step 2. Import and Georeference a historical map
Time to import our Budapest map and set the coordinates.
In the top menu select “Raster” -> “Georeferencer”
A new window will open, from there click “File” -> “Open Raster” and select your map image.
Once the map is opened, let’s georeference. A half minute video below shows a general process on how it’s done.
I have two windows opened, from the old map I’m selecting a point that should match the point on the real map.
💡 NOTE: To keep Georeferencer window opened uncheck the checkbox “Automatically hide georeferencer window”
You will use these three tools for working with a coordinate point: set, delete or relocate:
As you noticed from the video by clicking on “From Map Canvas” and selecting the corresponding point on the MapBox map, I get the coordinates automatically.
Overall, few points are enough, but if you want to get a more accurate result, then you can select more.
Step 2.1. Transform settings
Before saving the result, we should make sure that all the settings are configured correctly.
💡 NOTE 1: The image will have a black background, after saving, so the best way to avoid it is to check the “Use 0 for transperency when needed”
💡 NOTE 2: I set “Thasformation type” to Thin Plane Spline, but in the Georeferencing Topo Sheets and Scanned Maps tutorial it’s set to Polynomial 2. In this case, you would need minumum of 6 points.
After that click on the green “Play” button and voila:
Step 2.2. Opacity:
In order to set the map’s opacity in the top menu select “Layer” -> “Layer Properties” -> “Transparency” and drag the slider to the desired value
Final result
Step 3. Converting to .tif format
Step 3.2. Exporting file
Right-click on the file -> “Export” -> “Save as”. Then select “Rendered image”, define file location, name, set CRS to Google Maps, and hit “OK”.
💡 NOTE: It’s important to choose “Rendered image”, otherwise the transparency & opacity settings will be ignored
Step 3.1. Compressing file
This step is skippable if your file size isn’t too big. Since later, we will import it in the MapBox maximum accepted size of a .tif file is 300 MB. Our current file size is 38 MB, but I still would like to show how to perform the conversion.
Click ”Raster” -> “Convertion” -> “Translate (Convert Format)”
Choose your map, set “Profile” to High or JPEG Compression (the highest one), then define the location to save the converted file and press “Run”.
The output file size became 4.73 MB.
Of course, with compression the quality decreases, so apply it only if necessary.
TADA, We’re done 🎉
The QGIS project and the ready .tif file you can download from my Github repo.
In the next tutorial, I will show how to import this map in the MapBox Studio and then display it in a Flutter app.
Thank you for reading!
I’m curious to hear your feedback 🙂
