Mapping With Drupal - Alan Palazzolo [28]
From the OpenLayers module’s “Styles configuration” page, add a new Style at admin/structure/openlayers/styles/add.
Enter a name for this Style. The name will be used internally by Drupal to store this Style, so should be lowercase with underscores instead of spaces (e.g., blue_dots).
Enter a title for this Style (e.g., Blue dots).
There are lots of choices for Styles, each explained on the page. Most can be left unchanged for this example. The first one to change is “pointRadius.” Our Drupal user groups show as points on the map, so we need to set the size in pixels for the point. Set it to 5.
“fillColor” is the hexadecimal value of the color that will fill the circle where there is a Drupal user group. Enter #53b0eb, which is the shade of blue used commonly in Drupal’s branding.
“strokeColor” is the color of the line surrounding the circle. Enter #0678be, a darker blue.
“strokeWidth” is the thickness of the line surrounding the circle. Leave this at 1.
“fillOpacity” determines if the circle that represents the user group location is transparent or opaque. The default value of 1 means that it is opaque. Change this to 0.8 to make it slightly transparent.
“strokeOpacity” determines the opacity or transparency of the line surrounding the circle. Leave this at 1.
Save this new Style. It will show in the list of OpenLayers styles at admin/structure/openlayers/styles.
To use this Style on the map of Drupal user groups, we need to update the Map Configuration from OpenLayers Maps.
From the OpenLayers module’s maps page at admin/structure/openlayers/maps, click the edit link for the “Drupal user groups” map.
Click on the “Layers & Styles” tab.
In the “Overlay Layers” table, find the “Drupal groups data layer.” Change the Style drop-down to the “Blue dots” style that you just created.
Click the “Save” button.
View your map again. You should see a blue dot instead of the orange dot. If you click on the marker, it will switch back to orange. This is because there are three states for a marker:
Default style
What you see when the map loads
Select style
What you see when you click on a marker
Temporary style
What you see when adding a new marker to a map
To change the Select style for this map, edit the “Drupal user groups” Map Configuration again at admin/structure/openlayers/maps/user_groups/edit and go back to the “Layers & Styles” tab. At the very bottom of the page is the “Select style” drop-down. Change this to “Blue dots.” You could also create a new Style and use it here instead.
You have now used the Geofield, OpenLayers, and Views modules to create a map that displays Drupal user groups around the world. The Style of the points of the map has been customized to be more appropriate than the default colors. The configuration of fields has been tidied up so that the pop ups do not fall off the edge of the map.
Exploring OpenLayers Behaviors
We have already explored some behaviors: in OpenLayers Maps four Behaviors were chosen while setting up the Map Configuration. Behaviors in OpenLayers are map interactions such as pop ups, zoom controls, editing, and viewing fullscreen. They can be added via the user interface in Drupal and can be extended by other modules.
NOTE
Behaviors are a concept for how to use JavaScript in Drupal that has been best practice since Drupal 6. More details can be found on the JavaScript handbook page.
The OpenLayers Behaviors are all described on the Map Configuration page. Edit the User groups map that was created earlier at admin/structure/openlayers/maps/user_groups/edit and click on the “Behaviors” tab. There are lots of really useful Behaviors that come with the OpenLayers module, too many to describe here. Explore all the different Behaviors on your map and see how they work. Some of the most useful ones include:
Tooltip
This can be used to display the title of a node when someone moves their mouse over a marker on