How to Build a Custom Map (Part I)

Want to create a map for your website that's unique and uses your own styles and images? Ok, more than just an image of a map, but an INTERACTIVE map?

Here's what you'll need to get started:

- QGIS

- image(s) representing geographical location(s)

What is QGIS?

QGIS (aka Quantum GIS) is a free and open source geographic information system designed to manipulate and manage all types of geographical data. This powerful tool has many applications, but for this pro tip, we'll be using it to accurately position an image of Mykonos on top of a map, in a process called georeferencing.

To begin assigning real-world GPS coordinates to pixels on an image, fire up QGIS and access the Georeferencer plugin. (If you do not currently have the Georeferencer plugin, it can be enabled via the Plugin Manager.)

Once the Georeferencer plugin opens, click on the "Open raster" button and select the image file.

The next screen will ask you to choose the layer's coordinate reference system (CRS). Since we'll be using actual GPS coordinates to position this image, choose the WGS 84 CRS. (For more information on WGS 84, check out the WGS Wikipedia entry.)

The image should now be loaded in the top section of the screen. Let's assign some coordinates.

Go to your browser, and using the "My Places" feature of Google Maps, add placemarks north, south, east and west of Mykonos, Greece, respectively. Right click on each placemark, and choose "What's here?" to get the coordinates of each point.

Back in QGIS, click on the "Add point" button to add each the 4 coordinates from Google Maps around the island. Your placement won't be exact initially, but try to adjust the coordinates so that there are no residual pixels. Take into account image dimensions and eventually the placements will be ideal.

When you are done, click on the "Transformation settings" button.

In the Transformation settings dialog, choose the following parameters. (The Target SRS will be WGS 84, although the output is EPSG:4326 in the text field.)

After dismissing the dialog, click on the green play button in the toolbar to start the georeferencing process.

When completed, the georeferenced geotiff image will be loaded in the QGIS canvas.

Now let's verify our work by comparing the geotiff to data from Natural Earth. Download the "Countries" package from here, and load the ne_10m_admin_0_countries shapefile via the "Add Vector layer" button.

Adjust the transparency of the shapefile and zoom in/out as needed to check your work. The two files should match up nicely, and may only need minor adjustments.

In Part II of How to Build a Custom Map, I'll go into detail on using your generated geotiffs from QGIS in TileMill for further customization. Stay tuned!