flutter_map Docs
Project Links💝 Support Us
v8
v8
  • flutter_map
  • Why & How
    • 🌟Showcase & Case Studies
    • ❔How Does It Work?
      • Raster vs Vector Tiles
    • 👀Demo & Examples
  • Getting Started
    • 🚀What's New In v8?
    • Installation
  • Usage
    • Base Widget
      • Unbounded Horizontal Scrolling
    • Options
      • Interaction Options
      • Custom CRSs
    • Layers
    • Programmatic Interaction
      • Controllers & Cameras
      • External Custom Controllers
      • Listen To Events
    • Full API Reference
  • Layers
    • Tile Layer
      • Tile Providers
      • Built-In Caching
    • Marker Layer
    • Polygon Layer
    • Polyline Layer
    • Circle Layer
    • Overlay Image Layer
    • Attribution Layer
    • Layer Interactivity
      • Hit Testing Behaviour
  • Tile Servers
    • Using OpenStreetMap (direct)
    • Using Mapbox
    • Using Google Maps
    • Using Tracestrack
    • Using Thunderforest
    • Using Stadia Maps
    • Using Lima Labs
    • Using Bing Maps
    • Offline Mapping
    • Other Options
  • Plugins
    • Plugins List
    • Creating A Plugin
      • Creating New Tile Providers
      • Creating New Layers
  • Thanks
    • 💝Supporters
    • ✏️Credits & Contributing
Powered by GitBook

© flutter_map Authors & Maintainers

On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Why & How

How Does It Work?

A high level overview for those new to 'web' maps

PreviousShowcase & Case StudiesNextRaster vs Vector Tiles

Last updated 5 months ago

Was this helpful?

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 and other map features - not a map itself.

1

👀 Tile Layer

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 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.

2

🤩 More Layers... More... More...

You can put any other kind of layer (or Widget) on top of your TileLayer. You can even put another TileLayer in! See our catalogue, directly in Flutter, or use one of the excellent !

3

🛠️ Configure The Map

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.

4

🎮 Control The Map

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 or 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.

❔
😄
'tiled & WMS web' maps
Slippy Maps
make your own layers
community-maintained plugins
leaflet.js
OpenLayers
flutter_map
👀Demo & Examples
Layers
https://commons.wikimedia.org/wiki/File:XYZ_Tiles.png