NOTA: selecciona la orientación oportuna del papel en las opciones de impresión de tu navegador. Puedes imprimir la página o volver al visor.

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>