Working with popups

A common charecteristic of web mapping applications is the ability to show information related to the features the map contains. By feature we mean any real phenomenon or aspect we can visually represent with points, lines, polygons, and so on.

Of course we can select a feature, retrieve its associated information and show it anywhere in our application layout, but the most common way to show it is by using popups.

How to do it...

1. Create an HTML file with OpenLayers dependencies. Then add the div element to hold the map:

   <div id="ch3_popups" style="width: 100%; height: 100%;"></div>

2. Within the JavaScript section, initialize the map and add a base layer:

       var map = new OpenLayers.Map("ch3_popups");    
       var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
       map.addLayer(layer);
       map.addControl(new OpenLayers.Control.LayerSwitcher());
       map.setCenter(new OpenLayers.LonLat(0,0), 2);

3. Create a vector layer and add some features to it:

       var pointLayer...