OpenLayers, mapas para tu aplicación web

21 diciembre, 2011

Hace poco nos cruzamos con esta excelente librería, OpenLayers, escrita completamente en Javascript, nos permite poner mapas dinámicos desde diferentes servicios de mapas en nuestras aplicaciones web y trabajar con ellos de manera similar.

Acá un ejemplo del potencial de OpenLayers:

En el siguiente mapa puedes seleccionar entre los servicios más populares para trabajar con OpenLayers (Bing Maps, Google Maps y Open Street Maps):

Active/Desactive las diferentes capas en

Puede ver el ejemplo en http://qjuanp.net/labs/osm/example1

Como hacerlo?

Primero, preparemos el html para alojar el mapa:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Diferentes servicios de Mapas con OpenLayers</title>
 5         <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
 6         <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/google.css" type="text/css">
 7         <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
 8         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 9         <script src="http://openlayers.org/dev/OpenLayers.js"></script>
10         <script src="http://qjuanp.net/labs/osm/example1/mix-services.js"></script>
11     </head>
12     <body onload="init()">
13         <h1 id="title">Diferentes servicios de Mapas con OpenLayers</h1>
14         <div id="map" class="smallmap"></div>
15     </body>
16 </html>
17

En el HTML tenemos

Código escencial

Importando OpenLayers

<script src="http://openlayers.org/dev/OpenLayers.js"></script>

Este nos permite importar la librería de Open Layers. Para sistemas en producción se recomienda usar la librería que está en la dirección: http://openlayers.org/api/OpenLayers.js

Definiendo donde se mostrará el mapa

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

En este div con el identificador map se alojará el mapa al momento de inicializarlo. Se pueden declarar los estilos (como tamaño y ubicación del div) mediante CSS.

Inicializando el mapa

<body onload="init()">

Manejando el evento onload del cuerpo de nuestra pagina html, vamos a poder asegurar que el div ha sido leído por el navegador y que está disponible para que nosotros lo utilicemos para depositar el mapa en él.

La funcion init()

Esta función init() la hemos declarado en un archivo javascript separado que importamos después de haber importado la librería de OpenLayers.

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://qjuanp.net/labs/osm/example1/mix-services.js"></script>

El archivo mix-services.js contiene:

 1 var map; // Variable que aloja la referencia al mapa
 2 
 3 function init() {
 4 
 5     // Inicializa el mapa sobre el div de id="map"
 6     map = new OpenLayers.Map({
 7         div: "map",
 8         allOverlays: true
 9     });
10 
11     // Declaramos las diferentes capas que tendrá nuestro
12     // mapa, en este caso, cada una de las capas corresponde
13     // a los servicios:
14     //     OpenLayers.Layer.OSM: Open Street Map http://www.openstreetmap.org/
15     //    OpenLayers.Layer.Google: Google Maps http://maps.google.com
16     //    OpenLayers.Layer.Bing: Bing Maps http://bing.com/maps
17     var osm = new OpenLayers.Layer.OSM();
18     var gmap = new OpenLayers.Layer.Google("Google Streets",
19                                             {visibility: false});
20     // Bing maps requiere del AppKey
21     // este lo pueden conseguir en: https://www.bingmapsportal.com/
22     var bmap = new OpenLayers.Layer.Bing({name:"Bing Maps (Road)",
23                                             visibility:false,
24                                             key:"AoYx0TZvI8ceg0ZL1ZESpqDmgh0ltnPp5XheFiAPL3r4hskqgqLu4MOejhPeBnzP"});
25 
26     // Estas capas declaradas las agregamos
27     // al mapa que incializamos
28     map.addLayers([osm, gmap, bmap]);
29 
30     // Agregamos el control LayerSwitcher que permite
31     // activar/descativar las Capas declaradas en nuestro
32     // mapa
33     map.addControl(new OpenLayers.Control.LayerSwitcher());
34 
35     // Definimos que el Zoom inicial ocupe todo el
36     // espacio disponible en el div
37     map.zoomToMaxExtent();
38 }

Resumiendo, la función init realiza el siguiente proceso:

  1. Instanciar el mapa de OpenLayers
  2. Definir las capas(layers) que serán visibles en el mapa
  3. Agregar las capas(layers) a la instancia del mapa

En este articulo nada más abarcamos el despliegue del mapa, con diferentes servicios, dentro de nuestra aplicación, en futuros post veremos otras características que nos brinda OpenLayers, como el mostrar marcadores, tooltips e inclusive rutas.

Código opcional

El HTML del ejemplo, trae además el llamado de hojas de estilos, las cuales son usadas para ajustar los estilos en la línea que identifica el proveedor de servicios de mapas. También, se importa código javascipt desde el servicio de Google Maps para el funcionamiento del mismo.

1 <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
2         <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/google.css" type="text/css">
3         <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
4         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Pueden encontrar el código completo en: http://qjuanp.net/labs/osm/example1/

Cual es el servicio de mapas que más han utilizado para sus aplicaciones web?

Creative Commons License
This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 2.5 Colombia License.


Metro-designed by Little Wolf.