Integrating Flutter Maps

Working with Maps is an important feature in every developer’s routine. When it comes to integrating maps in a Flutter App, what comes to our mind is GoogleMaps.

That’s true GoogleMaps is a very proficient one, but in today’s blog, we will be reading about how to integrate flutter_map within the app.

flutter_map is highly customizable and scalable and also provides its developers with multiple options to handle the basic maps.

Check the best Flutter app development services offered by Mobikul

In order to add flutter_maps to the app, we will need to add the dependency to pubspec.yaml

flutter_map: 3.1.0

1	flutter_map: 3.1.0

After adding this, run the ‘dart pub get’ command.

In order to specify Latitude and Longitude we will also need to add another dependency i.e. latlong2

latlong2: ^0.8.2

1	latlong2: ^0.8.2

Here is the basic widget –

FlutterMap(
    mapController: _mapController,
    options: MapOptions(),
    children: [],
    nonRotatedChildren: [],
);

FlutterMap(

mapController: _mapController,

options: MapOptions(),

children: [],

nonRotatedChildren: [],

);

mapController – This takes a MapController instance and is used to control the map programmatically.

options – This takes a MapOptions instance. Here we can specify the properties such as minZoom, maxZoom, rotation, etc.

children – In this, we can specify the layers that we need to add to our maps either the Tile Layer, Maker Layer, Polygon Layer, or many others.

nonRotatedChildren – In this we can specify the elements that we want to be rendered over the map but do not want them to rotate.

FlutterMap(
                        mapController: mapController,
                        children: [
                          TileLayer(
                            urlTemplate:
                                "https://tiles.aqicn.org/tiles/usepa-co/{z}/{x}/{y}.png",
                          ),
                          MarkerLayer(
                            markers: [
                              Marker(
                                width: 80.0,
                                height: 80.0,
                                point: LatLng(51.5, -0.09),
                                builder: (ctx) =>
                                    Image.asset('assets/images/location.png'),
                              ),
                            ],
                          ),
                        ],
                        options: MapOptions(
                            minZoom: 2.0,
                            center: LatLng(51.509364, -0.128928),
                            maxZoom: 18.5),
                      ),

FlutterMap(

mapController: mapController,

children: [

TileLayer(

urlTemplate:

"https://tiles.aqicn.org/tiles/usepa-co/{z}/{x}/{y}.png",

MarkerLayer(

markers: [

Marker(

width: 80.0,

height: 80.0,

point: LatLng(51.5, -0.09),

builder: (ctx) =>

Image.asset('assets/images/location.png'),

options: MapOptions(

minZoom: 2.0,

center: LatLng(51.509364, -0.128928),

maxZoom: 18.5),

TileLayer

Within the TileLayer, there are multiple properties such as urlTemplate, userAgentPackageName, tileProvider, tileSize, etc.

The urlTemplate defines the structure to create the URLs for the tiles i.e. {s} means one of the available subdomains (can be omitted) {z} zoom level {x} and {y} — tile coordinates {r} can be used to add “@2x” to the URL to load retina tiles (can be omitted).

userAgentPackageName includes the package name for that particular app in order to avoid any constraints due to traffic. By default, it is set to “unknown”.

MarkerLayer

This layer helps us add multiple markers to our map as per our requirements. We can add custom markers as well. We can also specify the rotations for the markers.

Eg.

Marker(<br>  width: 80.0,<br>  height: 80.0,<br>  point: LatLng(51.5, -0.09),<br>  builder: (ctx) =&gt;<br>      Image.asset('assets/images/location.png'),<br>),

1	Marker(<br> width: 80.0,<br> height: 80.0,<br> point: LatLng(51.5, -0.09),<br> builder: (ctx) =><br> Image.asset('assets/images/location.png'),<br>),