# flutter\_map
[](https://pub.dev/packages/flutter_map) [](https://github.com/fleaflet/flutter_map/stargazers) [](https://pub.dev/packages/flutter_map/score) [](https://github.com/fleaflet/flutter_map/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) [](https://github.com/fleaflet/flutter_map/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc)
## Feature Highlights
| | |
|---|
| πΊοΈ Supports any* map style | We natively support any static raster tile server, including from a web server or even from the local file system or app asset store.
No more vendor lock-in! | |
| πͺ Stress-free setup and use | Migrating from a commercial library such as Google Maps has never been easier! No more complex platform-specific setup, no more API keys: just add a widget and you're done. | |
| 𧩠Wide ecosystem of plugins | In the unlikely 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! | |
| β Add other map features easily | Add polygons, polylines, and markers/pins to your map easily and quickly. Markers support displaying any widget you might want. | |
How does flutter_map compare to other mapping libraries?
This usually refers to libraries such as 'mapbox\_gl' and 'google\_maps\_flutter'. In most ways, it is better, in some it is worse.
flutter\_map wins on:
* Less vendor lock-in (and potentially reduced costs)\
You're not locked into a particular tile server with us - choose from hundreds of options, or build your own!
* Customizability & extensibility\
Add all sorts of layers to display custom widgets and data on top of your map, and choose from flutter\_map's many community maintained plugins to add even more functionality!
* Ease of use/setup\
We don't require any API keys or platform specific setup (other than enabling the Internet permission!), so you can get started quicker, and make changes without fear of breaking your release application.
* Support quality and frequency\
Most questions are answered and resolved within 12-24 hours, thanks to our dedicated maintainers and community.
However, alternatives may win on:
* Performance\*\
flutter\_map's performance is very adequate for the vast majority of applications, and many big businesses use FM to provide maps in their Flutter app.\
However, if you're using high-thousands of `Markers` or `Polygons` and such like, alternatives may win, purely because they use platform views and GL, and so can do calculations outside of Dart.
* ... and that's pretty much it π
## Demonstration
Setting up an interactive and compliant[^1] 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),
initialZoom: 9.2,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'com.example.app',
),
RichAttributionWidget(
attributions: [
TextSourceAttribution(
'OpenStreetMap contributors',
onTap: () => launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
),
],
),
],
);
}
## Get Help
Not quite sure about something? No problem. Please get in touch via any of these methods, and we'll be with you as soon as possible. Please remember that we are volunteers, so we cannot guarantee (fast) support.
* For bug reports & feature requests: check the [#faqs](#faqs "mention") then [GitHub Issues](https://github.com/fleaflet/flutter_map/issues)
* For support & everything else: check the [#faqs](#faqs "mention") then [flutter\_map Discord server](https://discord.gg/BwpEsjqMAH)
{% hint style="info" %}
Due to time shortages, wait times for feature request implementations are currently extremely long and may not happen at all.
We'd love to have your contributions to add your own or others' pull requests!
{% endhint %}
### FAQs
We get quite a lot of similar questions, so please check if your question is here before you ask!
{% content-ref url="getting-started/explanation" %}
[explanation](https://docs.fleaflet.dev/v6/getting-started/explanation)
{% endcontent-ref %}
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](https://docs.fleaflet.dev/v6/tile-servers/using-mapbox "mention").
* 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](https://docs.fleaflet.dev/v6/getting-started/explanation/raster-vs-vector-tiles#vector-tiles "mention").
* Your last option is to serve tiles yourself. See [other-options](https://docs.fleaflet.dev/v6/tile-servers/other-options "mention").
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](https://docs.fleaflet.dev/v6/layers/polyline-layer#routing-navigation "mention").
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'](https://github.com/tlserver/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 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!
[^1]: (includes necessary attribution)
[^2]: As simple as just another widget...
[^3]: Plenty of customisable options available
[^4]: Choose from a variety of features to display on your map
[^5]: Connect to any\* map server/provider
[^6]: Stylish attribution required? No problem!
[^7]: *Requires url\_launcher to be installed separately*