Geo

Current screenshot. Map of Germany. The data was generated by point-and-clicking on an existing map; that software is part of geo as well. The SVG of the map was generated in 0.8 sec.

Geo is the working title of a map generation software by Magnus Manske. It can generate SVGs (Scalable Vector Graphics) from map data. The latter is conveniently stored in wiki pages.

Ease of use is, besides pretty maps, the main focus of this software under development. It will not offer many functions found in, e.g., GIS software, but it will also be less scary and complicated in its format.

For those of you interested in the source: PHP (GPL), in CVS HEAD, module "extensions", directory "geo".

Demo site online : here (requires SVG-enabeled browser to actually view the maps)

Data format

Each entity on the map has its own wiki page. For an example, see here for the map code used for Bavaria in the example above. The shape of Bavaria in the example map was calculated from the information in that page alone. As you can see, wiki markup was used to structure the page, so the result will be human-understandable as well.

Meta data

The first section of a geo page describes the entity, with its type, names in different languages, etc. (The page titles and section names are in English, as we need some common point to work from. They may not include ";", ",", or spaces. Also, I'd prefer "shorthand" style for complicated names, like "bw" instead of "Baden-Württemberg"). It is also stated that the (political) entity "Bavaria" should be drawn as a polygon, consisting of several "poly-lines". One of these lines (the first one) is called "germany.bavaria#hesse", which denotes that it is the border between Bavaria and Hesse, and its data is stored on the "germany.bavaria" page, section "hesse". The data set could just as well be stored on the "germany.hesse" page, section "bavaria". (This is only a convention to make it human-understandable. For the parser, the data could just as well be stored at "12345#6789";-)

Data

A data point consists of "latitude,longitude", and each of these is in the form "(-)DDMMSS", meaning degrees, minutes, and seconds, respectively. The data points are stored in groups. Each group represents a line, for example, a border between two entities, or a river. Each data group has a name (noted as a section heading), and can be referenced by the name of the entity and the group name, as in "entity#group".

Invoke

A map can be generated by passing parameters to a PHP class (which will be realized as yet another tag, like <geomap>). The parameters for the above image are as follows:

languages:de,en
show:germany
fit:germany
style:germany[state],germany[isle]=fill:#CCCCCC; stroke:black; stroke-width:10
style:germany.hamburg=fill:red

This will

• Display German names if available, fall back to English if not
• Show Germany and its "substructures". To draw Germany and its neighbouring countries, one would use "show:europe" (once there's actual data on Europe;-)
• Fit the image so it shows all of Germany (currently non-functional).
• Draw the German states and isles in a specific style (the default style is a very light grey with no borders)
• Even though Hamburg is a state, it will be shown in red, because the style was specifically defined for that object

On a "real" wikipedia, the default language(s) are known and will not need to be stated, unless there's pressing need to display English names on the German wikipedia or the like, which I doubt. Also, "fit", it not explicitly stated, would become the same as "show". That means the above map, depicting the position of Hamburg within Germany, could be achieved with three parameter lines.

Entering data

Entering lots of data manually is not the most fun thing, to say the least. Until there is a really good conversion tool for free data, there is geomaker, which is part of the geo "package". All the Germany data of the above picture was generated using geomaker.

First, you will need to enter the URL of an existing map of the country/region you want to work on. The next page will display this image. Now, you choose a single border line (e.g., between France and Spain). You click on one end of the line in the image. The page will reload, and the edit box on the bottom of the page will contain the coordinates of the point you just clicked on. You now keep clicking on points along the chosen line until you reach its end. You now have a list of coordinated of that line, relative to the image you work on.

Now comes the tricky part: You need to know the "real" coordinates of two points in that image. Cities should be ideal. The farther they are apart on the map, the better. For each of these two, you enter a coordinate pair in "image coordinates" (you can see them changing in the status bar when you move the mouse across the image) and in "real-world coordinates" (like the data in Geo/Bavaria). Press convert, and you will see that the coordinates in the text box have changed. You can copy them as data into the appropriate wiki text now. Don't forget the leading ";data:"!

Note : I know that these coordinates are imprecise at best. But I believe that for our purposes, they will do as an initial data set. They can always be refined later; after all, it's a wiki!

Conversion

Few browsers can natively view SVG. Therefore, conversion of SVG to PNG has to take place.

• The SVG of the above image can be converted into a 400x400 pixel PNG of rather high quality by batik within about 3 seconds.
• Konqueror seems to be a lot faster in its native display. The above image is in fact a Konquerer screenshot.
• ImageMagick seems to choke on the task, going into an endless loop, though.