Table of Contents

  1. HordeMap
    1. Bugs
    2. People
    3. Description
      1. Building OpenLayers for Horde
      2. How to use (Horde 4 example).
    4. Resources


Provides a javascript api for interacting with ajax "slippy" maps.



Michael Rubinsky


Abstraction for in-line map support. Horde ships with a driver for OpenLayers which provides support for Google, Yahoo, Bing, and OpenStreetMaps out of the box. Other mapping providers can be added by either adding support to the existing OpenLayers driver or by writing a new custom map driver.

Building OpenLayers for Horde

Horde come bundled with a custom OpenLayers build. In Horde 4 and Horde 5.0, this is based on OpenLayers 2.11. We perform significant modification to the base OpenLayers code to better fit it into the Horde Framework, and to significantly reduce the size of the resulting file. We build a custom version of the file, and split out other parts of it into our own classes. This takes the size of the file from somewhere around 3MB to slightly less the 1MB uncompressed (around 280k compressed). This section is meant as an overview of how to build this Horde specific file.

// FIXME: Remove this in 3.0. In 3.0, Event.stop will no longer be provided
// by OpenLayers.
if (window.Event) {
    OpenLayers.Util.applyDefaults(window.Event, OpenLayers.Event);
} else {
    var Event = OpenLayers.Event;

How to use (Horde 4 example).

 * Example script for producing a HordeMap
 * @author Michael J Rubinsky

// Init Horde
define('HORDE_BASE', '/private/var/www/html/horde');
require_once HORDE_BASE . '/lib/core.php';
        'authentication' => 'none',
        'session_control' => 'none'));

// Hordemap parameters.
$params = array(
    // Always "Horde" for horde's map driver.
    'driver' => 'Horde',
    // Provider layers that we want displayed
    'providers' => array('Yahoo', 'Google', 'Public', 'Mytopo'),
    // Geocoder to use.
    'geocoder' => 'Google'
// JSON encode for output in the javascript
$providerJson = json_encode($params['providers']);

// Setup translations
$language = str_replace('_', '-', $GLOBALS['language']);
$language = $GLOBALS['language'];
if (!file_exists($GLOBALS['registry']->get('jsfs', 'horde') . '/map/' . $language . '.js')) {
    $language = 'en-US';

// Additional configurations.
$params['conf'] = array(
    // If using a marker image
    //'markerImage' => (string)Horde_Themes::img('map/marker.png'),
    //'markerBackground' => (string)Horde_Themes::img('map/marker-shadow.png'),
    //'useMarkerLayer' => true,
    // Use this language for translations if available.
    'language' => $language,

// API keys for those layers that require them.
foreach ($params['providers'] as $layer) {
    switch ($layer) {
    case 'Google':
        // No longer required for v3.
        //$params['conf']['apikeys']['google'] = $GLOBALS['conf']['api']['googlemaps'];
    case 'Yahoo':
        $params['conf']['apikeys']['yahoo'] = $GLOBALS['conf']['api']['yahoomaps'];
    case 'Cloudmade':
        $params['conf']['apikeys']['cloudmade'] = $GLOBALS['conf']['api']['cloudmade'];
    case 'Mytopo':
        $params['conf']['apikeys']['mytopo'] = $GLOBALS['conf']['api']['mytopo'];

// Geocoding
if (!empty($params['geocoder'])) {
    switch ($params['geocoder']) {
    case 'Google':
        //$params['conf']['apikeys']['google'] = $GLOBALS['conf']['api']['googlemaps'];
    case 'Yahoo':
        $params['conf']['apikeys']['yahoo'] = $GLOBALS['conf']['api']['yahoomaps'];
    case 'Cloudmade':
        $params['conf']['apikeys']['cloudmade'] = $GLOBALS['conf']['api']['cloudmade'];

// Include the Hordemap bootstrap file, and initialize the Hordemap.
$params['jsuri'] = $GLOBALS['registry']->get('jsuri', 'horde') . '/map/';
Horde::addScriptFile('map/map.js', 'horde');
$js = 'HordeMap.initialize(' . Horde_Serialize::serialize($params, HORDE_SERIALIZE::JSON) . ');';

// Start output
require HORDE_BASE . '/templates/';
<script type="text/javascript">
// Basic initialization code to run on dom:loaded to init and display the map
document.observe("dom:loaded", function() {
    // These are the same as configured above
    var providers = <?php echo $providerJson ?>;//['Google', 'Yahoo', 'Public'];
    layers = [];
    providers.each(function(l) {
       var p = new HordeMap[l]();
       $H(p.getLayers()).values().each(function(e) {layers.push(e);});
    map = new HordeMap.Map['Horde']({
    elt: $('mapdiv'),
        // If delayed is set to true, the map will not display until map.display()
        // is called (see below).
        layers: layers,
        markerDragEnd: function(r) {alert('markerdragend');},
        mapClick: function(r) {alert('mapclick')}
    // Must call map.display() when you want the map to display when the
    // delayed property is set to true.
<h2>HordeMap Example</h2>
<div id="mapdiv" style="height:300px;width:700px;"></div>


Back to the Project List