flutter_map

A versatile mapping package for Flutter. Simple and easy to learn, yet completely customizable and configurable, it's the best choice for mapping in your Flutter app.

Feature Highlights

🗺️ No more vendor lock-in

We natively support any static raster* tile server, including from a web server or even from the local file system or app asset store. Use any service, or your own, but always be free to change! *Vector tiles are supported with a community-maintained plugin.

💪 Stress free setup & easy to use

Migrating from a commercial library (such as Google Maps) has never been easier! No more complex platform-specific setup, no more difficult API keys: just add a widget and you're done. Our documentation and 3 layers of support are here to get your app using the best mapping library for Flutter.

🧩 Wide ecosystem of plugins

In the event that flutter_map doesn't natively contain something you need, just check to see if there's a community maintained plugin that does what you need!

➕ Customize and expand endlessly

Add interactive and highly customizable polygons, polylines, and markers (which support widget children) to your map easily and quickly. And because we're 100% Flutter, it's easy to add your own stuff on top without messing around in platform views.

Don't just take it from us - we really are the best mapping library available for Flutter!

Check out this independent thesis by Sergey Ushakov, which compares us to google_maps_flutter & mapbox_maps_flutter. Guess who's the * ;)

Original: https://www.theseus.fi/bitstream/handle/10024/820026/Ushakov_Sergey.pdf Archive: https://archive.org/details/incorporating-maps-into-flutter-a-study-of-mapping-sdks-and-their-integration-in

Code Demo

Setting up an interactive and map is simpler than making your lunch-time coffee! It can be accomplished in just under 30 lines and a minute or two to install.

This code snippet demonstrates everything you need for a simple map (in just over 20 lines!), but of course, FM is capable of much more than just this, and you could find yourself lost in the many options available and possibilities opened!

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

@override
Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      initialCenter: LatLng(51.509364, -0.128928), // Center the map over London
      initialZoom: 9.2,
    ),
    children: [
      TileLayer( // Display map tiles from any source
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // OSMF's Tile Server
        userAgentPackageName: 'com.example.app',
        maxNativeZoom: 19, // Scale tiles when the server doesn't support higher zoom levels
        // And many more recommended properties!
      ),
      RichAttributionWidget( // Include a stylish prebuilt attribution widget that meets all requirments
        attributions: [
          TextSourceAttribution(
            'OpenStreetMap contributors',
            onTap: () => launchUrl(Uri.parse('https://openstreetmap.org/copyright')), // (external)
          ),
          // Also add images...
        ],
      ),
    ],
  );
}

Get Help

Not quite sure about something? No worries, we're here to help!

• Check the FAQs below, and double check the documentation

• Then, for bug reports & feature requests: check for previous issues, then ask in GitHub Issues

• Then, for support & everything else: ask in flutter_map Discord server or GitHub Discussions

We're a community maintained project and the maintainers would greatly appriciate any help in implementing features and fixing bugs! Feel free to jump in: https://github.com/fleaflet/flutter_map/blob/master/CONTRIBUTING.md.

Please remember that we are volunteers and cannot gurantee support. The standard Code of Conduct is here to keep our community a safe and friendly place for everyone: https://github.com/fleaflet/flutter_map/blob/master/CODE_OF_CONDUCT.md.

FAQs

We get quite a lot of similar questions, so please check if your question is here before you ask!

How Does It Work?

How can I use a custom map style? How can I prevent POI/labels rotating when the map rotates? How can I remove certain POI/labels from the map?

Unfortunately, this library cannot provide this functionality. It has no control over the tiles displayed in the TileLayer. This is a limitation of the technology, not this library.

This is because raster tiles are just images generated by a 3rd party tile server (dictated by your URL template), and therefore cannot be changed by the library that displays the tiles. Filters can be applied to the entire tile, such as an emulated dark mode, but these effects do not look great.

However, tilesets can be styled. This is the most effective way of using custom styles. These methods may help you with this:

• You may wish to use a commercial service like Mapbox Studio, which allows you to style multiple tilesets. See Using Mapbox.

• Alternatively, you can experiment with vector tiles. These are not pre-rendered, and so allow any style you desire to be applied on the fly. See Vector Tiles.

• Your last option is to serve tiles yourself. See Other Options.

How can I route a user between two locations? Why does the Polyline only go in a straight line between two points?

See Routing/Navigation.

How can I add a Marker where the user's location is? How can I center the map on the user's location?

This is beyond the scope of flutter_map. However, you can use the community maintained plugin 'flutter_map_location_marker' to do this.

Alternatively, use the 'location' and 'compass' packages to generate a stream of the user's location and heading, and feed that to a Marker using a StreamBuilder.

Why don't any map tiles appear?

If no tiles are appearing (if tiles are appearing on some zoom levels but not others, see below), try performing the following debugging steps:

1. Is the templateUrl or WMS configuration correct (to the best of your knowledge)?

2. Have you followed the platform specific setup (Additional Setup) instructions (if applicable for your platform)?

3. Check the Network tab either in Flutter DevTools or the browser DevTools to see why/if the tile requests are failing.

4. If none of those solved the issue, check if there are any widgets covering the map, or any errors in the console (particularly in release mode)?

Why does the map disappear/go grey when I zoom in far? Why does the map stop zooming in even though I know there are more zoom levels?

If tiles are disappearing when you zoom in, the default grey background of the FlutterMap widget will shine through. This usually means that the tile server doesn't support these higher zoom levels.

If you know that there are more tiles available further zoomed in, but flutter_map isn't showing them and scaling a particular zoom level instead, it's likely because the TileLayer.maxNativeZoom property is set too low (it defaults to 19).

To set/change the zoom level at which FM starts scaling tiles, change the TileLayer.maxNativeZoom property. To set/change the max zoom level that can actually be zoomed to (hard limit), use MapOptions.maxZoom.

How can I make the map 3D, or view it as a globe?

Unfortunately, this isn't supported, partially due to lack of time on the maintainer's part to implement this feature, partially due to technical limitations. PRs are welcome!