Step 1: Download the map data

So, before we can draw any map we need a list of all countries and the coordinates of their boundaries. Luckily the internet is full of what we need, mostly packed in a binary data format called “shapefile” or “ESRI shapefile”. We start by downloading a shapefile from finder.geocommons.com which is a large portal for free map datasets.

I decided to use the dataset World Countries Boundary File, World, 2002 because it includes not only information about the country boundaries but also some useful meta information like ISO codes etc. Here is a direct link to the zip-file containing the shapefiles.

The zip-package contains three files, one shp-file containing all shape coordinates, one dbf-file containing all shape meta data and one shx-file containing the shape index file. You find more information on the structure shapefiles in the wikipedia.

Step 2: Import of the map data

Since flash has no built-in support for reading in shapefiles we need to do this by ourself using some external libraries. We can do this bei either on client-side in actionscript or on server-side in some server language like php or python. Zachary Forest Johnson from indiemaps.com compared both techniques and suggested the server-side method and that’s also what we’ll use in this tutorial.

The next step is to create a small php script that reads in the shapefiles and outputs the shape coordinates so we can import them in actionscript. Therefore you need to download the PHP Class Shapefile Reader by Juan Carlos Gonzalez from phpclasses.org (you also need to create a free account first). I will go into the import script.

The first part initializes our

// including the shapefile reader class
require 'ShapeFile.inc.php';
 
// importing the downloaded shapefile
$shp = new ShapeFile("5961.shp", array('noparts' => false));

Step 3: Output to a new csv file

Now we are ready to go through the shapefile and save the needed data into a csv file. I chose the following column setup for the csv file: iso 3 country code, iso 2 country code, country name and number of shapes, followed by one column for each shape coordinates. The coordinates are seperated by semicolons.

USA	US	United States	49	-135.69,57.36;-135.89,57.43;-136.01,57.51;

The php script continues with the opening of a new file for writing and a while-loop to iterate over all shapefile records. Inside the loop we extract the records meta data and store them into an array.

// opening a new file for writing
$out = fopen ("mapdata.csv", "w");
 
while ($record = $shp->getNext()) {
	// process meta data
	$dbf_data = $record->getDbfData();
	$data = array();
	$data[] = trim($dbf_data["ISO_3_CODE"]);
	$data[] = trim($dbf_data["ISO_2_CODE"]);
	$data[] = trim($dbf_data["NAME"]);

Now we also read in the records shape data and store the number of shapes and each shape coordinates into the same array. The last thing to do is writing the data array into the output file and closing the file after finishing the iteration.

	// process shape data
	$shp_data = $record->getShpData();
 
	// store number of parts
	$data[] = $shp_data['numparts'];
 
	foreach ($shp_data['parts'] as $part) {
		$coords = array();
		foreach ($part['points'] as $pt) $coords[] = $pt['x'] . ',' . $pt['y'];
		$data[] = implode(';', $coords);
	}
	// write data as tab-seperated values into file
	fputs($out, implode("\t", $data) . "\n");
}
fclose($out);

Step 4: further improvements

Since we want to send this file through the web later on it is a good time to think about the file size. By now the resulting csv file is about 3.6 megabytes large, which seems too much for me. In most cases we don’t need the country coordinates in such high resolution so one thing we can easily do is to round up the coordinates a little bit. Afterwards we can also look for duplicate coordinates and filter them out.

Download tutorial files

The next tutorial will continue by showing how to read in the csv map file in flash/actionscript and how to draw a static world map.

Update: I decided to insert another tutorial about how to read shapefiles but this time in actionscript, just to show both ways.