The Techies' pub

Flutter – Maps and markers

Hope you are all well. In this post let’s talk about bringing maps into your flutter apps.

Though there are many providers who provide readymade service endpoints that we can simply call and use in our app to bring in a map. The commonly used ones are google maps and leaflet (Open source, doesn’t require a key).

Now add the flutter_map plugin which will help us bring a map into our mobile app. Open pubspec.yaml and add it to the dependencies as shown below.

1

2

3

4

dependencies:

flutter:

sdk:flutter

flutter_map:

Alright., Now open main.dart file and add the below code.

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

import'package:flutter/material.dart';

import'package:flutter_map/flutter_map.dart';

voidmain()=>runApp(newMyApp());

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

returnnewMaterialApp(

home:newMyHomePage(),

);

}

}

classMyHomePageextendsStatefulWidget{

@override

_MyHomePageState createState()=>new_MyHomePageState();

}

class_MyHomePageStateextendsState<MyHomePage>{

@override

Widget build(BuildContext context){

returnnewScaffold(

appBar:newAppBar(title:newText('Leaflet Maps')),

body:newFlutterMap(

options:newMapOptions(

minZoom:10.0

),

layers:[

newTileLayerOptions(

urlTemplate:

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

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

)

]));

}

}

Now leaflet is open-sourced so, I have just used one of the free map templates in the urlTemplate. To make your own maps kindly visit a provider like mapbox which is a service that enables you to make your own map tiles and import them into your apps.

Cool. Now run the app. You will see the below screen

Of course, the map on your screen might look a little bit different, but in essence a map get’s loaded. Now let’s see how to navigate to a particular place on our map when we load it.

Open main.dart file and modify the options as shown below.

1

2

3

4

options:newMapOptions(

center:newLatLng(40.71,-74.00),

minZoom:10.0

),

Run the app again.. (I mean run it again, not just wait for the hot reload)

You will see New york when it loads up now.

Cool right ?

Markers:

Now, let’s talk about placing markers on the map.

Open up 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

import'package:flutter/material.dart';

import'package:flutter_map/flutter_map.dart';

import'package:latlong/latlong.dart';

voidmain()=>runApp(newMyApp());

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

returnnewMaterialApp(

home:newMyHomePage(),

);

}

}

classMyHomePageextendsStatefulWidget{

@override

_MyHomePageState createState()=>new_MyHomePageState();

}

class_MyHomePageStateextendsState<MyHomePage>{

@override

Widget build(BuildContext context){

returnnewScaffold(

appBar:newAppBar(title:newText('Leaflet Maps')),

body:newFlutterMap(

options:newMapOptions(

center:newLatLng(40.71,-74.00),minZoom:10.0),

layers:[

newTileLayerOptions(

urlTemplate:

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

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

newMarkerLayerOptions(markers:[

newMarker(

width:45.0,

height:45.0,

point:newLatLng(40.73,-74.00),

builder:(context)=>newContainer(

child:IconButton(

icon:Icon(Icons.location_on),

color:Colors.red,

iconSize:45.0,

onPressed:(){

print('Marker tapped');

},

),

))

])

]));

}

}

I have now added a marker which is nothing but an icon button. I have placed the marker at a point using the point: attribute (Note that you could simply place your marker anywhere just by providing the lat lng coordinates of that specific location.