No one would argue that maps are useful. However, creating even a simple interactive map ready to be published on the Web can be a real hassle. Fortunately, there is worldKit, a Flash-based light-weight geographical information system (GIS) distributed under GPL. 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 that allow you to create interactive maps without getting too deep into all the intricacies of GIS.

worldKit consists of three main components: the worldkit.swf engine that does all the hard work, the config.xml file which contains the settings, and the 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 website 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. However, you should keep in mind that 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 exact value 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.

Figure 1: MapProxy is a useful tool for finding maps

The next step is to configure the worldKit settin

gs by editing the config.xml file. Start by opening the file and pasting the bounding box data somewhere between the 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 quite a few tags that allow you to configure virtually every aspect of the map, and 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> tag defines the map type, while the <dayimg> tag points to the map image (it must be in JPEG format). The <dataurl> tag points to the file containing the RSS mapping data. The <update> tag specifies the intervals between fetching the data from the RSS feed (if set to 0, the RSS is retrieved only once). The <zoomselect> tag 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 the 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. This is done by editing the rss.xml file. Each entry in the file is specified inside the tags, and as a minimum it 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.</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 are displayed correctly on the map.

There is one last thing left to do. Since worldKit is a Flash-based application, the map is embedded into 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 website, simply copy the entire worldKit folder onto it.

Figure 2: The finished worldKit map

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 website, 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 will point to the center of the map. Knowing this, you can add mapping data to the map. worldKit also supports the 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. 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 tag cloud, and all submissions and updates data are handled in the background using Ajax. There is a sample GeoWiki for you to try at http://worldkit.org/geowiki/. Another example of what worldKit can do is its integration with Flickr. Simply 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 quite simply the most fun and easy-to-use mapping software you can find.

Related articles: