OpenLayers

Introducción

Sin tecnologías propietarias ni código privado ni denominación de origen que debe figurar en cualquier versión que aproveche la API original. Completamente libre, abierto a todos los desarrolladores: esta aplicación está hecha en JavaScript, y se presenta como la mejor alternativa al poderoso producto de Google.

Si se necesita poner un mapa en tu web o geolocalizar cualquier evento sin tener que recurrir a Google, esta es la alternativa: Open Layers. Y si por alguna razón quieres aprovechas algún mapa creado con el software de Google, Microsoft o Yahoo!, igualmente Open Layers puede abrirlos. Existe compatibilidad total.

Ejemplos de Uso

Para el ejemplo de integración de una capa OpenGIS y una capa GMaps necesitamos lo siguiente :

Crear una pagina HTML/JSP en la que haya una etiqueta div en la que Openlayers situará el visor Cliente Javascript, por ejemplo le llamaremos map. Así que tenemos una etiqueta:

<div id="map"></div>

Añadiremos un estilo CSS, en la cabecera de la página,a la etiqueta div /id="map" que nos servirá para darle las propiedades de presentación del visor : tamaño , con/sin borde , tipo de borde, etc.Por ejemplo:

<style type="text/css">
        #map {
            width: 100%;
            height: 512px;
            border: 1px solid gray;
        }
    </style>

Incluimos la librería para trabajar con Openlayers en la cabecera de la página:

<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js" >
 </script>

Para añadir este paso necesitamos solicitar un clave de desarrollo a Google Maps. Después de solicitarla ponemos en la cabecera de la página lo siguiente :

<script src='http://maps.google.com/maps?file=api&v=2&key=claveDesarrolloGMaps'>
 </script>

En esta parte es donde vamos a decirle que capas vamos a incluir y cómo:

<script type="text/javascript">

        // make map available for easy debugging
        var map;

        // avoid pink tiles
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";

        function init(){
            var options = {
                projection: "EPSG:900913",
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508, 20037508.34)
            };
            map = new OpenLayers.Map('map', options);

            // create Google Mercator layers
            var gsat = new OpenLayers.Layer.Google(
                "Google Sattelite",
                {type: G_SATELLITE_MAP, 'sphericalMercator': true}
            );

            // create WMS layer
            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
                                                "http://labs.metacarta.com/wms/vmap0",
                                                {layers: 'basic'}
                                               );


            bounds = new OpenLayers.Bounds();
            bounds.extend(new OpenLayers.LonLat(-14323687.602271,2123114.897454));
            bounds.extend(new OpenLayers.LonLat(-6760702.276977,7132491.982254));
            // include other important locations here if you add features to the map

            // add the created layers to the map (if you want custom layers to show up they must be here as well)
            map.addLayers([gsat, wms]);
            var control = new OpenLayers.Control.LayerSwitcher();
            map.addControl(control);
            /*console.log("BBox is: " + bounds.toBBOX());*/
            map.zoomToExtent(bounds);
            control.maximizeControl();
        }

        function osm_getTileURL(bounds) {
            var res = this.map.getResolution();
            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
            var z = this.map.getZoom();
            var limit = Math.pow(2, z);

            if (y < 0 || y >= limit) {
                return OpenLayers.Util.getImagesLocation() + "404.png";
            } else {
                x = ((x % limit) + limit) % limit;
                return this.url + z + "/" + x + "/" + y + "." + this.type;
            }
        }

    </script>

Comentando este ejemplo podemos ver que

map = new OpenLayers.Map('map', options);

pone en el div/id="map" todo el contenido.

En:

var gsat =
 new OpenLayers.Layer.Google
 ("Google Sattelite",{type: G_SATELLITE_MAP, 'sphericalMercator': true});

creamos una capa de Google Maps. Y

var wms=
 new OpenLayers.Layer.WMS
 ("OpenLayers WMS","http://labs.metacarta.com/wms/vmap0",{layers: 'basic'};

crea una capa WMS del servicio indicado. Ahora solo tenemos que añadir esas dos capas al visor :

map.addLayers([gsat, wms]);