Flutter SDK

flutter pub add gebeta_gl

import 'package:flutter/material.dart';
import 'package:gebeta_gl/gebeta_gl.dart';
 
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
 
  final String title;
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  // Your API key
  final String apiKey = 'your api key';
 
  @override
  void initState() {
    super.initState();
  }
  
  @override
  void dispose() {
    super.dispose();
  }
  
  // Function to load the map style
  Future<String> loadMapStyle() async {
    return await rootBundle.loadString('assets/styles/basic.json');
  }
 
  Future<Uint8List> loadMarkerImage() async {
    var byteData = await rootBundle.load("assets/marker-black.png");
    return byteData.buffer.asUint8List();
  }
 
    @override
    Widget build(BuildContext context) {
        return Scaffold(
        body: FutureBuilder<String>(
            future: loadMapStyle(), // Load the JSON style file
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
                // While the future is loading, show a loading spinner
                return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
                // If the future completed with an error, show an error message
                print(snapshot.error);
                return Center(child: Text('Error loading map style'));
            } else if (snapshot.hasData) {
                // If the future completed successfully, show the map
                String styleString = snapshot.data!;
                return GebetaMap(
                compassViewPosition: CompassViewPosition.topRight,
                styleString: styleString,
                initialCameraPosition: CameraPosition(
                    target: LatLng(9.0192, 38.7525), // Addis Ababa
                    zoom: 10.0,
                ),
                apiKey: apiKey,
                );
            } else {
                // Handle any other unexpected states
                return Center(child: Text('No map style found'));
            }
            },
        ),
        );
    }
}