<!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>
<!-- openlayers kargatzen dugu (beste edozein lekutik karga daiteke, baina gurea erabiliz gero, b5map estiloa izango dute aginteek) -->
<script src="http://b5m.gipuzkoa.eus/api/1.0/eu/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">
/* maparen <div>-ari estiloa ematen diogu (garrantzitsua da gutxienez tamaina bat ematea) */
#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), // Gipuzkoa extentsioa
GLOBAL_EXTENT = new OpenLayers.Bounds( -20037508, -20037508, 20037508, 20037508.34), // mundu osoko extentsioa
DONOSTIA_EXTENT = new OpenLayers.Bounds( -224779.99454734594, 5358980.567203188, -218946.8938273783, 5362319.909875799); // Donostiago hiriguneko gutxi gora beherako extentsioa
var MERCATOR_PROYECTION = "EPSG:900913"; // gure datuak proiekzio honetan daude
var LAYER_ID = "ort2006", // geruzaren ID-a
LAYER_FORMAT = "jpg"; // tile-en formatua
/*
var LAYER_ID = "map2008", // geruzaren ID-a
LAYER_FORMAT = "png"; // tile-en formatua
*/
// opciones del mapa
var MAP_OPTIONS = {
controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()], // balio lehenetsi bezala, aginte hauek ager ditzala (aukerazkoa, bestela batzuk agertuko ditu balio lehenetsi bezala)
maxExtent: GLOBAL_EXTENT, // mundu osoko mapa
maxResolution: 156543.0339, // konstantea API honetako tilentzat
numZoomLevels: 20, // konstantea API honetako tilentzat
units: "m", // "EPSG:900913" proiekzioaren unitateak
projection: new OpenLayers.Projection( MERCATOR_PROYECTION),
displayProjection: new OpenLayers.Projection( "EPSG:4326") // proiekzio honetan erakusten dugu (aukerazkoa, erabiltzaileak ikusten dituen koordenadak ezagunagoak izan daitezen)
};
// APIaren oinarrizko URL
var API_BASE_URL = "http://b5m.gipuzkoa.eus/api/1.0/eu/"
// mapa eta geruza gordetzen dugun lekua
var layer, map;
// hasteko funtzioa "body"aren "onload" ebentoan deitua
function init() {
// mapa sortzen dugu
map = new OpenLayers.Map( "example-map", // mapa jasoko duen <div>-aren "id"-a
MAP_OPTIONS);
// mapa sortzen dugu
layer = new OpenLayers.Layer.TMS( "Gipuzkoa 2006", // geruzaren izenburua
API_BASE_URL + "osgeo/tms/tileset/", // tile-en oinarrizko URL-a (tile guztientzat konstantea)
{
layername: LAYER_ID, // kargatu beharreko geruzaren izena
type: LAYER_FORMAT, // tile mota, "jpg" ortoentzat, "png" mapentzat
proyection: MERCATOR_PROYECTION, // tile-ak proiekzio honetan daude
displayOutsideMaxExtent: false, // ez ditzala Gipuzkoa kanpoko tileak kargatu (aukerazkoa, bestela, transparente agertzen dira)
isBaseLayer: true // hau oinarriko geruza bat da
}
);
map.addLayer( layer); // geruza bat gehitzen diogu mapari
map.zoomToExtent( DONOSTIA_EXTENT); // Donostian zentratzen dugu mapa
map.zoomTo( map.getZoom() + 1); // zoom handiago bat egiten dugu
}
//]]>
</script>
</body>
</html>
