Use the maplibre_gl Flutter package for true native Android/iOS performance. Pass maps.guru style URL into MapOptions and the package handles tile auth.
flutter pub add maplibre_glimport 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
const String mapStyle = 'https://maps.guru/api/v1/styles/standard/light/style.json?key=YOUR_API_KEY';
class CityMap extends StatelessWidget {
const CityMap({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: MaplibreMap(
options: MapOptions(
center: GeoPoint(latitude: 28.6139, longitude: 77.209),
zoom: 11,
style: mapStyle,
),
onMapCreated: (controller) {
controller.addCircles(
const CircleOptions(
geometry: [
GeoPoint(latitude: 28.6139, longitude: 77.209),
],
circleColor: '#e66200',
circleRadius: 8,
),
);
},
),
);
}
}
The Flutter SDK renders straight to the platform’s OpenGL / Metal context. Web preview is skipped — install the package and run on a simulator to see live tiles.
Free-tier generous enough for real production traffic. 50,000 tile requests/month , no credit card.
Not currently; it targets Android and iOS. For Flutter Web, use flutter_map (Leaflet-based) with raster tiles or a different package.
Inline as a `?key=` query on the style URL. Prefer a build-time constant (env file or --dart-define) so it never ships to source control.
The vocabulary behind vector tiles, styles, and geocoding, in plain language.
Join developers worldwide who trust maps.guru for their mapping needs. Start free, no credit card required.