Build AJAX-Based Web Maps Using ka-Map

By using AJAX, Google's maps draw and zoom quickly, pan smoothly, and can be extended to display a wide variety of information. This article shows how to make similar AJAX-based web mapping sites using an open source web mapping toolkit called ka-Map. ka-Map uses the MapServer web mapping server behind the scenes with AJAX and PHP to serve up the map content. All this comes together to provide a highly interactive means to viewing maps online.

Google Maps provides some very powerful tools, but once you want to add your own data layers, or further customize your own components, it may be easier to use your own toolkits. Tools exist for creating your own AJAX-based web mapping sites and are fairly easy to use. ka-Map coupled with MapServer is a powerful combination of open source web-mapping technologies. For a good example of a ka-Map application see DM Solutions Group's Maps for MapServer site.

AJAX Mapping Power

The open source MapServer web-mapping platform is the tool of choice for many web developers wanting to publish maps online. MapServer's robust set of features and widespread use provide a solid base for a stable, interactive web-mapping experience. However, MapServer alone doesn't provide the level of interactivity, prerendering, caching of tile images, smooth panning, etc. that many users are turning to AJAX for.

ka-Map is also open source and works directly with MapServer. MapServer prepares the map images, ka-Map serves them to the web browser. ka-Map also caches (saves copies of) maps as they are created by MapServer. When the same area on the map is viewed again, MapServer sits idle while ka-Map grabs the cached map image tiles. This is a departure from the traditional cycle: start map application, click to zoom in, wait for entire map image to be created, wait for the browser to receive the image, click again, repeat. Instead, small pieces of the map are created once when first requested and stored on the server. As they are created, they are sent to the web browser and the web browser pieces them together as they are received.

Preparing MapServer

To use ka-Map, you need to have a working MapServer application configuration file. In traditional (non-AJAX) MapServer applications, you create web pages, prepare data, create a configuration file that points to the data, and set up the look and feel of the map. For a ka-Map application you can ignore the web page set up by using the default one that comes with it. Instead, the focus is on preparing map data and setting up the MapServer application configuration file.

MapScript Programming Library

You must have the MapServer programming library, MapScript, up and running. ka-Map uses the PHP MapScript API to render maps. The easiest way to do this is to use one of the binary MapServer installers that are available.

The Windows installer is called MapServer For Windows (MS4W). You simply unzip some files onto your drive and you are ready to go. You can then install other packages that make certain functionality available, e.g. ka-Map. See here to get started with MS4W: http://maptools.org/ms4w.

The Linux installer is called the FOSS GIS Suite (FGS). FGS includes a standardized set of modules, including all library dependencies preconfigured to run together. FGS has an installer shell script, which takes a module and automatically extracts it to your system. It also checks dependencies and grabs other packages as required. Get started with FGS here: http://maptools.org/fgs.

The MapServer website has more installation instructions if you want to start from source code. I also walk through this process in Web Mapping Illustrated.

Data Preparation

Before you move on to creating a simple MapServer configuration file, you need some map data. Global country border data are available here as part of a FreeGIS.org world data package. It provides a basic set of map data in the ESRI Shapefile format. You will need the files starting with countries_simpl. These are low-resolution files to keep the file size small. If you want a higher resolution dataset, grab the one from here instead.

As an image backdrop, you will use a global cloud image from here. It was created from Xplanet data and a weather map hack from the book Mapping Hacks. Using their hack you can download a new image every six hours and have it automatically update your web mapping applications with current global cloud cover. The image is a TIFF file, with an additional TFW file that provides the information to geolocate the image.

Extract both the country boundaries and image file into a folder called data.

[1] [2] [3] [4] [5] [6] Next