Mapping With Drupal - Alan Palazzolo [38]
// to update the map with user's location.
$('.mappingdrupal-gmap-geolocate-action')
.show()
.html(Drupal.t('Find me on the map.'))
.click(function(e) {
Drupal.behaviors.mappingdrupal_gmap_extensions.geolocate(gmap.map);
e.preventDefault();
});
});
});
});
},
// General function to geolocate user.
'geolocate': function(map) {
// First ensure that that the HTML5 geolocation controls
// are available. We might use some more helpful
// libraries for this, like Modernizr
if (typeof navigator != 'undefined' &&
typeof navigator.geolocation != 'undefined') {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
map.setCenter(new google.maps.LatLng(lat, lng));
map.setZoom(11);
});
}
}
};
})(jQuery);
To interact with the map, we use the Drupal.gmap.addHandler JavaScript method, which allows us to interact with two things: the map object itself and the configuration that is specific to the GMap module:
Drupal.gmap.addHandler('gmap', function(elem) {
var gmap = this;
// gmap (this) is the main gmap module with the following
// main properties:
// - map: The Google Maps API object.
// - vars: The configuration passed from Drupal.
//
// elem is the DOM object that holds the Google Map.
// The ready event is fired when things are ready with
// the map.
// ....
)};
In this section of the JavaScript, since we have access to the map object, we can bind event handlers to the map object. Specifically, we will bind an event handler to the ready state, which is the event that happens when the map is first loaded by the user. Within this event handler, we do two things. The first is to geolocate the user as soon as the map is ready using our geolocation method we created above. The second is to display the link we created in our block which, when clicked, will do the same geolocation of the user:
// The ready event is fired when things are ready with
// the map.
gmap.bind('ready', function() {
// Normally should check the map object to see if the
// geolocation behavior has been enabled for this website,
// but it does not seem to be available.
Drupal.behaviors.mappingdrupal_gmap_extensions.geolocate(gmap.map);
// Again, we would normally check the map object to see
// if this behavior has been enabled, but for some reason
// this setting it is not available.
//
// We utilize jQuery to turn out block into a link
// to update the map with user's location.
$('.mappingdrupal-gmap-geolocate-action')
.show()
.html(Drupal.t('Find me on the map.'))
.click(function(e) {
Drupal.behaviors.mappingdrupal_gmap_extensions.geolocate(gmap.map);
e.preventDefault();
});
});
And that is it! We now have a way of geolocating the user and centering the map to that location. In the next section, we will do the same task, but with the OpenLayers module.
OpenLayers
The OpenLayers module has been in development for a few years and has a more contemporary architecture and API than the GMap module. There is plenty of documentation around the OpenLayers module in the module’s code and on Drupal.org, but the easiest way to learn the API is to find something in the code that is similar to what you want to do and learn from that by adapting it.
Architecture
The OpenLayers module architecture is more complicated than the GMap module, but the basic structure is still the same as described at the beginning of this chapter: we create a configuration object in PHP; we send the object to the client (web browser) to be processed with JavaScript; and finally the object is rendered by the OpenLayers library. The main difference is that the OpenLayers module separates out aspects of the map creation into Layers, Styles, Behaviors, and Maps, as outlined in Mapping with the OpenLayers Module.
The architecture of the OpenLayers module is based on a widely used Drupal module called CTools. The CTools module provides APIs and tools to do a broad range of things in Drupal more easily,