Hoy vamos a aprender cómo podemos añadir un visor de mapas en Flutter y además utilizando Open Street Map.
¿Por qué usar Open Street Map? A continuación voy a explicar la diferencia entre OpenStreetMap y Google Maps.
OpenStreetMap (OSM) y Google Maps son dos plataformas de mapas populares, y cada una tiene sus ventajas y desventajas. Aquí te proporcionaré una comparación de las ventajas de usar OpenStreetMap en lugar de Google Maps:
- Licencia abierta y datos abiertos: La ventaja más destacada de OSM es su licencia abierta y de uso gratuito. Los datos de OSM son de acceso libre y gratuito, lo que significa que puedes utilizarlos, modificarlos y compartirlos sin restricciones. En contraste, Google Maps tiene restricciones en el uso de sus datos, y el acceso a la API de Google Maps no es gratis y se termina pagando en función del uso.
- Colaboración comunitaria: OSM es un proyecto colaborativo global donde miles de voluntarios contribuyen a la creación y actualización de mapas. Esto resulta en mapas muy detallados y precisos, especialmente en áreas rurales o menos desarrolladas, donde Google Maps puede ser menos completo.
- Personalización y control: Al usar OSM, tienes un mayor control sobre la presentación de los mapas. Puedes personalizar los mapas para que se adapten a tus necesidades específicas. Con Google Maps, estás limitado a las opciones de personalización proporcionadas por Google.
- No requiere una cuenta de usuario: Para utilizar OSM, generalmente no necesitas una cuenta de usuario, lo que simplifica el proceso de acceso y uso de los mapas. En Google Maps, a menudo es necesario crear una cuenta de Google para acceder a sus servicios.
- Privacidad: OSM no recopila información personal de los usuarios, lo que puede ser una ventaja en términos de privacidad en comparación con Google Maps, que está vinculado a cuentas de Google y puede rastrear la ubicación de los usuarios.
- Disponibilidad offline: Tanto OSM como Google Maps ofrecen la capacidad de usar mapas sin conexión, pero OSM puede ser una opción más flexible para aquellos que desean descargar mapas específicos y regiones sin restricciones.
- Uso en aplicaciones de código abierto: OSM se utiliza comúnmente en aplicaciones de código abierto, lo que facilita la integración de mapas personalizados en proyectos de código abierto o aplicaciones propias.
- Menor dependencia de terceros: Al usar OSM, no dependes de un único proveedor de mapas. En cambio, tienes acceso a una gran cantidad de fuentes y herramientas que utilizan datos de OSM, lo que puede ser beneficioso en términos de resiliencia y flexibilidad.
Una vez hemos visto las diferencias entre OSM y Google Maps, vamos a pasar a la integración.
Para la integración del sistema vamos a usar flutter_map (https://pub.dev/packages/flutter_map)
Utilizamos la versión 6.0.1
Añadimos en nuestro pubspec.yml
flutter_map: 6.0.1
Y además añadimos la librería de latlong2 en este caso la 0.9.0
latlong2: 0.9.0
*Como extra, podemos instalar la librería flutter_map_cancellable_tile_provider (https://github.com/fleaflet/flutter_map_cancellable_tile_provider) en versión 1.0.0. Esta librería evitará llamadas innecesarias a la hora de mostrar los mapas.
flutter_map_cancellable_tile_provider: ^1.0.0
Una vez añadidas todas las librerías realizamos este comando:
flutter pub get
Y se instalan.
Ahora vamos a crear el widget de mapa que podremos utilizar en cualquiera de nuestras pantallas.
Para ello creamos un mapa.dart
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
class MapScreen extends StatelessWidget {
final double latitud;
final double longitud;
MapScreen({Key? key, required this.latitud, required this.longitud})
: super(key: key);
@override
Widget build(BuildContext context) {
if (latitud == 0 && longitud == 0)
return Center(child: Text("No hay ubicación"));
return FlutterMap(
options: MapOptions(
initialCenter: LatLng(latitud, longitud),
initialZoom: 16.0,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
additionalOptions: {
'id': 'mapbox.streets',
},
),
RichAttributionWidget(attributions: [
TextSourceAttribution(
'© OpenStreetMap contributors',
textStyle: TextStyle(color: Colors.black),
),
]),
MarkerLayer(
markers: [
Marker(
width: 80.0,
height: 80.0,
point: LatLng(latitud, longitud), // Coordenadas del marcador
child: GestureDetector(
onTap: () {
print("Marcador pulsado");
},
child: Container(
child: Icon(
Icons.location_on, // Icono del marcador
color: Colors.teal, // Color del marcador
size: 65.0, // Tamaño del marcador
),
),
),
),
],
),
],
);
}
}
Ahora voy a explicar el código.
Hemos creado un Widget que va a recibir latitud y longitud (por defecto se inicializan a 0 y luego se obtienen de dónde queramos, puede ser del propio usuario o de un API).
Hemos añadido un texto de atribución de Open Street Maps. Es importante añadirlo, ya que estamos utilizando este servicio.
Y finalmente he añadido un Marker para mostrar la posición del punto o usuario en el mapa.
Como extra, este Marker se puede pulsar.
Para utilizarlo en nuestras vistas solo tenemos que añadirlo de la siguiente forma:
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: SizedBox(
height: 500,
child: MapScreen(
latitud: latitud,
longitud: longitud,
),
//Map:
),
),
Lo añadimos dentro de una capa y podemos darle una altura fija para que no tenga problemas al pintarse en la pantalla.
Le pasamos latitud y longitud, recuerda que las inicializamos a 0 para que funcione la lógica de mostrar «No hay ubicación»
double latitud = 0; double longitud = 0;
Finalmente, este es el resultado:
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.