Oct 212012
 

OpenStreetMaps ofrece gratuitamente a traves de www.openlayers.org  el servicio de mapas generados a partir de la información de su base de datos, aunque sin garantías de disponibilidad.

Este servicio puede ser utilizado por sitios webs con poco tráfico, pero si preveemos un volumen de tráfico elevado, podemos acudir a otras alternativas basadas en OSM, como puede ser MapQuest. En última instancia, tenemos la posibilidad de generar los mapas en nuestros propios servidores. En este artículo analizaremos estas posibilidades.

Implementación del servicio de mapas de OpenLayers OSM

La implementación más sencilla para la visualización de un mapa en una página web se obtiene con el siguiente código HTML:

Como vemos, basta con cargar la librería javascript OpenLayers.js que implementa toda la funcionalidad necesaria, y crear un objeto javascript ‘mapa’ de la clase OpenLayers.Map. El manejo del mapa se realiza mediante llamadas a los distintos métodos del objeto mapa.

Con el código de arriba, insertado en un iframe, obtenemos el siguiente resultado:

Sin embargo, si el mismo código lo insertamos directamente en este artículo, el mapa aparece distorsionado y dividido en franjas verticales, separadas por espacios en blanco.

Después de investigar un poco con el plugin Firebug de Firefox, encontré que el problema estaba en que el código CSS de mi tema de WordPress (suffusion) estaba interfiriendo con la manera en que OpenStreeetMap genera los mapas.

Un mapa de OSM está compuesto como un mosaico de imágenes (“tiles”) de la clase CSS “olTileImage”. Por lo tanto la solución está en añadir un código CSS que evita esta interferencia:

Y con ello, el mapa OSM se visualiza correctamente:

//

 Publicado por en 11:37 am

 Deja un comentario

(requerido)

(requerido)