How to create a HTML world map with GeoDjango ?

Question

The GeoDjango tutorial explains how to insert world borders into a spatial database.

I would like to create a world Map in HTML with these data, with both map and area tags. Something like that.

I just don't know how to retrieve the coordinates for each country (required for the area's coords attribute).

from world.models import WorldBorders

for country in WorldBorders.objects.all():
    print u'<area shape="poly" title="%s" alt="%s" coords="%s" />' % (v.name, v.name, "???")

Thanks !

Answer 1

In the worldborders example, the attribute mpoly is where the geographic polygon is actually stored.

In your example, you're going to want to access v.mpoly

You're not going to be able to use it directly however because mpoly is itself a MultiPolygon field. Consider a country like Canada that has a bunch of islands, each island and the main landmass is a polygon. So to arrive at your points and a complete description of Canada's borders you need to:

1. Iterate over the polygons inside of multipolygon. Each polygon corresponds to an area (so your assumption in the example of one area per country is wrong).
2. Iterate over the points inside of each polygon.
3. Convert your point coordinates (latitude/longitude) into the coordinates used by your svg graphic.

Answer 2

To use lat/lon in an SVG, you need to project them into pixel (x/y) space. A simple transformation might look like this:

>>> x = (lon + 180) / 360 * image_width
>>> y = (90 - lat) / 180 * image_height

For an image where image_width == 2 * image_height, this will give you something like the map at the link posted (which looks like an equirectangular projection).

To use a different projection (e.g. Mercator), use the GEOSGeometry.transform method in GeoDjango before applying the transform.