Diseño web y programación

Con el foco en php, laravel y geolocalización

Instalación y configuración de la librería javascript: Openlayers

Instalación y configuración de la librería javascript: Openlayers

Openlayers es una librerí­a javascript que nos permitirá incorporar en nuestro web, mapas de forma rápida y sencilla, con la particularidad de aportar una gran potencia de edición y personalización de estos mapas, permitiéndonos una integración, y sobre todo, una configuración muy avanzada.

La librería está bajo licencia [FreeBSD][https://www.freebsd.org/es/], y dispone de una amplia y completa documentación, así como una gran cantidad de ejemplos, y sobre todo, el respaldo de una importante comunidad de programadores que la utilizan.

Con openlayers, podemos intengrar prácticamente cualquier plataforma de mapas: googlemaps, bing, openstreetmap.org,... y sobre todo, a los servicios WMS, como pueden ser: el catastro, la nasa,... y una gran lista de servicios más, por ejemplo, estos son los que ofrecen las administraciones públicas de cualquier país.

En el caso de España:

http://www.idee.es/web/guest/directorio-de-servicios

¿Y esto para que sirve? Pues para muchas cosas, por ejemplo, imagina que quieres volcar la información de una base de datos sobre un mapa. Con openlayers, se puede hacer de forma sencilla. O por ejemplo, en mi caso (en el proyecto que estoy desarrollando ahora mismo), estoy utilizando fotos de satélite para identificar parcelas agrí­colas y obtener automáticamente información sobre dicha parcela, como puden ser: las dimensiones de la parcela o la información catastral, de forma que posteriormente pueda procesar y tratar todos esos datos.

Instalación de Openlayers

La instalación es realmente simple, solo hay que ir a la página del proyecto y descargar la librería:

https://github.com/openlayers/openlayers

Y ahora, desde nuestro archivo html, simplemente la cargamos:

<script type="text/javascript" src="js/openlayers/OpenLayers.js"></script>

Ya tenemos instalada la librería, ahora vamos a ver un primer y básico ejemplo:

 <script type="text/javascript" src="js/openlayers/OpenLayers.js"></script>
 <script>
    window.onload = function() {
        miMapa();
    };
    function miMapa() {
        //Creamos el mapa y la asignamos el id del div
        var mapa = new OpenLayers.Map( "mapa" );
        //Definimos la url del WMS
        var capa = new OpenLayers.Layer.WMS(
            "Mapa",
            "http://vmap0.tiles.osgeo.org/wms/vmap0?",
            {layers: 'basic'}
        );
        //Añadimos la capa
        mapa.addLayer( capa );
        //Colocamos el zoom en el centro
        mapa.zoomToMaxExtent();
    }
</script>
<div id="mapa"></div>

1. Lo que hemos hecho, ha sido crear un contenedor div con el id "mapa" que va a contener el mapa:

 <div id="mapa"></div>

2. Creamos el mapa y le decimos que lo cargue en dicho contenedor:

 var mapa = new OpenLayers.Map( "mapa" );

3. Indicamos el tipo de capa a cargar y la direccion de la capa:

var capa = new OpenLayers.Layer.WMS(
    "Mapa",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?",
    {layers: 'basic'}
);

OpenLayers.Layer.WMS, indica que es una capa WMS, podría ser también OpenLayers.Layer.Vector, para añadir una capa vectorial. Es importante recordar que la url, hay que terminarla en `?, si no, nos va a dar error.

4. Añadimos la capa al mapa:

 mapa.addLayer(capa);

5. Creamos el zoom:

 mapa.zoomToMaxExtent();

También podrí­amos hacerlo así:

 mapa.setCenter(new OpenLayers.LonLat(-1, 40), 8);

Que sería lo mismo, pero en este caso, nosotros definimos la latitud y la longitud del centro del mapa (-1,40) y el zoom a 8.

Se que es un tema complejo, pero creo que gracias a librerías como esta o como leaflet, la geolocalización y el tratamiento de la información mediante mapas, se ha simplificado de forma considerable.

Como último comentario sobre el tema, personalmente, prefiero utilizar leaflet, de hecho, en los proyectos en los que he tenido que utilizar geolocalización y mapas, siempre ha sido mi opción, aunque supongo que la más famosa y utilizada sigue siendo openlayers.