Skip to content

Flutter MapMetrics Integration

Welcome to the Flutter MapMetrics integration guide! This section will help you integrate MapMetrics Atlas API with your Flutter applications using the MapMetrics Flutter package. The package is available on https://pub.dev/packages/mapmetrics and tthe api is here https://pub.dev/documentation/mapmetrics/latest/.

Overview

Flutter MapMetrics integration allows you to create beautiful, interactive maps in your Flutter applications using MapMetrics Atlas API. This combination provides:

  • High Performance: Native speed with MapMetrics GL rendering
  • Customizable Maps: Use MapMetrics Atlas API for custom map styles
  • Cross-Platform: Works on iOS, Android, Web, and Desktop
  • Community-Driven Data: Access to MapMetrics community-contributed map data
  • No Vendor Lock-in: Open-source solution with flexible data providers

Prerequisites

Before you begin, make sure you have:

  1. Flutter SDK installed (version 3.0.0 or higher)
  2. Dart SDK installed
  3. MapMetrics Atlas API Key (create one at MapMetrics Portal)
  4. Custom Map Style URL (create one in the MapMetrics Portal)

Quick Start

  1. Add the dependency to your pubspec.yaml:

    yaml
    dependencies:
      mapmetrics: ^0.1.0
  2. Get your MapMetrics credentials:

  3. Basic implementation:

    dart
    import 'package:flutter/material.dart';
    import 'package:mapmetrics/mapmetrics.dart';
    
    class MapScreen extends StatefulWidget {
      @override
      _MapScreenState createState() => _MapScreenState();
    }
    
    class _MapScreenState extends State<MapScreen> {
      MapMetricsController? mapController;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('MapMetrics Map')),
          body: MapMetrics(
            styleUrl: 'https://gateway.mapmetrics.org/styles/YOUR_STYLE_ID?token=YOUR_API_KEY',
            onMapCreated: (MapMetricsController controller) {
              mapController = controller;
            },
          ),
        );
      }
    }

What You'll Learn

In the following tutorials, you'll learn how to:

MapMetrics Atlas API Benefits

When using Flutter with MapMetrics Atlas API, you get:

  • Real-time Community Data: Maps updated with community contributions
  • Custom Styling: Full control over map appearance through MapMetrics Portal
  • High Performance: Optimized vector tiles for smooth rendering
  • Global Coverage: Comprehensive map data worldwide
  • Flexible Attribution: Simple attribution requirements

Next Steps

Ready to get started? Begin with the Setup Guide to configure your Flutter project with MapMetrics Atlas API.


Note: Make sure to follow the attribution requirements when using MapMetrics in your applications.