A high level overview for those new to 'web' maps
Unlike other popular mapping solutions, flutter_map doesn't come with an opinion on the best map style/tiles to use, so you'll need to bring your own tiles - either using a service, such as those listed in Tile Servers, or by creating and using your own custom ones!
We then allow you to add more on top of these tiles, and control and customize as far as you need.
It's a client to display 'tiled & WMS web' maps and other map features - not a map itself.
The basis of a map is the layer which shows square images, known as 'tiles'. When placed adjacent, this creates a single map! This can be panned (moved), rotated, and zoomed, to load new tiles dynamically. To show more detail, more images of the same dimensions are loaded in place.
There's loads of ways to source (see Tile Servers), store (Raster vs Vector Tiles), and reference (eg. XYZ vs WMS) tiles! We support most of them, except vector tiles. This documentation primarily uses examples referring to Slippy Maps implemented with XYZ referencing, but we also support many other kinds of maps.
However, you don't need to worry about most of this! Just follow the instructions from your source and it's easy to figure out how to use them in flutter_map.
See Tile Layerfor more information.
You can put any other kind of layer (or Widget) on top of your TileLayer. You can even put another TileLayer in! See our Layers catalogue, make your own layers directly in Flutter, or use one of the excellent community-maintained plugins!
Once it looks how you imagined, you need it to act like you imagined. flutter_map provides comprehensive customizability for gesture/interactivity control & initial positioning. See Options for more info.
You can also control the map programmatically using a simple controller pattern. See Programmatic Interaction for more info.
Most map client libraries will work in a similar way, so if you've used leaflet.js or OpenLayers before, you'll be right at home .
See the code demo on the landing page to see how easy it is and how it all fits together in code, and see what's possible in our example app.
It is important to note that 'flutter_map' only supports raster tiles natively. Vector tiles can be used with a community maintained plugin.
This is described in more detail at the bottom of this page.
There are 2 main types of tiles a server can serve: raster and vector; each has their own advantages and drawbacks. This page is designed to help you choose a type for your app, and help you use vector tiles if you choose to.
Raster tiles are the 'older' type of tile, and are raster images (usually .png or .jpg). These tiles are good because they can render quickly and easily, can be viewed without special software, and are readily available from most mapping services. As such, this makes them the popular choice for beginners.
However, raster tiles cannot be easily themed: a theme needs a whole new set of map tiles. This makes apps using light and dark themes have mismatching maps. As well as this, raster tiles usually have larger file sizes meaning slower download times, and they can become blurred/pixelated when viewed at a larger scale: a problem for users when zooming between zoom levels. Another issue is that shapes/text inside tiles cannot be rotated, hence the name 'static tiles': therefore, rotating the map will not rotate the name of a road, for example.
Vector tiles can be considered the 'newer' standard. These images might contain a specialised format (such as .pbf) dictating the mathematics and coordinates used to draw lines and shapes. Because these tiles are drawn at render time instead of at request/server time, theming can be used to make the map fit in better with an app's theme. The math-based image means that the images/tiles can be scaled without any loss of clarity.
However it does add complexity to the rendering process as each element needs to be parsed and painted individually, meaning an impact to performance. Text elements and certain shapes can also be rotated (unlike raster tiles) to match the user's orientation, not the orientation of the map; but calculating this rotation needs to be done every frame, meaning an even larger impact on performance.
Due to the complications mentioned above, 'flutter_map' does not natively support vector tiles. However, vector tiles can be used with a to do this.
Worried about vector tiles performance?
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.
The community and FM maintainers are looking to improve the situation!
Keep up to date and subscribe to the issue: .
