Flutter: Display map, markers, and polyline using MapBox

Hi everyone, in this topic, I will explain how to display a map in your Flutter application, most of the applications are using Google Map Services, but in this example, we are going to use another service MapBox which I found personally very interesting.

In this example, we are going to achieve something like this:

First of all, let's explain what is MapBox?

MapBox is an open-source mapping platform for custom designed maps, but MapBox uses OpenStreetMap as a data source (streets, buildings, administrative areas, water, and land data…), read more HERE

OpenStreetMap contributors create and improve its map data.

So, let start:

First thing, we need to create an account in MapBox to customize our map and get the URL template.

1- Go to https://www.mapbox.com/ and create an account their.

2- Jump into your studio:

3. Create a new style

4. Choose your style that you want and Customize Basic

5- Jump back into your studio and click on Share you style

6- After that, you will see a popup window and follow the image bellow:

Here, you need to copy the Integration URL a keep it somewhere.

Let's go back to our application:

1- Install this package flutter_map:

Add this to your package’s pubspec.yaml file:

dependencies:
  flutter_map: ^0.9.0

2- Create a Flutter page in your application or use your default file main.dart, and copy, paste the bellow code:

Replace urlTemplate with Integration URL that you saved before, and accessToken with the toke value, you will find in the URL itself access_token={value}

So basically:

• we displayed the map using MapBox urlTemplate.
• Added Marker, change the image of your marker in MarkerLayerOptions.
• Polyline, we need a list of LatLng, so that i fetch them from and JSON file and add them in Polyline attribute points: latlngList.

you can use my Json file HERE

That’s it easy-peasy, i hope you like my first article, if you have any kind of question, please leave a comment below and i will reply you as soon as possible.