Mapping With Drupal - Alan Palazzolo [34]
This will involve writing code. We do not expect you to be a Drupal rockstar, but we do make some basic assumptions: you know how to create a simple Drupal module, and you know what a Drupal hook is. The most advanced expectation is that you know the basics of how JavaScript is used in Drupal.
NOTE
If you have never written a Drupal module, don’t worry, there is help to get you started. Read the Drupal.org documentation on how to write a module. If you are unfamiliar with the Drupal API, there is a complete reference at api.drupal.org. There is no definitive guide to JavaScript in Drupal, but a good place to start is the JavaScript section of Working with the Drupal API.
In this chapter, we will go through an example of extending both the GMap module and OpenLayers module with HTML5 Geolocation functionality: the website user’s position is imported from their smartphone or computer and the map is centered on them. Creating the same feature in both GMap and OpenLayers gives an insight into the differences in their architecture. If you are not familiar with HTML5 Geolocation, check out the W3C specification or take a look at the geolocation demo from HTML5 Demos.
GMap
In previous chapters, the GMap module was used to improve the user interface for adding addresses to content (Extending the Location module with the GMap module) and also to integrate with Views to create maps of content (Mapping with the GMap Module). We will now dig into the module’s architecture and use PHP and JavaScript to add the HTML5 Geolocation Behavior.
Architecture
The GMap module follows the standard method of mapping in Drupal: create a configuration object in the Drupal interface, then send the configuration object over to the web browser for the Google Maps JavaScript library to handle.
GMap stores its configurations as either a PHP array or a macro (see Extending the Location module with the GMap module for an explanation of macros).
NOTE
The GMap module builds maps based on the default map defined at admin/config/services/gmap. This means that new map configurations that you create are overriding or adding to this default.
This GMap macro shows a satellite hybrid map centered on San Francisco:
[gmap zoom=9 |center=37.77071473849608,-122.24761962890625 |width=100%
|height=300px |control=Small |type=Hybrid]
The macro above is equivalent to the following PHP array:
$map = array(
'zoom' => '9',
'width' => '100%',
'height' => '300px',
'maptype' => 'Hybrid',
'controltype' => 'Small',
'longitude' => '-122.24761962890625',
'latitude' => '37.77071473849608',
'id' => 'auto1map',
);
Each of these will generate a map that looks like look the one shown in Figure 5-1.
Figure 5-1. GMap macro example
Geolocation Example
For our example, we will build a Drupal module that provides a geolocation Behavior for GMap by writing code that will hook into the GMap architecture. This module will work in two ways. First, there will be a link next to the map, which someone using the site can click to center the map on their location. Second, the administrator of the site will be able to change a setting so that whenever someone visits the website, the map automatically centers on their location. However, this will require each user to allow their phone or computer to access their location. The code for all of this will be done in a custom module called mappingdrupal_gmap_extensions. The steps for creating this module are:
Create a Drupal block to hold the link that can be used to update the map.
Hook into the GMap execution to add some options for the map.
Hook into the GMap execution to add some JavaScript.
Bind the geolocation interaction to the map with JavaScript.
This will create the interface shown in Figure 5-2.
Figure 5-2. GMap geolocation example
Creating the geolocation block
The block that we