Me llena de alegría presentaros la app Bilbao now, el proyecto en el que he estado trabajando últimanente junto con el gran Galder Segurola.
Bilbao Now es una guía turística y agenda cultural de Bilbao, si vives en Bilbao o tienes pensado visitar esta preciosa ciudad y quieres estar al tanto de toda la oferta cultural que te ofrece Bilbao, conocer sus lugares de interés o encontrar cualquier cosa que puedas necesitar esta es tu aplicación.
Bilbao now simplemente responde a esta pregunta: ¿Qué me ofrece Bilbao aquí y ahora?
Podrás ver geolocalizados en el mapa o en formato lista tanto los eventos como los sitios de interés.
Puedes ver los eventos clasificados por categorías y seleccionar el rango de días que te interese.
Además los puntos de interés los puedes escuchar con voz, ¡es como tener un guía turístico en tu móvil!
La aplicación además nos permite guardar tanto lugares como eventos en favoritos para consultarlos posteriormente, puedes por ejemplo guardar los sitios de interés que quieres visitar antes de viajar a Bilbo y planear así tu viaje.
La aplicación también te ofrece la previsión del tiempo metereológico en Bilbao para los próximos tres días, así puedes organizar tus actividades en función del tiempo. Descubrirás (o no) que a veces sale el sol en Bilbao ;-P
Cada evento y cada lugar se puede compartir por redes sociales y también te permite abrir el navegador gps para llegar hasta el lugar elegido.
Algunos eventos te permiten acceder a la compra de entradas pulsando el botón comprar.
Además de eventos culturales y sitios de interés turístico también puedes encontrar otros sitios de utilidad para el visitante (y el autóctono) como farmacias, restaurantes, cajeros automáticos, estaciones de metro, autobuses, tiendas… etc
La aplicación se ofrece en cuatro idiomas, inglés, francés, español y euskera.
Los eventos se recogen de varias fuente por lo que la oferta es ampia y variada.
Otra característica interesante de la app es que permite el uso offline de la aplicación, es decir con solo la abras unos segundos conectado al wifi del Hotel o a la tarifa de datos podrás consultarla el resto del día si conexión ya que dispone de un mapa offline y guarda los datos obtenidos para poder consultarlos sin conexión.
La app es gratuita y no tiene publicidad así que no tenéis excusa para no instalarla.
Bilbao now se encuentra disponible tanto para Android como para iOS, nos hacéis un gran favor si la instaláis y la valoráis en google play o app store, esto ayuda a posicionarla mejor y que llegue a mas gente 😉
En posts anteriores vimos como mostrar un mapa de Google maps en ionic, sin embargo ¿que pasa si queremos mostrar información en un mapa sin conexión?, google maps no nos podrá mostrar el mapa.
En lugar de utlizar Google maps en esta ocasión vamos a utilizar Leaflet para mostrar un mapa.
Leaflet es una biblioteca javascript de código abierto que nos permite crear mapas.
Lanzado por primera vez en 2011, es compatible con la mayoría de las plataformas móviles y de escritorio, y es compatible con HTML5 y CSS3 .
Es una de las bibliotecas de mapas de JavaScript más populares y es utilizada por los sitios web como FourSquare , Pinterest y Flickr .
Para poder mostrar un mapa offline es necesario tener alojados locálmente los titles que forman el mapa, si quieres mostrar un mapa de todo el mundo offline a día de hoy podemos afirmar que es inviable ya que eso supondría muchísimos gigas de información, sin embargo si que puede ser viable mostrar un mapa offline de una ciudad.
Si por ejemplo estás desarrollando una aplicación de turismo de una ciudad concreta donde vas a mostrar en un mapa los monumentos que merece la pena visitar en dicha ciudad, o cualquier otra información geolocalizada en un mapa, puede ser interesante el poder mostrar un mapa sin necesidad de tener conexión a Internet en ese preciso momento.
Vamos a ver como podemos solucionar esto en ionic 3, y como siempre la mejor manera de verlo es con un ejemplo.
Lo primero que vamos ha hacer es crear un nuevo proyecto en ionic que vamos a llamar mapaoffline:
ionic start mapaoffline blank
Una vez creado el en proyecto entramos en la carpeta con:
cd mapaoffline
Ahora vamos a descargar Leaflet, para ello descargamos la última versión desde la sección de descargas de su página oficial en el siguiente enlace:
Se habrá descargado un archivo .zip, antes de nada debemos descomprimirlo para extraer su contenido:
Ahora vamos a crear una carpeta llamada leaflet en src/assets y dentro vamos a copiar la carpeta images y el archivo leaflet.css.
Una vez hecho esto vamos a cargar el archivo leaflet.css en index.html:
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><title>Ionic App</title><meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#4e8ef7"><!-- add to homescreen for ios --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- cordova.js required for cordova apps --><script src="cordova.js"></script><!-- un-comment this code to enable service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.error('Error', err)); } --><link href="build/main.css" rel="stylesheet"><link href="assets/leaflet/leaflet.css" rel="stylesheet"></head><body><!-- Ionic's root component and where the app will load --><ion-app></ion-app><!-- The polyfills js is generated during the build process --><script src="build/polyfills.js"></script><!-- The vendor js is generated during the build process It contains all of the dependencies in node_modules --><script src="build/vendor.js"></script><!-- The main bundle js is generated during the build process --><script src="build/main.js"></script></body></html>
Ahora vamos a instalar leaflet desde consola con los siguiente comandos:
Ahora que ya tenemos instalado leaflet necesitamos descargar los tiles del mapa que vamos a mostrar, para ello vamos a echar mano de una herramienta llamada Mobile Atlas Creator (MOBAC), para descargarla accedemos al siguiente enlace: http://mobac.sourceforge.net/ y bajamos en la página hasta encontrar Download y pulsamos en latest stable version para descargar la aplicación.
Una vez descargada tenemos que descomprimir el archivo zip y dentro encontraremos el archivo ejecutable.
Al ejecutar Mobile Atlas Creator nos pide introducir un nombre para el atlas (en este caso le llamamos simplemente mapa) y el formato, tenemos que seleccionar Osmdroid ZIP.
Pulsamos Aceptar y nos mostrará un mapa, podemos mover zoom para ver mejor la zona que queremos seleccionar. Si hacemos doble click en un punto el mapa hará zoom y se centrará en ese punto, por ello para localizar la zona que queremos mostrar es mejor partir de un zoom que nos permita ver donde estamos e ir haciendo doble click hasta obtener la localización y zoom que nos interesa.
En el panel de la izquierda en la sección map source tenemos los mapas de los que podemos obtener los tiles, muchos son solo de una zona en concreto, yo para este ejemplo voy a utilizar OpenStreetMap4UMaps.eu que nos ofrece un mapa de todo el mundo.
Debajo del panel Map Source tenemos el panel Zoom Levels, aqui debemos seleccionar los niveles de zoom que queremos que tenga el mapa, cabe mencionar que cuantos más niveles de zoom mas tiles necesitaremos y por ende mas espacio ocuparán las imágenes.
Marcamos por ejemplo 11,12,13,14, y 15.
Ahora tenemos que seleccionar la porción del mapa que queremos descargar:
En la parte de arriba del mapa tenemos una barra de zoom que podemos mover para ver mejor la parte del mapa que queremos seleccionar. Con el ratón sobre el mapa seleccionamos un área.
Yo por ejemplo he seleccionado la zona de Bilbao, de está manera podré mostrar un mapa de Bilbao sin conexión.
Ahora debajo del panel Zoom Levels tenemos el panel Atlas content, aquí vamos a pulsar en el botón Add Selection lo que nos creará un Layer que si lo desplegamos vemos que contiene dentro los niveles de zoom que hemos seleccionado.
Bien, una vez que hemos seleccionado el área que queremos descargar tenemos que seleccionar Create Atlas y acto seguido comenzará a generar el atlas:
El atlas que se ha generado será un archico .zip con el nombre que le hemos dado al atlas en este caso mapa seguido de la fecha y hora en la que ha sido generado y lo encontrarás en la carpeta atlases dentro de la carpeta donde tengas Mobile Atlas Creator.
Bien, ahora vamos descomprimir el archivo zip que nos ha generado, al descomprimir vemos que dentro de la carpeta que nos ha creado hay otra carpeta llamada 4uMaps, vamos a cambiarle el nombre a la carpeta por simplemente mapa y a copiar esta carpeta dentro de la carpeta assets de nuestro proyecto:
Una vez que tenemos Los tiles copiados en la carpeta assets de nuestro proyecto ya podemos mostrarlos en el mapa.
Vamos a editar home.html e igual que hacíamos cuando creamos un mapa con google maps vamos a crear un div con id=»map» donde se renderizará el mapa:
Para crear un mapa con Leaflet utilizamos L.map(‘map’), ‘map’ es el id del div que hemos creado en la vista home.html y que es donde se va a renderizar el mapa.
Después con el metodo .setView le indicamos las coordenadas donde se tiene que posicionar el mapa, en este caso son las del centro de Bilbao.
Con L.tileLayer() añadimos al mapa una capa de tiles que va a contener los tiles del mapa que hemos descargado, como primer parámetro le pasamos la ruta donde se encuentran los tiles que puede ser una url si estamos utilizando un mapa online o la ruta donde se encuentrar alojados los archivos para mostrar el mapa offline como es el caso.
Si nos fijamos en la ruta vemos que es ‘assets/mapa/{z}/{x}/{y}.png’, z, x e y hacen referencia respectivamente al nivel de Zoom, tiles en el eje X y tiles en el eje Y.
Obtendrán el valor correspondiente automáticamente en función de la posición del mapa y al tener la carpeta de los tiles ordenada por estos parámetros no te tienes que preocupar.
Despues con L.marker creamos un marcador en en las coordenadas indicadas y le decimos que sea arratrable (draggable) y con .addTo(this.map) lo añadimos a nuestro mapa.
El código completo de home.ts quedaría así:
import{ Component } from '@angular/core';import{ NavController } from 'ionic-angular';import* as L from 'leaflet';@Component({selector:'page-home',templateUrl:'home.html'})exportclass HomePage {map;
constructor(publicnavCtrl: NavController){}
ionViewDidLoad(){this.map= L.map('map').
setView([43.2603479,-2.9334110],12);
L.tileLayer('assets/mapa/{z}/{x}/{y}.jpg',{maxZoom:15}).addTo(this.map);
L.marker([43.2603479,-2.9334110],{draggable:true}).addTo(this.map);}}
Ahora si ejecutamos nuestra app aunque no tengamos conexión a internet podemos mostrar un mapa:
Eso es todo por hoy, como siempre espero que os sea de utilidad.
