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:
- Create an HTML file with OpenLayers dependencies and add within the
headsection astyleelement with the following CSS code:<style> .olTileImage { border: 1px solid #999; } </style> - Next, in the
bodyelement of the document, add thedivelement to hold the map:<div id="ch06_tile_borders" style="width: 100%; height: 90%;"></div>
- 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);
The code to create the map instance and layer is pretty simple, we have simply created an instance of both and added the layer to the map. Finally, we have centered the map's viewport.
Even though it seems incredible, all the magic of this recipe is in the CSS code at the top:
.olTileImage {
border: 1px solid #999;
}Every raster layer class uses images to render the tiles of data. To do so, the layer creates some HTML elements and adds them to the DOM structure as follows:
<div id="OpenLayers.Layer.OSM_315" ... class="olLayerDiv">
<div ...>
<img id="OpenLayersDiv335" style="position: relative; width: 256px; height: 256px; " class="olTileImage" ...>
</div>
<div ...>
<img id="OpenLayersDiv337" style="position: relative; width: 256px; height: 256px; " class="olTileImage" ...>
</div>
</div>Every OpenLayers component is transformed in one or more HTML elements that use the CSS classes to define the way they are visualized.
As you can see, a div element is created for the whole layer identified by OpenLayers.Layer.OSM_315, which has the class parameter set to olLayerDiv CSS. Within it we can find img elements that point to the tiles to be rendered. These elements have applied the olTileImage class.
Thanks to the CSS classes in this recipe, we have set a border on each tile by simply specifying the appropriate property.