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 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:maplibre_gl/maplibre_gl.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Mapbolt Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MapScreen(),
);
}
}
class MapScreen extends StatefulWidget {
const MapScreen({super.key});
@override
State createState() => _MapScreenState();
}
class _MapScreenState extends State {
String _styleString = '';
MaplibreMapController? _mapController;
@override
void initState() {
super.initState();
_loadStyleFromAssets();
}
Future _loadStyleFromAssets() async {
try {
final styleContent = await rootBundle.loadString(
'https://mapbolt.com/api/maps/style?name=&api_key='
);
setState(() {
_styleString = styleContent;
});
} catch (e) {
print("Error loading style: $e");
}
}
void _onMapCreated(MaplibreMapController controller) {
_mapController = controller;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Mapbolt Map'),
),
body: _styleString == null
? const Center(child: CircularProgressIndicator())
: MaplibreMap(
styleString: _styleString,
initialCameraPosition: const CameraPosition(
target: LatLng(50.54664, 4.375495), // Center of Belgium
zoom: 7.0,
),
onMapCreated: _onMapCreated,
myLocationEnabled: true,
trackCameraPosition: true,
minMaxZoomPreference: const MinMaxZoomPreference(0, 18),
tiltGesturesEnabled: true,
rotateGesturesEnabled: true,
),
);
}
}