Over the course of a few paragraphs, this article will describe the process of constructing a map of the APNIC region for dynamic web display, going into some technical details of maps, projections, and tools. For those who want to see the end result, it’s included here at the top of the post. For those who would also like the technical details, scroll past the map and read on!
The technical details which follow are in two halves. The first half describes the process of taking Natural Earth public domain map data and producing a Web friendly data set from it, while the second half describes the Web development necessary to transform that data set into an interactive map.
The Natural Earth maps come in three scales: 1:10,000,000; 1:50,000,000; and 1:110,000,000. With 56 economies in the APNIC region ranging in size from the roughly 22,000 kilometres of border around the People’s Republic of China down to 24 kilometres of coastline for Tuvalu, the best result is obtained by mixing data from all three scales. The map above comprises data from the 10m scale map for four economies, the 50m map for twenty-two economies, and the 110m map for the remaining thirty economies. Extracting and combining data from different Shapefile data sets is accomplished using the ogr2ogr tool from the Geospatial Data Abstraction Library tool set.
As a Shapefile, this data is around 600kb in size, and converted to GeoJSON, 270kb. As this is a large volume of data for a Web transfer, the next stage in data transformation is to use the TopoJSON tools to produce a smaller data file, and at the same time incorporate APNIC subregion information. After this transformation is applied, the resulting data file is 38kb uncompressed, which is smaller than a reasonably good quality image file of the region.
Now that a data file is available, it needs to be displayed on the screen. Choosing a suitable projection is in some ways a subjective choice, but the map above uses an Equirectangular projection for its similarity to the well known Mercator projection, its minimal distortion for a set of economies crossing the equator, and its good match between on-screen distance and geographic distance. As the APNIC region focuses on Asia, so too does the projection’s parameters – rotated by -145 degrees of longitude, and with the equator corresponding to the middle of the display. Each sub-region has its own parameters to best centre the economies on the display, with South Asia and South-eastern Asia also including a slight rotation to accommodate their shapes at a high level of zoom.
The next challenge is to ensure even the smaller economies are easily visible on the display. French Polynesia is a collection of islands covering a large total area, but when rendered as an outline of the coastal regions, they are only one or two pixels in size. The solution used above is to apply a halo around all economies with no regions large enough to be visible, and easily selected with a mouse. A short piece of Javascript applies a size delta to a polygon, which allows long, thin islands such as Samoa to retain some of their distinct shape.
The final challenge is to use a colour scheme that offers visual distinctiveness. The map offers a choice of colouring attribute: the ISO A2 attribute applies a five colour scheme, while all the other attributes separate the economies into nine quantiles and uses a two-colour gradient to highlight the relative differences across the region. The colours chosen are from the excellent Color Brewer 2 scales.
When the map data and the display methodology are combined, and applied to Internet Number Resource data maintained by Geoff Huston, the result is the map above.
The views expressed by the authors of this blog are their own and do not necessarily reflect the views of APNIC. Please note a Code of Conduct applies to this blog.