He tenido por fin el tiempo para crear una entrada donde exploremos de forma muy rápida la forma en la que podemos crear un mapa utilizando OpenStreetMap y OpenLayers.
¿Por qué utilizar OpenStreetMap?, simplemente porque Google quiere cobrarle a las empresas que monten en su sitio web un mapa que vean mucho los usuarios, por esa sencilla situación he decidido investigar cómo es que funciona OpenStreetMap.
Para poder comenzar tendremos que descargar la librería que nos ayudará a controlar nuestro mapa de OpenStreetMap en la página openlayers.org. Ahí encontraremos una liga para descargar la librería.
Una vez descargado el zip, vamos a descomprimirlo y en un sitio web nuevo creado con Visual Studio vamos a agregar los siguientes archivos y carpetas:
- build\OpenLayers.zip
- theme
- img
OpenLayers.js deberá quedar ubicado en la raíz.
Vamos a agregar una página HTML (MyMap.htm) donde agregaremos referencia al script de OpenLayers:
<script language="javascript" type="text/javascript" src="OpenLayers.js"></script>
Ahora agregamos un elemento DIV que nos permita dibujar el mapa sobre él:
<div style="width: 800px; height: 600px;" id="myMap"></div>
¡Comenzamos con la magia de OpenLayers!. Creamos una instancia del objeto OpenLayers.Map pasándole como parámetro el identificador del objeto donde queremos que cargue el mapa (myMap), le agregamos una capa que esté conectada con OpenStreetMap y centramos el mapa en México con un zoom de 5. Finalmente agregamos un control que nos permite rastrear las coordenadas donde está ubicado el mouse en el mapa y listo:
<script language="javascript" type="text/javascript">
var map = new OpenLayers.Map('myMap'); //Identificador del elemento DIV
map.addLayer(new OpenLayers.Layer.OSM()); //OpenStreetMap
map.setCenter(new OpenLayers.LonLat(-11437415.414775, 2727283.1688355), 5);
map.addControl(new OpenLayers.Control.MousePosition());
</script>
Una excelente referencia de cómo conocer cada uno de los objetos que tiene OpenLayers es la página de la documentación de la API y también en esta página tenemos una guía sencilla.
En las entradas siguientes de OpenStreetMap y OpenLayers iremos avanzando poco a poco en la exploración de estas herramientas.
Espero te haya sido de utilidad.
