FlutterMap: Changing Position Example

Hello everyone,

Today, we will explore how to change the position in Flutter Map.

Introduction

Flutter Map is an open-source package available on pub.dev. I frequently use this package in my projects, and I’d like to extend my gratitude to all the contributors for developing such a useful tool. It allows me to implement my ideas efficiently.

Last week, I needed to focus on a different location on the map. I searched through various resources, but it was quite challenging to find a straightforward solution. There are many advanced tutorials covering this topic, but I wanted a simple approach.

In this article, I will share an easy example to achieve this.

---

Step 1: Create a Location Model Class

First, we need to define a Location model class:

class Location {
  String name; // City name
  double latitude; // City latitude
  double longitude; // City longitude
  String description; // Description

  Location(this.description, this.latitude, this.longitude, this.name);
}

Step 2: Add Flutter Map

Next, we integrate Flutter Map into our project:

FlutterMap(
  mapController: _mapController, // Adding map controller
  options: MapOptions(
    center: LatLng.LatLng(
      FakeData.getLocations[0].latitude,
      FakeData.getLocations[0].longitude
    ),
    zoom: 13.0,
    plugins: [LocationMarkerPlugin(), MarkerClusterPlugin()],
  ),
  layers: [
    TileLayerOptions(
      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      subdomains: ['a', 'b', 'c'],
    ),
    MarkerLayerOptions(
      markers: setMarkers(),
    ),
  ],
)

As shown above, we need to add the mapController field like this:

final MapController _mapController = MapController();

Step 3: Move to Another Location

We can change the map’s focus using the move method of mapController:

_mapController.move(
  LatLng.LatLng(40.977779, 27.515278), // Latitude and Longitude
  13 // Zoom level
);

That’s it.

Conclusion

This method allows you to change the focus of Flutter Map dynamically. If you want to learn more, check out my YouTube tutorial linked below.