flutter_map: choosing the right map tiles for your app

flutter_map is Flutter’s most popular, non-commercial map library. It’s easy to use, cross-platform and has no vendor lock-in.

flutter_map supports any raster tile set and is easy to switch to from other mapping providers.

It’s a popular, customisable alternative to Google Maps.

Source your own tiles

To create a map with flutter_map, you’ll need to source your own map tiles. These are the layer of the map that shows ‘squares’ with cartographic information. They are loaded dynamically depending on what your user wants to see and at what zoom level.

flutter_map doesn’t promote specific map styles or tiles that you should use. You can choose your own tile provider or create your own custom ones.

Once you’ve added your choice of map tiles, you can add layers on top of it, widgets, or even other map tile layers.

flutter_map doesn’t endorse specific map tile providers, but it does helpfully provide a list of possible options as a menu item on the homepage.

These tile providers are quite different in the type of service they offer, how much they cost, as well as the style of their maps.

Tile providers with their own SDK solutions

Tile providers that bundle their own SDKs, such as Mapbox and Google Maps, are often expensive – or impractical – for customers using third-party libraries like flutter_map.

Their main focus is customers using their own proprietary solution and they charge accordingly.

flutter_map and OpenStreetMap

You can use the OpenStreetMap Foundation tile servers directly or choose a company that processes raw OpenStreetMap data to create their own curated map styles.

OpenStreetMap data is free to use for everyone. However, its public tile servers are not.

Read the tile usage policy for OSM.

As a rough guide, you should use an alternative to the OpenStreetMap tile servers for medium to high volume apps or web apps.

Due to excessive usage from flutter_map users, the OpenStreetMap Foundation have blocked requests with one of the following configurations:

• No specified TileLayer.userAgentPackageName (recommended setup) & no manually specified “User-Agent” header
• userAgentPackageName set to ‘com.example.app’ (or equivalent manual config)

Map tile providers & OpenStreetMap data

A number of map tile providers, like our company Thunderforest, use raw OpenStreetMap data. We process it into our spatial databases, which we then use to create hand-curated maps.

We’re the team behind the popular OpenCycleMap, which is based on OpenStreetMap data. We also provide maps for transport (light and dark mode), outdoors, and landscape, as well as custom maps.

Using a map tile provider means that you get all the upsides of OpenStreetMap (which we love and support), but in a way that is suitable for commercial usage.

Creating your own custom map tiles

You can create your own tiles, although it is challenging (we speak from experience).

Switch2OSM has some great advice if you want to have a go.

You’ll need familiarity with Linux, a high-tech computer and an understanding of complicated hosting requirements.

You should also set aside time for investigating the quirks of OpenStreetMap. For example, the convention in OpenStreetMap is to use the ‘highways’ tag for all roads, paths and tracks, including hiking trails, bridleways, racing circuits, and so on. However, if you just use the highway tag to try to render all the roads, then all the footpaths will look like roads too. Not ideal!

flutter_map code examples

View a code demo of a flutter_map

However, be aware that this uses OpenStreetMap public tile servers, in a way that wouldn’t be compliant with its terms of use if put into production.

You can also follow our tutorial at Thunderforest, which shows a slightly modified flutter_map set up.

View flutter_map tutorial with example

flutter_map and vector tiles

Due to various complications, flutter_map does not natively support vector tiles.

Vector tiles can be used with a community maintained plugin. However:

“Using vector tiles may significantly cut FPS and introduce jank, and that’s because of the amount of UI work that must be performed on the main thread.” – flutter_map Docs

We understand the challenges! At Thunderforest, we’ve been working hard on our client-side maps.

---

---