OpenStreetMaps (OSM) Maps and Flutter

😄👋 Hey the family, well I hope? so today we’re going to talk about :

• Creating a map
• Placing the markers
• Connect by drawing the points

If you’re here because you didn’t want to use google maps or you can’t place markers or plot routes on an OSM map, no worries at the end of this tutorial, you’ll be able to do all of that. 😉

We’ll start with the creation of the Maps.

To do this you need to install all these packages first:

flutter_map: any
flutter_map_tappable_polyline: any

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