The last three or four weeks we have been preparing the Tracks4Africa site for the next season of ‘Voetspore‘ (translated from Afrikaans: ‘foot steps’) – a South African TV program which follows the adventures of a group of 4×4 drivers as they traverse africa. For this season, one of the vehicles has been fitted with two tracking devices – a satellite transponder and a GSM unit. By wiring up a couple of Django views to deliver GeoJSON, and consuming that from OpenLayers we are able to deliver real time data on the vehicle positions during their excursion. The data is degraded to show one vertex per hour, although the complete dataset is much more detailed.

The trip just started this weekend from  Cape Agulhas, the Southern Tip of Africa (and coincidentally not far from where I live) to Alexandria in Egypt (which is coincidentally extremely far from where I live). You can track their progress by visiting the dedicated Tracks4Africa Voetspore page created for this purpose.

Voetspore map on Tracks4Africa (click for large view)

I wanted to take a moment to mention three handy little tips for OpenLayers. First lets look at a typical map OpenLayers project:

A typical OpenLayers project

Tip #1: If you want OL to pull down 24bit png images instead of the default 8 bit dithered images, you can append  ‘;mode=24bit’ to the format option for a WMS layer e.g.

var imagery = new OpenLayers.Layer.WMS(
 "my_layer",
 "http://localhost/cgi-bin/mapserv?map=/home/web/mapserver-tut/mapfiles/world.map",
 {layers: "Country,Cities", format: "image/png; mode=24bit"});

Of course there is a trade off of image size for image quality, but the 24bit pngs I use in my map look clean, anti-aliased and without artifacts.

Tip #2: Bored of the default OpenLayers widgets theme? Run, don’t walk to the mapbox OpenLayers theme page and get your OpenLayers map controls looking gorgeous!

Tip #3: None of the examples on the OpenLayers website show how to do a simple thing: set the colour and style for all features in an OpenLayers vector layer. They all focus on creating class breaks and doing more advanced things and don’t mention how to get the basics done. Here is how you make all the features in a given layer have the same appearance:

var myLayerStyle = OpenLayers.Util.extend({},
 OpenLayers.Feature.Vector.style['default']);
 myLayerStyle.fillOpacity = 0;
 myLayerStyle.graphicOpacity = 1;
 myLayerStyle.strokeColor="red";
 myLayerStyle.strokeWidth=1;
 stylemap1 = new OpenLayers.StyleMap(myLayerStyle);
 var format = new OpenLayers.Format.GeoJSON();
 var layer = new OpenLayers.Layer.Vector("Areas", {styleMap : stylemap1});
 var feature = format.read({"type":"Polygon",
 "coordinates":[[[21,-31],[23,-29],[24, -31], [22,-32],[21,-31]]]})[0];
 layer.addFeatures(feature);
 map.addLayer(layer);

In the above example I clone the standard style for a new vector layer (you know, that good old orange!) and then override some of its properties to make it a red stroked non-opague stule.  The layer style is then included in a StyleMap with only one element (as opposed to multi-element StyleMaps used for unique value renderers). Finally, when the new layer is created, our StyleMap is added to it.

Lets take a look at how our map looks with the above tips applied (click for larger version)!

All our tips applied to our project

The OpenLayers guys have built an incredible piece of software – everyday I find something new and cool that I never thought it could do before. Hope you enjoyed the tips!

The more I use OpenLayers, the more I enjoy using it. I often refer to the OpenLayers examples page to look at the source of examples as inspiration for my work. Today I happened across another great website providing some more brilliant examples of how to get the most out of OpenLayers, so I thought I would share the resource here in case others also find it useful.

Enjoy!

When the OpenLayers map of your site takes some time to load and you wish to give feedback to the user, the first place to look is the Loading Panel Addin. This addin provides an animated bar, that progresses as soon as a layer is loaded on the map. But you are not bound to its standard appearance – CSS offers you an undefined customisation freedom.

I first chose a simple progress bar, with a little globe image added to it for each loaded layer, and I felt happy enough. But I’m still a CSS beginner and moreover a very cold fan of GUIs, unlike Tim, who got a nice nice animated gif to show the progress of the map population. The AjaxInfo website provided a wide range of indicators – have fun and be sure to add it to your bookmarks!

Here are the relevant code snippets of our implementation:

1- Include the LoadingPanel Addin javascript into the head of your HTML page:

<script type="text/javascript" charset="utf-8" src="LoadingPanel.js"> </script>

2- Add the functionality in mainJavaScriptFile.js:

var loadingPanel = new OpenLayers.Control.LoadingPanel();
map.addControl(loadingPanel);    

//show the control
loadingPanel.maximizeControl();
// load your layers here
// remove it as the above function returns
loadingPanel.minimizeControl();

Note: that way, the LoadingPanel doesn’t know how many layers you are loading. The wiki page and the related example do, with much more code. I liked that 5-line implementation – and the animated gif required only a little…

3- CSS tweak

.olControlLoadingPanel {
    background-image: url("/static/images/ajax-loader.gif");
    background-color: none;
    position: relative;
    width: 50px;
    height: 50px;
    background-position:center;
    background-repeat:no-repeat;
    display: none;
}

That rocks heh? Hope this can be helpful to the OpenLayers users community!
–anne