[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-mappe-interattive-in-flutter-con-flutter-map-e-openstreetmap":3,"comments-article-mappe-interattive-in-flutter-con-flutter-map-e-openstreetmap":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},39,"Mappe interattive in Flutter con flutter_map e OpenStreetMap","mappe-interattive-in-flutter-con-flutter-map-e-openstreetmap","Integra mappe personalizzabili e gratuite nelle tue app Flutter usando flutter_map e i tile di OpenStreetMap: marker, cluster, layer e geolocalizzazione in una guida pratica.","## Perché flutter_map\n\nQuando si parla di mappe in Flutter, la scelta più comune ricade su Google Maps. Tuttavia, `google_maps_flutter` richiede una chiave API, comporta costi al superamento delle quote e presenta limiti nella personalizzazione. Il pacchetto `flutter_map` è un'alternativa open source, gratuita e altamente flessibile, basata su un'architettura a layer ispirata a Leaflet.js.\n\nÈ scritto interamente in Dart, funziona su tutte le piattaforme supportate da Flutter (mobile, web, desktop) e permette di usare qualsiasi provider di tile, inclusi i tile gratuiti di OpenStreetMap.\n\n## Installazione\n\nAggiungi le dipendenze al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  flutter_map: ^7.0.2\n  latlong2: ^0.9.1\n  geolocator: ^13.0.1\n```\n\nIl pacchetto `latlong2` fornisce la classe `LatLng` per gestire le coordinate, mentre `geolocator` ci servirà per la posizione dell'utente.\n\n## Una mappa di base\n\nCreare una mappa richiede pochissimo codice. Il widget principale è `FlutterMap`, configurato tramite `MapOptions` e popolato con una lista di `children` (i vari layer).\n\n```dart\nimport 'package:flutter\u002Fmaterial.dart';\nimport 'package:flutter_map\u002Fflutter_map.dart';\nimport 'package:latlong2\u002Flatlong.dart';\n\nclass MappaBase extends StatelessWidget {\n  const MappaBase({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return FlutterMap(\n      options: const MapOptions(\n        initialCenter: LatLng(41.9028, 12.4964), \u002F\u002F Roma\n        initialZoom: 13,\n      ),\n      children: [\n        TileLayer(\n          urlTemplate: 'https:\u002F\u002Ftile.openstreetmap.org\u002F{z}\u002F{x}\u002F{y}.png',\n          userAgentPackageName: 'com.esempio.miaapp',\n        ),\n      ],\n    );\n  }\n}\n```\n\n> **Importante:** l'uso dei tile pubblici di OpenStreetMap è soggetto alla [Tile Usage Policy](https:\u002F\u002Foperations.osmfoundation.org\u002Fpolicies\u002Ftiles\u002F). Per app in produzione con molto traffico è consigliato un provider dedicato (come MapTiler o Thunderforest) o un server di tile self-hosted.\n\nRicorda inoltre di impostare sempre `userAgentPackageName` con l'identificativo della tua app, come richiesto dalle policy.\n\n## Aggiungere i marker\n\nPer mostrare punti di interesse si usa il `MarkerLayer`, che accetta una lista di `Marker`. Ogni marker definisce la posizione e un widget da disegnare.\n\n```dart\nMarkerLayer(\n  markers: [\n    Marker(\n      point: const LatLng(41.9028, 12.4964),\n      width: 40,\n      height: 40,\n      child: const Icon(\n        Icons.location_on,\n        color: Colors.red,\n        size: 40,\n      ),\n    ),\n    Marker(\n      point: const LatLng(41.8902, 12.4922), \u002F\u002F Colosseo\n      width: 40,\n      height: 40,\n      child: GestureDetector(\n        onTap: () => debugPrint('Marker toccato!'),\n        child: const Icon(Icons.place, color: Colors.blue),\n      ),\n    ),\n  ],\n)\n```\n\nOgni marker è un widget a tutti gli effetti: puoi renderlo interattivo con un `GestureDetector`, animarlo o mostrarci dentro un'immagine.\n\n## Controllare la mappa a livello programmatico\n\nPer spostare la mappa, cambiare zoom o centrarla su una posizione, si usa il `MapController`.\n\n```dart\nclass MappaControllata extends StatefulWidget {\n  const MappaControllata({super.key});\n\n  @override\n  State\u003CMappaControllata> createState() => _MappaControllataState();\n}\n\nclass _MappaControllataState extends State\u003CMappaControllata> {\n  final _mapController = MapController();\n\n  void _vaiAMilano() {\n    _mapController.move(const LatLng(45.4642, 9.1900), 12);\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      floatingActionButton: FloatingActionButton(\n        onPressed: _vaiAMilano,\n        child: const Icon(Icons.navigation),\n      ),\n      body: FlutterMap(\n        mapController: _mapController,\n        options: const MapOptions(\n          initialCenter: LatLng(41.9028, 12.4964),\n          initialZoom: 13,\n        ),\n        children: [\n          TileLayer(\n            urlTemplate: 'https:\u002F\u002Ftile.openstreetmap.org\u002F{z}\u002F{x}\u002F{y}.png',\n            userAgentPackageName: 'com.esempio.miaapp',\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n## Mostrare la posizione dell'utente\n\nCombinando `geolocator` con la mappa possiamo centrare la vista sulla posizione corrente dell'utente. Ricorda di configurare i permessi in `AndroidManifest.xml` e `Info.plist`.\n\n```dart\nFuture\u003Cvoid> _centraSuUtente() async {\n  \u002F\u002F Verifica e richiesta dei permessi\n  LocationPermission permission = await Geolocator.checkPermission();\n  if (permission == LocationPermission.denied) {\n    permission = await Geolocator.requestPermission();\n    if (permission == LocationPermission.denied) return;\n  }\n\n  final posizione = await Geolocator.getCurrentPosition();\n  _mapController.move(\n    LatLng(posizione.latitude, posizione.longitude),\n    15,\n  );\n}\n```\n\n## Disegnare percorsi e aree\n\nOltre ai marker, `flutter_map` supporta `PolylineLayer` per tracciare percorsi e `PolygonLayer` per evidenziare aree geografiche.\n\n```dart\nPolylineLayer(\n  polylines: [\n    Polyline(\n      points: const [\n        LatLng(41.9028, 12.4964),\n        LatLng(41.8902, 12.4922),\n        LatLng(41.8986, 12.4769),\n      ],\n      strokeWidth: 4,\n      color: Colors.deepPurple,\n    ),\n  ],\n)\n```\n\nQuesto è utilissimo per app di navigazione, tracciamento di attività sportive o delimitazione di zone.\n\n## Gestire tanti marker con il clustering\n\nQuando i marker sono centinaia, mostrarli tutti insieme rende la mappa illeggibile e lenta. Il pacchetto aggiuntivo `flutter_map_marker_cluster` raggruppa automaticamente i marker vicini in cluster che si espandono allo zoom.\n\n```yaml\ndependencies:\n  flutter_map_marker_cluster: ^1.4.0\n```\n\n```dart\nMarkerClusterLayerWidget(\n  options: MarkerClusterLayerOptions(\n    maxClusterRadius: 45,\n    markers: listaMarker,\n    builder: (context, markers) {\n      return CircleAvatar(\n        backgroundColor: Colors.blue,\n        child: Text(markers.length.toString()),\n      );\n    },\n  ),\n)\n```\n\n## Best practice\n\n- **Rispetta le policy dei tile provider**: per la produzione valuta un servizio a pagamento o self-hosted, evitando di sovraccaricare i server gratuiti di OSM.\n- **Imposta i limiti di zoom** con `minZoom` e `maxZoom` nelle `MapOptions` per un'esperienza coerente.\n- **Usa il clustering** quando i marker superano qualche decina.\n- **Gestisci la cache dei tile** con pacchetti come `flutter_map_tile_caching` per un uso offline e per ridurre il consumo di dati.\n- **Non abusare dei rebuild**: aggiorna i layer solo quando necessario per mantenere fluida l'esperienza.\n\n## Conclusioni\n\n`flutter_map` è una soluzione matura e potente per integrare mappe nelle app Flutter senza vincoli di licenza o costi obbligatori. La sua architettura a layer lo rende estremamente componibile, permettendo di sovrapporre marker, percorsi, aree e overlay personalizzati. Per la maggior parte dei progetti che non richiedono funzionalità proprietarie di Google Maps, rappresenta la scelta più flessibile ed economica.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002Fbe047641-7396-4d87-a2f7-0e15f9d54b36.jpg",null,"published","2026-07-13T04:00:46+00:00","flutter_map: mappe con OpenStreetMap in Flutter","Guida pratica a flutter_map: integra mappe OpenStreetMap gratuite in Flutter con marker, cluster, percorsi e geolocalizzazione.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219601916]