Flutter Quickstart

For Dart code idioms see ../integrations/dart.md.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  maplibre_gl: ^0.20.0
  http: ^1.2.0

Component

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

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  static const _key = String.fromEnvironment('MFD_PUB_KEY');
  late final String _styleUrl =
      'https://api.mapsfordevs.com/styles/standard.json?key=$_key';

  MapLibreMapController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MapLibreMap(
        styleString: _styleUrl,
        initialCameraPosition: const CameraPosition(
          target: LatLng(-26.20, 28.04),
          zoom: 11,
        ),
        onMapCreated: (c) => _controller = c,
        onStyleLoadedCallback: () => _controller?.addSymbol(
          const SymbolOptions(
            geometry: LatLng(-26.20, 28.04),
            iconImage: 'marker-15',
            textField: 'Office',
            textOffset: Offset(0, 1.5),
          ),
        ),
      ),
    );
  }
}

Run with:

flutter run --dart-define=MFD_PUB_KEY=mfd_pub_xxx

Permissions

AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- optional -->

ios/Runner/Info.plist:

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Show your location on the map</string>

Switch language

void setLanguage(MapLibreMapController c, String lang) {
  for (final layer in const ['place_label', 'transportation_name', 'poi_label']) {
    c.setLayerProperties(layer, SymbolLayerProperties(
      textField: ['coalesce',
        ['get', 'name:$lang'],
        ['get', 'name:latin'],
        ['get', 'name']
      ],
    ));
  }
}

Geocoding

import 'dart:convert';
import 'package:http/http.dart' as http;

class MapsForDevs {
  final String apiKey;
  MapsForDevs(this.apiKey);

  Future<List<Map<String, dynamic>>> geocode(String query, {int limit = 5}) async {
    final uri = Uri.https(
      'api.mapsfordevs.com', '/geocode/forward',
      {'q': query, 'limit': '$limit'},
    );
    final r = await http.get(uri, headers: {'Authorization': 'Bearer $apiKey'});
    final body = jsonDecode(r.body);
    if (body['ok'] != true) throw Exception(body['error']);
    return List<Map<String, dynamic>>.from(body['items']);
  }
}

Web build

maplibre_gl supports Flutter Web by wrapping MapLibre GL JS via JS interop. Same styleString works.