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.

Read the API documentation to find out all the available options
TileLayer(
  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
triangle-exclamation
circle-info

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.

Tile Providerschevron-right

userAgentPackageName

circle-check

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.

Last updated

Was this helpful?