Mapping With Drupal - Alan Palazzolo [43]
// This makes it easy to reference the local behavior options.
var options = data.map.behaviors['mappingdrupal_ol_extensions_geolocate'];
// 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();
}
}
},
// General function to geolocate user.
'geolocate': function(map, zoom) {
// First ensure that that the HTML5 geolocation controls
// are available. We might use some more helpful
// libraries for this, like Modernizr
//
// We have to make sure we are explicit of the projection
// as latitude and longitude are different from
// spherical mercator (or other possiblilities).
if (typeof navigator != 'undefined' &&
typeof navigator.geolocation != 'undefined') {
navigator.geolocation.getCurrentPosition(function (position) {
var center = new OpenLayers.LonLat(
position.coords.longitude,
position.coords.latitude
).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter(center, zoom);
});
}
}
};
})(jQuery);
The final touch
As you may have noticed, we included a CSS file in our Behavior plug-in. This is required to make our OpenLayers Control Button show up on the map. In the behaviors subdirectory, create a file named mappingdrupal_ol_extensions_geolocate.css:
/**
* @file
* CSS for the Geolocation behavior
*/
.mappingdrupal-ol-geolocate-panel {
bottom: 5px;
left: 5px;
z-index: 999999;
}
.mappingdrupal-ol-geolocate-buttonItemActive {
background-color: #EEEEEE;
border: 1px solid #666666;
color: #222222;
border-radius: 3px;
height: 2em;
width: 6em;
text-align: center;
}
.mappingdrupal-ol-geolocate-buttonItemActive:after {
content: "Geolocate";
}
NOTE
For the purpose of this tutorial, we used CSS to get the text “Geolocate” in our button. A better solution would be to use a background image in CSS.
The final button ends up on our map in the bottom left corner, as shown in Figure 5-7.
Figure 5-7. OpenLayers geolocation button
Putting all these steps together: you have created a custom module that extends the OpenLayers module to add geolocation and put your user in the middle of your map.
Conclusion
When working out how to add new ways of interacting with your maps, think about maps as configuration objects that can be processed by the appropriate module and library. The tutorials in this chapter have shown how these configuration objects are created, and have illustrated the different ways the architecture is handled by the GMap module and the OpenLayers module.
Chapter 6. Making Beautiful Maps
Over the last few years, thanks in a large part to Google Maps, people have become accustomed to using maps on the Internet. But because of the ubiquity of Google Maps, maps often have the feel of stock photography; they are very familiar and can be perceived as stale and impersonal. Recent developments in online mapping make it possible to use alternative map tiles and graphics, and even to create your own tiles.
This chapter covers various ways to make the look and feel of your map your own. We will show you how to customize markers, the map interface, map tiles, and map pop ups.
Markers
Even if you love the standard Google Map, you probably do not want to use the typical red pin to show the location of everything