OpenStreetMaps (OSM) Maps and Flutter
Tags: Osm, Maps, Flutter, Openstreetmap, Mobile

Once installed, you can add this piece of code, which will allow you to instantiate your card.

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Colors.blue,

),

body: FlutterMap(

options: MapOptions(

center: LatLng(48.8583736,2.2922926),

zoom: 14.0

),

layers: [

TileLayerOptions(

urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

subdomains: ['a', 'b', 'c'],

),

],

),

);

}

We are going to add a marker on our card and to do this you just have to add this piece of code:

layers: [

TileLayerOptions(

urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

subdomains: ['a', 'b', 'c'],

),

MarkerLayerOptions(

markers: [

Marker(

width: 50.0,

height: 50.0,

point: LatLng(48.8583736,2.2922926) ,

builder: (ctx) =>

Container(

child:

Image.network("http://via.placeholder.com/350x150"),

),

],

),

],

And finally to finish we will connect our different points.

To do this I decided to create two different lists which will each contain the lat coordinates on one side and lon on the other. You could also use a tuple.

This choice because with a simple loop for I will get each element of the two lists.

Initialize variable

var latL = [48.8945265,48.8832498,48.8583694,48.9352576];

var lonL = [2.2608798,2.2876141,2.2797794,2.3242512];

add this in MapsOptions :

plugins: [

TappablePolylineMapPlugin(),

]

add this in Layer :

TappablePolylineLayerOptions(

// Will only render visible polylines, increasing performance

polylineCulling: true,

polylines: [

TaggedPolyline(

tag: "Trajet X", // Trajet Name

points: [

for(var lat in latL) LatLng(lat,lonL[latL.indexOf(lat)])

],

color: Colors.blueGrey,

strokeWidth: 5.0, // plot size

isDotted: false, // if true id display dotted,

),

],

onTap: (TaggedPolyline polyline) => print(polyline.tag),

onMiss: () => print("No polyline tapped"),

),

So in final code you will have this:

var latL = [48.8945265,48.8832498,48.8583694,48.9352576];

var lonL = [2.2608798,2.2876141,2.2797794,2.3242512]; Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

backgroundColor: Colors.blue,

),

body: FlutterMap(

options: MapOptions(

center: LatLng(48.8583736,2.2922926),

zoom: 14.0,

plugins: [

TappablePolylineMapPlugin(),

]

),

layers: [

TileLayerOptions(

urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

subdomains: ['a', 'b', 'c'],

), TileLayerOptions(

urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",

subdomains: ['a', 'b', 'c'],

),

MarkerLayerOptions(

markers: [

Marker(

width: 50.0,

height: 50.0,

point: LatLng(lat,lonL[latL.indexOf(lat)]),

builder: (ctx) =>

Container(

child:

Image.network("http://via.placeholder.com/350x150"),

),

],

),

TappablePolylineLayerOptions(

// Will only render visible polylines, increasing performance

polylineCulling: true,

polylines: [

TaggedPolyline(

tag: "Trajet X", // Trajet Name

points: [

for(var lat in latL) LatLng(lat,lonL[latL.indexOf(lat)])

],

color: Colors.blueGrey,

strokeWidth: 5.0, // plot size

isDotted: false, // if true id display dotted,

),

],

onTap: (TaggedPolyline polyline) => print(polyline.tag),

onMiss: () => print("No polyline tapped"),

),

],

),

);

}

And there you have it. I hope this tutorial has helped you.

Keep up the good work. 😇