DEV Community

vmodal_ai
vmodal_ai

Posted on

Build Interactive Maps in Flutter with Mapbox SDK

#android #mapbox #flutter #dart

Interactive maps are essential for applications like ride-sharing, delivery, travel, and location tracking. While Google Maps is a popular choice, Mapbox offers highly customizable maps, offline support, and powerful navigation features.

In this tutorial, you'll learn how to integrate the Mapbox SDK into a Flutter application.

Why Choose Mapbox?

Mapbox provides several advantages:

  • 🎨 Fully customizable map styles
  • 📍 Smooth location tracking
  • 🗺️ Offline map support
  • 🚗 Navigation and routing APIs
  • 🌍 Global map coverage
  • ⚡ High-performance rendering

Prerequisites

Before starting, make sure you have:

  • Flutter SDK installed
  • Android Studio or VS Code
  • A Mapbox account
  • A Mapbox Access Token

Step 1: Create a Mapbox Account

Sign up for a Mapbox account and generate a Public Access Token from your dashboard. You'll use this token to authenticate your Flutter app.

Step 2: Add the Dependency

Add the Mapbox Flutter package to your pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  mapbox_maps_flutter: ^2.8.0
Enter fullscreen mode Exit fullscreen mode

Then install the package:

flutter pub get
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Your Access Token

For Android, add your Mapbox access token according to the package documentation or initialize it during app startup.

const String accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";
Enter fullscreen mode Exit fullscreen mode

Replace the placeholder with your own token.

Step 4: Display a Map

Create a simple map screen.

import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

class MapScreen extends StatelessWidget {
  const MapScreen({super.key});

  @override
  Widget build(BuildContext context) {
    MapboxOptions.setAccessToken("YOUR_MAPBOX_ACCESS_TOKEN");

    return Scaffold(
      appBar: AppBar(title: const Text("Mapbox Map")),
      body: MapWidget(
        cameraOptions: CameraOptions(
          center: Point(
            coordinates: Position(24.9384, 60.1699),
          ),
          zoom: 12,
        ),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

This example displays a Mapbox map centered on Helsinki.

Step 5: Add a Marker

You can place markers to highlight locations such as restaurants, deliveries, or customer addresses.

mapboxMap.flyTo(
  CameraOptions(
    center: Point(
      coordinates: Position(24.9384, 60.1699),
    ),
    zoom: 15,
  ),
  MapAnimationOptions(duration: 1500),
);
Enter fullscreen mode Exit fullscreen mode

You can also use annotations to display custom markers with icons or images.

Step 6: Enable User Location

To display the user's current location:

  • Request location permission.
  • Enable the location component.
  • Update the camera as the user's location changes.

This feature is commonly used in navigation, fitness, and ride-sharing applications.

Best Practices

  • Keep your access token secure.
  • Request location permissions only when needed.
  • Use custom map styles to match your app's branding.
  • Cache offline maps for areas with limited connectivity.
  • Optimize marker rendering if displaying hundreds of locations.

Real-World Use Cases

Mapbox is an excellent choice for:

  • 🚗 Ride-hailing apps
  • 🍔 Food delivery
  • 🚚 Fleet tracking
  • 🏃 Fitness tracking
  • 🧭 Navigation apps
  • 🗺️ Tourism and travel guides
  • 🏢 Asset and field service management

Conclusion

Mapbox makes it easy to build beautiful, high-performance maps in Flutter. With support for custom styling, offline maps, navigation, and advanced geospatial features, it's a strong alternative to traditional mapping solutions.

As your application grows, you can enhance it with route navigation, geofencing, clustering, custom markers, and live location tracking to create rich location-based experiences.


SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter
SDK Android: https://github.com/v-modal/vmodal_sdk_android
Discord: https://discord.gg/K72z28KUx

flutter dart mapbox maps mobiledevelopment

Top comments (0)