Introducción a OpenStreetMaps, Crear Mapa Web y Agregar Marcadores

OpenStreetMap es un proyecto de mapas creados por la comunidad, son gratis y no hay limite o cuota de uso, para renderizar los mapas usaremos OpenLayers.

OpenStreetMap es una solución muy interesante, ya que los datos de los mapas los construye la comunidad, usando dispositivos GPS, móviles, entre otros.

En este articulo vamos a mostrar un mapa del mundo en una coordenada especifica, que ustedes pueden modificar, y también vamos a agregar un par de marcadores.

Pagina Oficial: https://www.openstreetmap.org/

Descargar OpenLayers

Para usar o incluir OpenStreetMap en nuestra pagina web o sistema web, vamos a usar la librería OpenLayers, que permite manipular los objetos del mapa en forma de capas.

Hay varias versiones 2,3,4,5 en este ejemplo vamos a usar la versión 2 ya que esta versión aun esta en uso, si mas adelante ustedes quieren cambiar la versión, lo pueden hacer, para descargar la librería OpenLayers deben ir a la pagina oficial : https://openlayers.org/two/

Una vez descargamos la librería o el paquete general, vamos a utilizar 3 carpeta: lib, img y theme.

Codigo

Ahora vamos a empezar a codificar nuestro ejemplo.

Vamos a crear un documento HTML como cualquier otro y en el head vamos a incluir el script de OpenLayer.

<script src="openlayers/lib/OpenLayers.js"></script>

Ahora en el body vamos a agregar un contenedor para el mapa.

<div id="demoMap" style="width:960px; height:540px"></div>

Ahora les incluyo el script para crear el mapa y agregar los marcadores.

En el script les incluyo comentarios para que entiendan un poco de que se trata cada linea.

<script>
	/// En esta parte vamos a definir las variables
    var lat            = 23.290876; // Latitud
    var lon            = -101.8361387; // Longitud
    var zoom           = 5; // Zoom Inicial
	var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984 / Original
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection / Google Maps
    var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);     // creamos una posicion / objeto
    var position2       = new OpenLayers.LonLat(-106.3774421, 27.7634607).transform( fromProjection, toProjection);     // Creamos la segunda posicion


    map = new OpenLayers.Map("demoMap"); // Asignamos el mapa al contenedor
    map.addLayer(new OpenLayers.Layer.OSM()); // Agregamos la capa de OpenStreetMap
    map.setCenter(position, zoom) /// Asignamos el centro, la posicion y el zoom inicial

    var markers = new OpenLayers.Layer.Markers( "Markers" ); // Creamos una capa para los marcadores
    map.addLayer(markers); // Agregamos la capa al mapa 
    markers.addMarker(new OpenLayers.Marker(position)); // Agregamos el primer marcador
    markers.addMarker(new OpenLayers.Marker(position2)); // Agregamos el segundo marcador
</script>

Esta listo. Solo falta guardar y podemos ver el resultado.

Resultado

A continuación el resultado, las coordenadas que agregue en mis posiciones corresponden a lugares de México, ustedes pueden personalizar sus posiciones, agregar mas cargadores, etc.

Si requieren el ejemplo completo por favor solicitarlo. Eso es todo. Saludos