paivmw
Last Updated: February 25, 2016
·
1.838K
· chamara
Profile 1807317 75sq 1297483530

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.)
Picture

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

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.)
Picture

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

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.
Picture

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.
Picture

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.)
Picture

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.
Picture

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.
Picture

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!

Say Thanks
Respond