Archivo

Entradas Etiquetadas ‘mapas’

Visualizar rutas con OpenStreetMap

martes, 19 de junio de 2012 5 comentarios
Share Button

47051ef57b97x300.jpgAnteriormente en el blog he escrito entradas sobre cómo visualizar rutas o tracks en mapas  de Google , en diferentes formatos. Al final la idea es la misma en todos los ejemplos; Pintar una sucesión de puntos correspondientes a latitud y longitud sobre un mapa. Nada más. Hemos visto cómo hacerlo con los ficheros KML que utiliza Google o los ficheros GPX (GPS eXchange Format), que están considerados como un estándar en este tipo de representación.

No es mi intención seguir el camino que muchas compañías están tomando de “mudarse” de los mapas de Google a OpenStreetMap, desde que Google anunció que iba a cobrar por utilizar los suyos, sino más bien ampliar las posibilidades de los ejemplos que ya habíamos visto para poder utilizar estos mapas también.

Para quien no la conozca, OpenStreeMap, se trata de una plataforma de mapas a nivel mundial libre. Donde cualquiera puede añadir información (en mi caso, por ejemplo, he añadido rutas en bici).  Si queréis saber algo más sobre este proyecto podéis leer esta lista de “las 10 cosas que deberías saber sobre OpenStreetMap”.

He utilizado el mismo ejemplo que en su día hice para la visualización de tracks en Google Maps; “El Visor KML”. Como ya he dicho, la idea es la misma, pero utilizando diferente proveedor de mapas.

En el caso de Google Maps, para crear el mapa y la polilínea utilizamos las siguientes clases:

map = new GMap2(document.getElementById("map"));var polyline = new GPolyline…

En el caso de OpenStreetMap utilizamos:

map = new OpenLayers.Map ("map_canvas", options…
…
var linear_ring = new OpenLayers.Geometry.LinearRing(points);
polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linear_ring]), null, style);

Siguiendo con la misma idea su miramos como proveedor Bing Maps (Microsoft) o los mapas de Yahoo, el sistema es fácilmente “portable” a estos. Si buscamos un poco en la API para Bing, vemos que para crear el mapa y la polilínea podemos utilizar:

map = new MM.Map(document.getElementById("myMap"), options…
var polyline = new MM.Polyline([

Y en el caso de Yahoo Maps utilizaríamos:

var map = new YMap(document.getElementById('map'));
polylinePoints = [];
map.addOverlay(new YPolyline(polylinePoints, options…

Modificando el ejemplo antes comentado, he añadido a los mapas de Google Maps, los mapas de OPenStreetMap y los de Bing Maps. Si alguien se anima a completarlo con los de Yahoo Maps (ya he parado aquí) os lo dejo como “ejercicio” y espero que lo compartáis aquí.

Os dejo unas imágenes del resultado.

gmosmbm

Los diferentes mapas se encuentran en un fichero de recursos.

Os adjunto el código fuente del proyecto, algunas rutas de ejemplo para probar y un EXE compilado.

<DESCARGAR FUENTES + EXE>

NOTA: Es posible que debido a los cambios de licencias de Google y del resto de proveedores, no se pueda ejecutar el proyecto de ejemplo correctamente sin algunos cambios respecto a las API, pero el código sigue siendo válido y orientativo para el que tenga que trabajar con estos temas.

Categories: Delphi, GPS, Mapas Tags: , , ,