Hi Friends,
Hope you are all well. In this post let’s talk about bringing maps from a Map service provider called Mapbox and drawing Polylines on the maps.
To learn the basics of flutter get my course – Click here.
Other flutter courses – here. (Affiliate Link)
As we all know we don’t yet have a widget for bringing Google Maps into flutter. We have a map_view plugin that enables users to bring in Static Maps. This was all fine till July 16th 2018. On July 16th Google severely restricted the usage quota of Maps API altogether. So, now free users can access the Static Maps API once per day. Imagine if you had written the code and while testing you made a small error., (You would have to wait till the next day to test it again)
So everyone was looking for an alternative to this and many moved towards openstreetmap. Now, as long-time readers probably know I have already written a post on how to bring leaflet maps into your flutter apps over here.
I would highly recommend reading that post once, coz I’ll be reusing most of the code from there.
Before we start, I would like to say that there are two ways of bringing in mapbox maps into your flutter apps.
- Use the flutter_map plugin and specify the mapbox api in the tileset layer.
- Use the official flutter-mapbox-gl plugin available here.
In this post, we’ll be making use of the first method since the official flutter-mapbox plugin doesn’t support markers or polylines. (But it does have a lot of animated camera movements)
Now Let’s begin.
Go to www.mapbox.com and signup for a free account. The free account allows users upto 50,000 mapviews per month.
Once done, simply login into your account and on the dashboard you would see a default key. Copy it. Now click on Studio (Available on top right, next to Account)
Under styles simply click on the start with basic or pick a map from template. For this demo let’s make use of the Streets map.
You will see a small share and use button on your selected map as shown below
Click on it and you will see the below dialog.
Copy this Integration URL as well.
Now we’ll be using both the key and Integration URL in our request.
First open pubspec.yaml and add the flutter_map plugin as a dependency.
|
1 2 3 4 |
dependencies: flutter: sdk: flutter flutter_map: |
Create a new Flutter app and add the below code to main.dart file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Leaflet Maps')), body: new FlutterMap( options: new MapOptions( center: new LatLng(35.22, -101.83), minZoom: 10.0), layers: [ new TileLayerOptions( urlTemplate: "<templateurlhere>", additionalOptions: { 'accessToken': '<yourtokenhere>', 'id': 'mapbox.mapbox-streets-v7' }) ])); } } |
Now run the app. You will see a screen as shown below. (Ensure that you fill the url and the token)
Wow.. Nice right .. ?
That’s how you bring Mapbox maps into your flutter apps.
Markers:
It’s the same as before. No changes. Just modify the code as shown below and add a marker layer.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Leaflet Maps')), body: new FlutterMap( options: new MapOptions( center: new LatLng(35.22, -101.83), minZoom: 5.0), layers: [ new TileLayerOptions( urlTemplate: "https://api.mapbox.com/styles/v1/rajayogan/cjl1bndoi2na42sp2pfh2483p/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA", additionalOptions: { 'accessToken': 'pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA', 'id': 'mapbox.mapbox-streets-v7' }), new MarkerLayerOptions(markers: [ new Marker( width: 45.0, height: 45.0, point: new LatLng(35.215, -101.825), builder: (context) => new Container( child: IconButton( icon: Icon(Icons.location_on), color: Colors.blue, iconSize: 45.0, onPressed: () { print('Marker tapped'); }, ), )) ]) ])); } } |
Now run the app. You will see the below screen.
Alright, let’s move on to Polylines.
Polygons are an interesting aspect of any map, since they represent boundaries. These polygons are drawn using lines called polylines. In simple terms, polyline is nothing but a line drawn on the map.
Now this plugin exposes three layers namely
- Tile Layer – The layer in which the map tiles get loaded.
- Marker Layer – The layer in which the markers are imposed over the map.
- Polyline Layer – The layer which contains the polylines.
Open main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import 'package:flutter/material.dart'; import 'package:flutter_map/flutter_map.dart'; import 'package:latlong/latlong.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { var points = <LatLng>[ new LatLng(35.22, -101.83), new LatLng(32.77, -96.79), new LatLng(29.76, -95.36), new LatLng(29.42, -98.49), new LatLng(35.22, -101.83), ]; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Leaflet Maps')), body: new FlutterMap( options: new MapOptions( center: new LatLng(35.22, -101.83), minZoom: 5.0), layers: [ new TileLayerOptions( urlTemplate: "https://api.mapbox.com/styles/v1/rajayogan/cjl1bndoi2na42sp2pfh2483p/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA", additionalOptions: { 'accessToken': 'pk.eyJ1IjoicmFqYXlvZ2FuIiwiYSI6ImNqNW1nOXhtMTNndXkyeG5xbDZiNzZmaGcifQ.S5sdpVrOr2pa5oRqvWDMGA', 'id': 'mapbox.mapbox-streets-v7' }), new PolylineLayerOptions( polylines: [ new Polyline( points: points, strokeWidth: 5.0, color: Colors.red ) ] ) ])); } } |
Now I have set 5 points as the coordinates of the polygon. (Note that the first and last points are the same).
Then I have added a polyline layer in which I have defined the points and the strokeWidth along with a color.
Run the app and you would see the below screen.
Nice right ? As of now fill is not supported, so we can’t fill the polygon with a faded color or gradient of our choice.
That’s it. As I said before, this is just one way of bringing mapbox maps into flutter. The other way would be to use the official flutter-mapbox-gl plugin. (I’ll maybe make another video and show how to use that as well).
Hope this video helped you guys. If you found this helpful, kindly share it with someone and help them too.
Donate to keep this site alive – here.
(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).
Join our flutter community – here.
Thanks for reading. Peace.. 
