flutter_map Docs
Project Links💝 Support Us
v6
v6
  • flutter_map
  • 🏗️Showcase
  • 💝Supporters
  • ✏️Credits & Contributing
  • Getting Started
    • How Does It Work?
      • Raster vs Vector Tiles
    • Demonstration
    • Installation
    • Examples
    • Migrating To v6
  • Usage
    • Base Widget
    • Options
      • Interaction Options
    • Layers
    • Programmatic Control
      • Control Camera
      • Get Camera
      • Listen To Events
    • Full API Reference
  • Layers
    • Tile Layer
      • Tile Providers
      • WMS Usage
    • Marker Layer
    • Polygon Layer
    • Polyline Layer
    • Circle Layer
    • Overlay Image Layer
    • Attribution Layer
  • Tile Servers
    • Using Mapbox
    • Using Thunderforest
    • Using Stadia Maps
    • Using Bing Maps
    • Offline Mapping
    • Other Options
  • Plugins
    • Plugins List
    • Creating A Plugin
      • Creating New Tile Providers
      • Creating New Layers
Powered by GitBook

© flutter_map Authors & Maintainers

On this page
  • Performance Recommendations
  • Sticking With PolylineLayer
  • Using A Separate TileLayer
  • Routing/Navigation
  • Converting Formats

Was this helpful?

Export as PDF
  1. Layers

Polyline Layer

PreviousPolygon LayerNextCircle Layer

Last updated 1 year ago

Was this helpful?

You can add lines to maps by making them out of individual coordinates using PolylineLayer and Polylines.

PolylineLayer(
  polylines: [
    Polyline(
      points: [LatLng(30, 40), LatLng(20, 50), LatLng(25, 45)],
      color: Colors.blue,
    ),
  ],
),

Performance Recommendations

Excessive use of polylines may create performance issues. There are two options to attempt to improve performance.

We're working on improvements right now to make your app even more buttery smooth! Stay up to date with the latest performance improvements by joining our Discord server.

Sticking With PolylineLayer

It is easiest to try to squeeze as much performance out of Polylines as possible. However, this may not always be the best option.

Consider using both of the methods below:

  • Split long lines into individual Polylines at regular intervals, then enable polylineCulling, in order to prevent the calculation and rendering of Polylines outside of the current viewport.

The first method will improve performance when zoomed in, as more Polylines will be able to be culled, whilst the second method will improve performance when zoomed out, without impacting visuals (when done well).

Using A Separate TileLayer

If using PolylineLayer as above still does not reach satisfactory performance, then the best option may be to render a custom tile set. For example, this may be necessary when attempting to draw a number of long-distance routes, or other widespread dataset.

We're unable to provide support with this method, and this may become outdated.

If you have raster tiles, you're all set to serve as normal/as you choose. More commonly though, you'll have vector tiles at this step, as with 'tippecanoe', so you'll need to do one of the following things:

  • Give the MBTiles/vector tiles to the vector map plugin

If you have raster tiles, you're all set to serve as normal.

To provide the tiles to the users within flutter_map, see Tile Providers.

Routing/Navigation

Routing is out of scope for 'flutter_map'. However, if you can get a list of coordinates from a 3rd party, then you can use polylines to show them!

Converting Formats

You may have a polyline with 'Google Polyline Encoding' (which is a lossy compression algorithm to convert coordinates into a string and back). These are often returned from routing engines, for example. In this case, you'll need to decode the polyline to the correct format first, before you can use it in a Polyline's points argument.

unpack_polyline.dart
import 'package:latlong2/latlong.dart';
export 'package:google_polyline_algorithm/google_polyline_algorithm.dart'
    show decodePolyline;

extension PolylineExt on List<List<num>> {
  List<LatLng> unpackPolyline() =>
      map((p) => LatLng(p[0].toDouble(), p[1].toDouble())).toList();
}

You can then use the package and the above snippet by doing:

import 'unpack_polyline.dart';

decodePolyline('<encoded-polyline>').unpackPolyline(); // Returns `List<LatLng>` for a map polyline

Simplify the polyline by reducing the number of points within it, in order to reduce raster and calculation times. It is recommended to do this to varying degrees and resolutions based on the current zoom level. It may be possible to use an external Flutter library called .

The first step is to render the desired lines into a tileset with a transparent background - is commonly used to do this, and generates vector-format MBTiles.

Try to convert it to raster tiles all in one shot, and if necessary, use a tool like to extract the raster .mbtiles into a slippy map tree

Serve the tiles via something like , which provides an on-the-fly rasterizer

Good open source options that can be self-hosted include (which includes a public demo server) and . You can also use a commercial solution such as Mapbox or Google Maps - these can often give more accurate/preferable results because they can use their traffic data when routing.

One way to accomplish this is to use another Flutter library called , together with a custom method. You can use the code snippet below, which can just be pasted into a file and imported whenever needed:

simplify
tippecanoe
mbtilesToPngs
tileserver-gl
OSRM
Valhalla
'google_polyline_algorithm'
PolylineLayer class - flutter_map library - Dart API
Polyline class - flutter_map library - Dart API
Logo
Logo
An example Polyline