Mapping with Drupal

The Map Interface

Many different interface graphics are used when displaying a map: for instance, the zoom controls or the layer pickers. In the OpenLayers module, we can replace the default graphics with our own. This fairly simple change immediately makes your map more tightly integrated with your site.

OpenLayers Module

In OpenLayers, maps have two settings related to changing the interface graphics, the “Image Path” and the “CSS Location.” The Image Path is the directory where OpenLayers will look for specifically named images to use in the interface. The CSS Location is the path to the CSS file that will be included with the map. Although you could include the CSS for styling your map in one of your Theme’s CSS files, this is not a good idea, because lots of CSS is required for your map; you would end up loading lots of unnecessary CSS on pages that do not have maps.

Note

Both the Image Path and CSS Location are Class level settings, and will affect all subsequent maps on the page. This means that you will not be able to have two maps on the same page with different interface styles.

If you are using the default hosted version of the OpenLayers library, it will look in the following places for images and .css stylesheets:

• The default hosted directory of images: http://openlayers.org/api/img/

• The CSS located at: http://openlayers.org/api/theme/default/style.css

  The styles in this stylesheet often refer to images that are in a subdirectory at http://openlayers.org/api/theme/default/img/ ...