Tile Layer

The basis of any map is a TileLayer, which displays square raster images in a continuous grid, sourced from the Internet or a local file system.

flutter_map supports WMS Usage, but most map tiles are accessed through the CARTO/XYZ/Slippy Map standard, where the mapping library (flutter_map) fills in XYZ placeholders in a URL.

TileLayer class - flutter_map.plugin_api library - Dart API

Read the API documentation to find out all the available options

TileLayer(
  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  : 'dev.fleaflet.flutter_map.example',
),

You must comply to your tile server's ToS. Failure to do so may result in you being banned from their services.

The OpenStreetMap Tile Server (as used above) can be found here. Other servers may have different terms.

This package is not responsible for your misuse of any tile server.

It is possible to use more than one tile layer, and can be used with transparency/opacity.

The children list works like the children of a Stack: last is on top.

Tile Providers

Need more control over the source of tiles, or how tiles are fetched? You'll need to change the TileProvider.

pageTile Providers

userAgentPackageName

Always specify the userAgentPackageName argument to avoid being blocked by your tile server.

It should be passed the application's package name, such as 'com.example.app'. This is important to avoid blocking by tile servers due to high-levels of unidentified traffic. If no value is passed, it defaults to 'unknown'.

This is passed through to the NetworkTileProvider (if in use) in a suitably formatted string, where it forms the 'User-Agent' header, overriding any custom user agent specified in the HTTP client.

To override this behaviour, specify a 'User-Agent' key in the NetworkTileProvider.headers property.

This is all ignored on the web, where the 'User-Agent' header cannot be changed due to a limitation of Dart/browsers.