OpenLayersExtLoader

Una clase para cargar todos los ficheros requeridos por la OLE, lo que incluye las clases extendidas OpenLayersExt junto con las demás librerías utilizadas como OpenLayers, Prototype, Scriptaculous, y Proj4js, entre otras.

Cómo incluirlo

Lo primero que hay que hacer es incluir el fichero openlayers-ext-loader.js en el documento html document donde se quiere utilizar la OLE. Este fichero es lo único que se necesita para cargar dinámicamente todas las dependecias JavaScript que requiere la OLE.

<script src="/<ole-base-path>/openlayers-ext/openlayers-ext-loader.js" type="text/javascript"></script>

Cómo utilizarlo

Una vez incluido el fichero openlayers-ext-loader.js, se puede invocar el método OpenLayersExtLoader.load pasándole como argumento un objeto con parámetros de configuración.

// Cargar ficheros OLE con mapas de Google y Yahoo
OpenLayersExtLoader.load({
  "debug": true,
  "map-libs": {
    "google": { "version": "2", "key": "<google_api_key>" },
     "yahoo": { "version": "3.0", "key": "<yahoo_api_key>" }
  }
});

Métodos de Clase

load

function( parameters ){}

Carga todas las dependencias JavaScript de la OLE. Las librerías de mapas (google, yahoo, microsoft...) se cargan bajo demanda según el parámetro map-libs.

El método load recibe como único argumento un objeto con parámetros opcionales de configuración.

Parámetros

Name	Type	Valor Por Defecto	Descripción
debug	boolean	""	Activar opciones de desarrollo y trazas en el Firebug.
map-libs	object	null	Un objeto opcional con las librerías de mapas a cargar.
config	object	null	Un objeto con opciones de configuración

El objeto map-libs

{
  "google":     { "version": "2",   "key": "<google_api_key>" },
  "yahoo":     { "version": "3.0", "key": "<yahoo_api_key>" },
  "microsoft": { "version": "6.1", "key": "<microsoft_api_key>" }
}

El objeto config

{
  "whatishere": {
    "enabled": true,
    "urls": {
      //categories:   "/api/1.0/es/what-is-here/categories.json",
      //search:       "/api/1.0/es/what-is-here/search/mbr/xmin/:xmin/ymin/:ymin/xmax/:xmax/ymax/:ymax/categories/:categories.:format",
      //geometry:     "/api/1.0/es/what-is-here/geometry/code/:code.:format",
      //query:        "/api/1.0/es/what-is-here/query/code/:code.:format"
    }
  }
}

¡No Olvides Tus Llaves!

Cada map-lib que decides utilizar va a requerir una llave de API válida para cada dominio utilizado. Para más información sobre cómo obtener las llaves (API Keys) para las map-libs que quieres usar, hay que visitar el sitio web de cada librería y seguir las instrucciones.

Google Maps API
Yahoo Maps API
Microsoft Maps API

Ejemplo Completo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OLE - Basic Example</title>        
<script src="/<ole-base-path>/openlayers-ext/openlayers-ext-loader.js" type="text/javascript"></script>
<script type="text/javascript">
  //<![CDATA[
  OpenLayersExtLoader.load( {
    "debug": true,
    "map-libs": {
    "google": { "version": "2", "key": "<google_api_key>" },
     "yahoo": { "version": "3.0", "key": "<yahoo_api_key>" }
    }
  } );
  //]]>
</script>
<script type="text/javascript">
  //<![CDATA[
  Event.observe( window, "load", function() {
    window.b5map = new OpenLayersExt.Map( "mymap");
  });
  //]]>
</script>
</head>
<body>
<div id="mymap"></div>
</body>
</html>