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
|
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
|
1 |
latlong2: ^0.8.2 |
Here is the basic widget –
|
1 2 3 4 5 6 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
|
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>), |
Conclusion
In this blog, we have discussed Integrating Flutter Maps into our apps
I hope it will help you in customizing the maps with the help of flutter_map.
Read more interesting Flutter Blogs by Mobikul.
Looking forward to reading about Flavors in Android – https://mobikul.com/android-product-flavors/
Thanks for reading!!