worldKit: GIS the easy way

68

Author: Dmitri Popov

Creating even a simple interactive map for publication on the Web can be a real hassle. worldKit, a Flash-based lightweight geographical information system (GIS) distributed under GPL, allows you to create interactive maps without getting too deep into all the intricacies of GIS. Although it doesn’t provide all the bells and whistles of a professional application like GRASS GIS, it has a few clever tricks up its sleeve.

worldKit consists of three main components: the worldkit.swf engine, which does all the hard work; a config.xml file, which contains the settings; and an rss.xml file that includes the mapping data.

To illustrate how easy worldKit is in use, let’s jump right into it by creating a simple map of Paris with a few points of interest on it. First of all, you need a map of Paris, and worldKit’s Web site provides the handy MapProxy service that allows you to find the map you want. Maps in MapProxy are available as aerial photographs, topographic maps, or street maps, but some regions are covered better than others. For example, street maps are not available for most of Europe. To create a map of Paris, enter ‘Paris’ into the International City field and select France from the country list. Next, enter the desired distance in the Distance field; the value you enter depends on how detailed a map you want to generate, but 5 km works fine for Europe. Select the Photo option and press the Get Map button to generate the map.

Besides the map itself, MapProxy also provides the bounding box data ready to be inserted into the config.xml file. Save the map image and copy the bounding box data.

The next step is to configure the worldKit settings by editing the config.xml file. Start by opening the file and pasting the bounding box data somewhere between the <worldkitconf></worldkitconf> tags. Configuring other settings is as easy as adding tags and specifying their values. For example, if you want to add a toolbar to the map, add the following line to the config.xml file: <worldkitconf></worldkitconf>.

worldKit supports tags that allow you to configure virtually every aspect of a map. worldKit’s documentation provides a fairly detailed description of the supported tags, but the best way to understand the basics of config.xml is, of course, to dissect an example file:

<?xml version="1.0" ?>
<worldkitconf>
<width>400</width>
<height>400</height>
<displaytype>day</displaytype>
<dayimg>Paris.jpg</dayimg>
<dataurl>rss.xml</dataurl>
<zoomselect>true</zoomselect>
<toolbar>true</toolbar>
<update>0</update>
<showload>true</showload>
<loadimgmsg>Loading the city map...</loadimgmsg>
<showonlynew>false</showonlynew>
<north>48.911582724767</north>
<south>48.821750675233</south>
<east>2.4016140665211</east>
<west>2.2650525334789</west>
</worldkitconf>

The <width> and <height> tags specify the dimensions of the map. The <displaytype> defines the map type, while <dayimg> points to the map image (it must be in JPEG format). The <dataurl> tag points to the file containing the RSS mapping data. <update> specifies the intervals between fetching the data from the RSS feed (if set to 0, the RSS is retrieved only once). <zoomselect> allows you to zoom by drawing a rectangular area on the map with the mouse. A large map can take time to load, and you can use the <showload> and <loadimgmsg> tags to enable a “loading” message that gives the user an indication of the progress. Finally, the <showonlynew> tag specifies whether worldKit should fetch all or only the most recent data from the RSS feed.

The next step is to add points of interest to the map by editing the rss.xml file. Each entry in the file is specified inside <item></item> tags, and as a minimum each must include title, description, and geographic coordinates. For example, if you want to mark the Eiffel Tower on the map, then its specification should look something like this:

<item>
<title>The Eiffel Tower</title>
<link>http://www.tour-eiffel.fr/</link>
<description>The Eiffel Tower is an iron tower built on the Champ de Mars beside the River Seine in Paris. It is the tallest structure in Paris and among the most recognized symbols of France. Named after its designer, engineer Gustave Eiffel, it is a premier tourist destination, with more than 5.5 million visitors per year.</description>
<geo:lat>48.857</geo:lat>
<geo:long>2.29</geo:long>
</item>

The tricky part here is to figure out the correct latitude and longitude of the Eiffel Tower. The easiest way to do this is to use a map service like Maporama that provides this information. Search for the Eiffel Tower and look for the coordinates on the resulting page.

When you are done adding the mapping data, save the rss.xml file using the UTF-8 encoding; this ensures that special characters in the mapping data will be displayed correctly on the map.

There is one last thing left to do. Since worldKit is a Flash-based application, the map is embedded in the supplied index.html page. You can either tweak it to your liking, or use it as an example to embed the map into another Web page. The code you need is:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" WIDTH="400" HEIGHT="400" id="worldkit">
<PARAM NAME=movie VALUE="worldkit.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<EMBED src="worldkit.swf" quality=high bgcolor=#000000 WIDTH="400" HEIGHT="400" NAME="worldkit" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

Remember that the WIDTH and HEIGHT values should be the same as in the config.xml file. That’s all there is to it. Open the index.html page in a browser and check the resulting map. If you want to publish the map on your Web site, simply copy the entire worldKit folder onto it.

worldKit has a few other nifty uses. For example, you can draw your own map and add driving directions to it, which is perfect for a “How to find us” page on your Web site, among other things. The clever part is that if you don’t specify any bounding box data, the <geo:lat>0</geo:lat> and <geo:long>0</geo:long> tags point to the centre of the map. Knowing this, you can add mapping data to the map. worldKit also supports the Web Map Server (WMS) protocol, which allows it to use imagery from any publicly available WMS source, including NASA’s impressive satellite photos and maps. Using a few lines of code, you can roll out your very own mapping application similar to NASA World Wind. Simply add the following code to the config.xml file to create a map similar to WMS Global Mosaic.

<wms maxtiledeg="256" width="512" height="512" id="WMSGM"> http://wms.jpl.nasa.gov/wms.cgi?request=GetMap&layers=global_mosaic&srs=EPSG:4326&format=image/jpeg&styles=</wms>
<maxscale>8192</maxscale>

Check World Wind Wiki for more WMS sources, and read worldKit’s documentation to get the most out of its WMS capabilities.

Even that’s not all, though. worldKit is also available as GeoWiki, a standalone application that allows anyone to add tagged notes to the map. The tags in GeoWiki are displayed as a tag cloud, and all submissions and update data are handled in the background using AJAX. Here’s a sample GeoWiki for you to try. Another example of what worldKit can do is its integration with Flickr. Add geotags to your photos, and you can use worldKit to view them on the map.

Admittedly, there are more powerful and feature-rich GIS applications out there, but worldKit is the most fun and easy-to-use mapping software you can find.

Dmitri Popov is a freelance writer whose articles have appeared in Russian, British, and Danish computer magazines.