Skip to content

Flutter

Flutter apps can show the Maptoolkit community vector basemap two ways: with the official maplibre_gl plugin (MapLibre Native under the hood), or with flutter_map plus the vector_map_tiles plugin. No API key is required.

maplibre_gl wraps MapLibre Native, so it renders the vector style directly with full zoom, rotation, and tilt.

Add the dependency in pubspec.yaml:

dependencies:
  maplibre_gl: ^0.26.0

Pass the community style URL as styleString:

import 'package:maplibre_gl/maplibre_gl.dart';

MaplibreMap(
  styleString: 'https://styles.maptoolkit.org/summer.json',
  initialCameraPosition: const CameraPosition(
    target: LatLng(52.52, 13.405), // Berlin
    zoom: 11,
  ),
);

Option 2: flutter_map + vector_map_tiles

If you already use flutter_map, add vector rendering with vector_map_tiles. Its StyleReader loads the Maptoolkit style and builds the theme, sprites, and tile providers.

dependencies:
  flutter_map: ^7.0.0
  vector_map_tiles: ^7.0.0
  latlong2: ^0.9.0
import 'package:flutter_map/flutter_map.dart';
import 'package:vector_map_tiles/vector_map_tiles.dart';
import 'package:latlong2/latlong.dart';

final style = await StyleReader(
  uri: 'https://styles.maptoolkit.org/summer.json',
).read();

FlutterMap(
  options: const MapOptions(
    initialCenter: LatLng(52.52, 13.405),
    initialZoom: 11,
  ),
  children: [
    VectorTileLayer(
      theme: style.theme,
      sprites: style.sprites,
      tileProviders: style.providers,
    ),
  ],
);

Attribution

Every map must show the Maptoolkit logo and the © Maptoolkit © OSM copyright line, both as tappable links. Keep them visible and unobstructed. See Quick Start - Add attribution.