Ejemplo completo de uso del API
<!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>B5MAP API example</title> <!-- cargamos openlayers (se puede cargar de cualquier otro lado, pero si se usa el nuestro los controles de navegación estaran estilados al estilo b5map --> <script src="http://b5m.gipuzkoa.eus/api/1.0/es/library/openlayers/OpenLayers.js" type="text/javascript"></script> </head> <body topmargin='0' leftmargin='0' marginheight='0' marginwidth='0' onload="init()"> <div id="example-map"></div> <style type="text/css"> /* estilamos el <div> del mapa (es importante al menos darle un tamaño) */ #example-map { width: 500px; height: 500px; border: 1px solid red; background-color: gray; } </style> <script type="text/javascript"> //<![CDATA[ var LOCAL_EXTENT = new OpenLayers.Bounds( -290161.04, 5295335.5, -191077.32, 5373290.31), // extensión de Gipuzkoa GLOBAL_EXTENT = new OpenLayers.Bounds( -20037508, -20037508, 20037508, 20037508.34), // extensión del mundo entero DONOSTIA_EXTENT = new OpenLayers.Bounds( -224779.99454734594, 5358980.567203188, -218946.8938273783, 5362319.909875799); // extensión aproximada de la zona urbana de Donosti var MERCATOR_PROYECTION = "EPSG:900913"; // nuestros datos están en esta proyección var LAYER_ID = "ort2006", // ID de la capa LAYER_FORMAT = "jpg"; // formato en el que están los tiles /* var LAYER_ID = "map2008", // ID de la capa LAYER_FORMAT = "png"; // formato en el que están los tiles */ // opciones del mapa var MAP_OPTIONS = { controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()], // que por defecto muestre estos controles (opcional, si no muestra unos por defecto) maxExtent: GLOBAL_EXTENT, // el mapa abarca el mundo entero maxResolution: 156543.0339, // constante para los tiles de esta API numZoomLevels: 20, // constante para los tiles de esta API units: "m", // unidades de la proyección "EPSG:900913" projection: new OpenLayers.Projection( MERCATOR_PROYECTION), displayProjection: new OpenLayers.Projection( "EPSG:4326") // mostramos en esta otra proyección (opcional, para que las coordenadas que vea el usuario sean más conocidas) }; // URL base del API var API_BASE_URL = "http://b5m.gipuzkoa.eus/api/1.0/es/" // donde guardamos el mapa y la capa var layer, map; // función de inicializacion llamada en el evento "onload" del "body" function init() { // creamos mapa map = new OpenLayers.Map( "example-map", // "id" del <div> que contendrá el mapa MAP_OPTIONS); // creamos capa layer = new OpenLayers.Layer.TMS( "Gipuzkoa 2006", // título de la capa API_BASE_URL + "osgeo/tms/tileset/", // URL base de los tiles (constante para todos los tiles) { layername: LAYER_ID, // nombre de la capa a cargar type: LAYER_FORMAT, // tipo de tiles, "jpg" para ortos, "png" para mapas proyection: MERCATOR_PROYECTION, // los tiles están en este proyección displayOutsideMaxExtent: false, // que no carge tiles fuera de Gipuzkoa (opcional, si no salen transparentes) isBaseLayer: true // esta es una capa base } ); map.addLayer( layer); // añadimos capa al mapa map.zoomToExtent( DONOSTIA_EXTENT); // centramos el mapa en Donostia map.zoomTo( map.getZoom() + 1); // hacemos un zoom mayor } //]]> </script> </body> </html>