Mapas personalizados para webs

Tutorial3: mapas de recorridos para tu web o blog

¿Necesitas poner en tu web o blog un mapa con el recorrido que quieres relatar o promocionar? Te gustan los mapas con recorridos que publicamos en portales de montaña como éste? No hace falta saber mucho código HTML ni programación. Te damos tres posibilidades para que las pruebes y escoge la que mejor se adapte a tu web o blog.

POSIBILIDAD 1: INSERTA UN MAPA DE WIKILOC

Si tienes una cuenta de Wikiloc (es gratis) es la posibilidad más sencilla para ti y que lleva menos tiempo. El aspecto del mapa de Wikiloc es este:

Powered by Wikiloc

LAS CARACTERÍSTICAS son: fácil de generar, de fondo únicamente nos sale la Cartografía de Satélite o foto aérea, aparece una escala de gráfica de alturas y nos aparece tanto la firma del logotipo de Wikiloc (no se puede quitar) como la firma de Powered of Wikiloc (se puede quitar pero no deberíamos por cortesía. Funciona el Zoom más o menos pero no podemos cambiar de fondo de mapa como cuando navegamos por la web: todo no se puede.

EL PROCESO: es muy sencillo; con nuestra cuenta de Wikiloc ya creada y nuestro track que queremos mostrar ya preparado (con sus wpts o no) entramos en la web y pulsamos en + SUBIR RUTA arriba a la izquierda:

Subir rutas en wikiloc

Y vamos siguiendo todos los pasos que nos exige el formulario, añadimos wpts o puntos de interés o no, un enlace a nuestra página web o blog, un nombre corto y una EXPLICACIÓN del recorrido que ayude a los futuros lectores. No perder tiempo con esos detalles queda muy feo. Cuando hemos terminado la ruta queda subida a la web y ya es pública para todos. Para verla y poder obtener el código del mapa para nuestra web, debemos seleccionarla en la lista lateral de Tus rutas y pulsar en VER DETALLES:

2-ver-detalles-ruta-wikiloc

y se nos abre la ficha a toda página y ahora podremos pulsar en el icono de COMPARTIR y del desplegable elegimos la última opción en verde HTML:

3-compartir-mapa-en-wikiloc

que nos abre una ventana nueva con un código HTML que deberemos copiar completo para pegarlo en nuestro blog en el lugar que queramos:

4-codigo-wikiloc-maps-iframe

CUIDADO: nos fijaremos bien en que copiamos por completo todo el código, desde la etiqueta “iframe” hasta el cierre de dicha etiqueta como “/iframe” Y además cuando lo peguemos en nuestro blog lo haremos en modo HTML (en wordpress) o con etiqueta texto html (desconozco como funciona Blogger pero será similar) Guardamos la página y probamos:

 

5-modo-html-wordpress

En wordpress importante estar en modo HTML cuando pegamos estos códigos HTML

TRUCO: si nuestro nuevo mapa no llega hasta todo el ancho de mi web, entraremos de nuevo en modo HTML o modo Texto y modificaremos los valores de los anchos y altos a voluntad. El ancho lo cambiaremos de pixels a 100% y con el alto iremos probando desde el valor inicial: width=”100%” height=”400″. No tocaremos ningún otro caracter o el mapa fallará.

 

POSIBILIDAD 2: EN NAVARRA, INSERTA UN MAPA DE SITNA WEB

ASPECTO EN CAPA TOPOGRÁFICA:
Mapa interactivo, funciona el zoom + y – y si pulsas con la i de Información sobre cada bandera te dice el nombre de cada waypoint

ASPECTO EN CAPA ORTOFOTO:

Como ventajas, puedes elegir entre estos dos fondos de información. El mapa también es escalable al ancho de tu web (en pixels pero no en %). El track debe estar obligatoriamente en .gpx, y sin comprimir. En el caso de la Capa topográfica con los distintos niveles de zoom se accede a distintos mapas Topo, llegando incluso al detalladísimo pero viejo 1:5000.

EL PROCESO: no existe apartado en la web de Sitna donde debas subir tu track como en Wikiloc. Deberás subirlo a tu web o blog directamente y buscar luego la ruta URL donde se ha alojado. Cuidado porque algunos gestores de webs como WordPress no deja subir directamente este tipo de archivos a la Bilioteca de medios por lo que deberás subirlo a mano con un programa de FTP. Una vez averiaguada la ruta absoluta o URL de tu track, que será algo así como: http://www.misitioweb.com/wp-content/uploads/mitrack123.gpx, copiaremos esta URL y la sustituiremos en el siguiente código de sitna:

iframe> src=”http://sitna.navarra.es/navegar/iFrameGPX.aspx?GPXurl=http://www.misitioweb.com/wp-content/uploads/mitrack123.gpx” width=”720″ height=”600″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”No”> </ifra… (cierre de iframe)

y pondremos delante de la palabra iframe el inicio de código < y cerraremos la fórmula con el iframe de cierre pero completo terminado en > que he eliminado para poder mostrar el código. Guardaremos la web y probaremos y ajustaremos el ancho y alto del mapa hasta que funcione. Como pega, no podremos usar el 100% de ancho pues da error. Además se abre una ventana con datos de Distancia y de Desnivel que en ocasiones puede que nos tapen un poco el propio track.

Si queremos que en vez del fondo de Ortofoto Sitna aparezca la capa Topográfica, al final de la URL de nuestro track, donde acaba en .gpx, le añadiremos la coletilla “gpx&fondo=Cartografiatopografica” es decir URL de mi track terminado en gpx&fondo=Cartografiatopografica y cierre de comillas de la URL.

 

POSIBILIDAD 3: CRÉATE UN GOOGLE MAP TOPOGRÁFICO

Es la posibilidad más rica en posibilidades pero que lleva más trabajo. Podemos subir cuantos tracks queramos a un mismo mapa (en los otros no), diferenciarlos por colores, jugar con el tipo y grosor de sus líneas, poner distintos iconos en los puntos de interés o wpts, elegir entre 7 capas distintas de mapas de Google (el topográfico es el más agradecido), hacer que se abran ventanas con fotos y explicaciones de cada Ruta o de cada wpt, etc.

El proceso es el mismo que en Wikiloc: se sube un track a los servidores propios de Google Maps y, al final del proceso de elaboración del mapa, la web te devuelve un código HTML entre etiquetas de  iframe (de apertura <>) e iframe (de cierre </>) que podremos pegar en nuestra web. Como requisito debemos tener una cuenta gmail abierta, entrar en ella y acceder en Mi cuenta a Google Maps, y de allí Abrir mapa en My maps (nuevo):

6-acceder-a-google-maps
y una web allí pulsaremos en las tres rayas del menú y se desplegarán las opciones, elegiremos TUS SITIOS:

7-tus-sitios-google-maps

y luego en MAPAS, CREAR MAPA abajo:

8-crear-google-maps-mapa
y seguiremos cualquiera de los tutoriales de Google que hay por la red. El proceso es muy intuitivo, no nos olvidaremos de dar un nombre al nuevo mapa desde el principio, y podremos ir creando capas nuevas o no para los elementos. Subiremos nuestro track en varios formatos y podremos cambiarle color, tipo de línea, grosor e ir añadiendo los wpts y sus iconos. Cuando terminemos fijaremos la vista previa o zoom que queremos y el tipo de fondo de mapa (cartográfico, orto o satélite, marino…) y el mapa lo tendremos que pasar de estado privado a estado público pulsando en Compartir (ver imagen inferior):

9-compartir-un-google-maps
y seleccionando Cambiar y pasarlo a estado Público todo el mundo puede verlo:

10-hacer-mapa-publico
Al final pulsaremos en las opciones superiores del mapa, junto al título, y elegiremos del desplegable la opción INSERTAR EN MI SITIO WEB, que nos devolverá el código iframe ya famoso con el mapa que pegaremos en nuestra web o blog del modo que ya sabemos (ver imagen inferior):

Insertar un google maps en mi web codigo iframe

Este tipo de mapa está abierto a modificaciones y añadidos posteriores que realizaremos SOLO en mi cuenta de Google Maps / Mis sitios / My maps y se verán reflejados automáticamente en mi web sin tocar el código inicial que no cambia una vez creado la primera vez. Otra ventaja más es que este tipo de mapas no ocupan espacio en nuestro servidor ya que los tracks están alojados realmente en Google.
Si no nos satisface el nivel de zoom al que se muestra nuestro track en el mapa le añadiremos la coletilla a la URL &z=20, pudiendo jugar entre los zooms 10-14 hasta encontrar el que más nos guste (en la imagen siguiente zoom 12)

EL RESULTADO DE UN GOOGLE MAPS SIMILAR con dos recorridos y wpts personalizados:


Recuerda si te ha gustado este Tutorial síguenos cada semana o sucríbete al blog (lateral derecho). A partir de la próxima semana los artículos serán semanales, tras el esfuerzo inicial que hemos hecho para el lanzamiento.

APÓYANOS:

Si te gustan estos GPSconsejos semanales y te resultan útiles puedes apoyarnos de 4 formas:

Cualquiera de estas 4 opciones es bien recibida, pues mantener una web como esta lleva unos costes.

Publicado en Tutoriales avanzados y etiquetado , , .