• Choose a category
• All
• Classic-Fiction

By Root 323 0

at admin/structure/openlayers/styles/drupal_user_groups/edit and change the fillColor field to the Token that you just copied, ${field_style_color}. Edit the Drupal User Groups that have been added to your website to choose colors for them all. Your map should now have colored markers, as shown in Figure 6-9.

This has been a brief example, but enough to show how data associated with content on your website can be used to change styles used on your map.

Figure 6-9. OpenLayers Attribute Replacement example final map

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/

NOTE

You can download the OpenLayers library directly from openlayers.org and see all the images that are included.

These images and CSS create the default interface for OpenLayers, shown in Figure 6-10.

Figure 6-10. Default OpenLayers image set

The best way to go about making your own image set is to start with the defaults from the OpenLayers library. Once you have downloaded and unpacked the library, you should copy the contents of the /theme/default directory into your Drupal installation (for instance, to sites/all/libraries/mappingdrupal_ol_theme). Next, to simplify things, copy all the images from /img into the directory sites/all/libraries/mappingdrupal_ol_theme/img/. Now replace images and edit the stylesheet. When you are done, in the OpenLayers map settings, enter the path to your images and CSS.

The map in Figure 6-11 shows the map interface that is soon to be the default for the OpenLayers module. It is a custom set compiled by community members.

Figure 6-11. Custom OpenLayers image set

Theming Pop Ups

Google Maps popularized the idea of a “pop up” on a map (Google calls this an InfoWindow). A pop up is a speech bubble that appears when a user clicks on a marker; it displays a snippet of information relevant to that place, as shown in Figure 6-12.

Figure 6-12. Google Map traditional pop up

GMap Theming

In the GMap module, because of the way it uses Version Two of the Google Maps API, you cannot change what the pop up looks like. However, you do have control over the display of the content that goes into the pop up. GMap uses Views Display for rendering its output, so you can theme it just like any other View. Under the Advanced section in Views, you can see the Theme Information (shown in Figure 6-13). Create one of the .tpl.php files for the Row style output or Field content, such as views-view-fields--drupal-companies--page.tpl.php. Theming views is beyond the scope of this tutorial, but if you have the Advanced