Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (96)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (109)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (479)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (20)WPF  (121)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (225)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (59)UI  (128)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (212)What's new  (138)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Update Markers in Flutter Maps from Firebase Database

How to Update Markers in Flutter Maps from Firebase Database

A marker helps to easily identify locations, such as towns, buildings, or any points of interest on a map. But it may be difficult to manually update these marker locations if they change often. So, it is better to have them in a database.

Syncfusion Flutter Maps is a powerful data visualization widget that displays statistical information for a geographical area. Its rich feature set includes tile rendering from OpenStreetMap, Azure Maps, Bing Maps, Google Maps, and other tile providers with marker support.

In this article, we are going to see how to access and update markers in the Flutter Maps widget from a Firebase real-time Database. However, we are not going to discuss how to create a Firebase Realtime Database. For that, please refer to Add Firebase to your Flutter app documentation to create a database in a Firebase console and connect your Flutter app to it.

The following example database is in Firebase. We are going to update the markers for each country in the Flutter Maps widget.

Example database in Firebase

Note: For more details, refer to the country location database source.

Add Flutter Maps dependencies

First, add the Flutter Maps package to update the map with markers in your Flutter application.

dependencies:
  syncfusion_flutter_maps: ^19.2.51-beta
  firebase_core: ^1.4.0
  firebase_database: ^7.1.2

Retrieve the markers from Firebase to your Flutter app

We already have data in the Firebase database. Now, we are going to access the data through its path reference. This is straightforward, and we will return the list of markers to the FutureBuilder widget in the build method. The class Marker is used to parse the data from the Firebase database and store the data in a local collection.

Refer to the following code example.

// Class that parses the data from database.
class Marker {
  String country;
  late double latitude;
  late double longitude;

  Marker(
      {required this.country, required this.latitude, required this.longitude});

  Marker.fromJson(this.country, Map data) {
    latitude = data['latitude'];
    longitude = data['longitude'];
  }
}
 late List<Marker> _markers;
 
 // Get the markers from database for a local collection.
  Future<List<Marker>> getMarkers() async {
    _markers.clear();
    var _dbRef = FirebaseDatabase.instance.reference().once();
    await _dbRef.then(
      (dataSnapShot) async {
        // Access the markers from database.
        Map<dynamic, dynamic> mapMarkers = dataSnapShot.value;

        // Get the markers in a local collection.
        mapMarkers.forEach(
          (key, value) {
            Marker marker = Marker.fromJson(key, value);
            _markers.add(Marker(
                country: key,
                latitude: double.parse(marker.latitude.toString()),
                longitude: double.parse(marker.longitude.toString())));
          },
        );
      },
    );
    return _markers;
  }

Update the Maps widget with the markers from Firebase

Now, we are going to update the collection of markers we received from the database in Flutter Maps using the FutureBuilder child widget.

Refer to the following code example.

body: Padding(
        padding: EdgeInsets.all(8),
        //Get the markers as collection and update the Maps widget.
        child: FutureBuilder(
          future: getMarkers(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return SfMaps(
                layers: <MapLayer>[
                  MapShapeLayer(
                    source: _dataSource,
                    initialMarkersCount: _markers.length,
                    markerBuilder: (BuildContext context, int index) {
                      return MapMarker(
                        latitude: _markers[index].latitude,
                        longitude: _markers[index].longitude,
                      );
                    },
                  ),
                ],
              );
            }
            return Text('Loading');
          },
        ),
      ),

After executing the previous code, the markers will be updated in Flutter Maps, as seen in the following screenshots.

Firebase Database with Marker Locations
Firebase Database with Marker Locations

Flutter Maps Rendered with Markers
Flutter Maps Rendered with Markers

We used only the default styles to keep the code simple, sticking with the purpose of this article. Flutter Maps also provides shape layers with features like selection, legends, labels, tooltips, bubbles, color mapping, and much more.

Note: Refer to these online demos to see what you can do with the marker styles in Flutter Maps:

GitHub reference

You can get the complete code example for updating markers in Flutter Maps from a Firebase Database.

Conclusion

Thanks for reading! In this blog, we have seen how to easily update markers in the Flutter Maps from a Firebase database. With this, you can easily denote the locations of physical reliefs, political divisions, and whatever you want on a map. Just give it a try and leave your feedback in the comments section given below, which will make me happy.

Also, check out the other features of our Flutter Maps in the user guide and demos on GitHub. Additionally, check out our demo apps for AndroidiOSwebWindows, and Linux.

If you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our support forumsDirect-Trac, or feedback portal. As always, we are happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top