Mapping With Drupal - Alan Palazzolo [42]
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter(center, zoom);
});
}
}
};
})(jQuery);
The first step is to define a new Drupal Behavior, mappingdrupal_ol_extensions_geolocate, and create an attach method for this Behavior. The attach method is empty at this point; we will add code here later. The second step is to create a JavaScript method for geolocating, geolocate, that accepts an OpenLayers map object and a zoom level.
Next we will add our OpenLayers Behavior wrapper within the attach method that we just created:
var data = $(context).data('openlayers');
if (data && data.map.behaviors['mappingdrupal_ol_extensions_geolocate']) {
// Data about the map configuration and the map itself are stored
// with jQuery's .data() functionality on the element that
// contains the map.
//
// You can access the following from the data variable:
// - data.map: The map configuration object.
// - data.openlayers: The OpenLayers map object.
// This makes it easy to reference the local behavior options.
var options = data.map.behaviors['mappingdrupal_ol_extensions_geolocate'];
// ...
}
The OpenLayers module uses the data() method of jQuery to store the map configuration settings. The settings are attached to the DOM element that contains our map. Our first step shown above is to get any data that is attached to the map object and check if OpenLayers data is stored there. We then check if our geolocation behavior is enabled. Finally, we add a an options variable that gets the configuration for our geolocation Behavior.
Next we will add the code that actually calls our geolocate method when necessary:
// First, check if the option to geolocate on load is
// enabled.
if (options.on_load) {
Drupal.behaviors.mappingdrupal_ol_extensions_geolocate.geolocate(
data.openlayers, options.zoom);
}
// Then check if a button was enabled. We are utilizing
// OpenLayers Button and Panels Controls for this,
// but this could be any sort of button.
if (options.button) {
var button = new OpenLayers.Control.Button({
displayClass: 'mappingdrupal-ol-geolocate-button',
title: Drupal.t('Geolocate'),
trigger: function() {
Drupal.behaviors.mappingdrupal_ol_extensions_geolocate.geolocate(
data.openlayers, options.zoom);
}
});
var panel = new OpenLayers.Control.Panel({
displayClass: 'mappingdrupal-ol-geolocate-panel',
defaultControl: button
});
panel.addControls([button]);
data.openlayers.addControl(panel);
panel.activate();
}
We are doing two things here. First, we are checking the configuration of this map to see if the it should geolocate the user when they view it. If this setting is enabled, then the code calls our geolocate method.
Second, we are checking the configuration of this map to see if the geolocation button has been enabled. If so, we are adding this as an OpenLayers Control Button. The OpenLayers Control Button is a type of OpenLayers Control; you can see it defined in the OpenLayers documentation. As explained in that documentation, when the button is clicked, it calls the trigger function. In the code above, this trigger function is where we call our geolocate method.
Calling the geolocate method will update the center of the map based on the user’s location and will zoom to the level that was chosen when configuring the map.
Here is the full JavaScript file for the example that we have just worked through:
/**
* @file
* JS Implementation of OpenLayers behavior for Geolocation.
*/
// Namespace $ to jQuery
(function($) {
/**
* Geolocation Behavior
*/
Drupal.behaviors.mappingdrupal_ol_extensions_geolocate = {
'attach': function(context, settings) {
var data = $(context).data('openlayers');
if (data && data.map.behaviors['mappingdrupal_ol_extensions_geolocate']) {
// Data about the map configuration and the map itself are stored
// with jQuery's .data() functionality on the element that
// contains the map.
//
// You can access the following from the data variable:
// - data.map: The map configuration object.
// - data.openlayers: