You can quickly integrate a map to your flutter application with our API's. For that we recommend to use the Maplibre plugin for flutter for its great stability and unmatched speed.
Here's the code for a widget that displays a map on your app:
import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Basic MapLibre Map',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BasicMapScreen(),
);
}
}
class BasicMapScreen extends StatefulWidget {
@override
_BasicMapScreenState createState() => _BasicMapScreenState();
}
class _BasicMapScreenState extends State {
MapLibreMapController? mapController;
// Define the initial camera position
static const CameraPosition _initialCameraPosition = CameraPosition(
target: LatLng(40.7128, -74.0060), // New York City coordinates
zoom: 10.0,
);
// Map style URL - you can change this to any valid MapLibre style
static const String _mapStyleUrl = 'https://mapbolt.com/data/style/?name=&api_key=';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Basic MapLibre Map'),
backgroundColor: Colors.blue,
),
body: MapLibreMap(
// Load map style from URL
styleString: _mapStyleUrl,
// Set initial camera position
initialCameraPosition: _initialCameraPosition,
// Callback when map is created
onMapCreated: _onMapCreated,
// Enable basic map controls
compassEnabled: true,
tiltGesturesEnabled: true,
rotateGesturesEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
// Track camera position changes
trackCameraPosition: true,
),
);
}
// Called when the map is successfully created
void _onMapCreated(MapLibreMapController controller) {
mapController = controller;
print('Map created successfully!');
}
@override
void dispose() {
// Clean up the controller when the widget is disposed
mapController?.dispose();
super.dispose();
}
}