Delimiting tiles in a raster layer

To show how easy it is to change the appearance of an element using CSS, in this recipe we are going to add a border to all the tiles from any raster layer to show where the limits of each tile are:

How to do it...

1. Create an HTML file with OpenLayers dependencies and add within the head section a style element with the following CSS code:

   <style>
       .olTileImage {
           border: 1px solid #999;
       }
   </style>

2. Next, in the body element of the document, add the div element to hold the map:

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

3. Now, add the following JavaScript code to initialize the map and add a base layer:

       var map = new OpenLayers.Map("ch06_tile_borders");    
       var osm = new OpenLayers.Layer.OSM();        
       map.addLayer(osm);
       map.setCenter(new OpenLayers.LonLat(0, 0), 2);

How it works...

The code to create the map instance and layer is pretty simple, we have simply created an instance of both...