mapbox_gl_flutter_web 0.1.2

Flutter Web bridge for Mapbox GL JS. Pair with mapbox_maps_flutter on mobile via conditional imports to render the same map on every platform.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:mapbox_gl_flutter_web/mapbox_gl_flutter_web.dart';

const String _mapboxAccessToken = String.fromEnvironment(
  'MAPBOX_ACCESS_TOKEN',
  defaultValue: '',
);

void main() {
  if (_mapboxAccessToken.isNotEmpty) {
    MapboxOptions.setAccessToken(_mapboxAccessToken);
  } else {
    debugPrint(
      'No MAPBOX_ACCESS_TOKEN set — run with `flutter run -d chrome '
      '--dart-define=MAPBOX_ACCESS_TOKEN=pk.YOUR_TOKEN`. '
      'Without a public (pk.) token the tile API returns a black canvas.',
    );
  }
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'mapbox_gl_flutter_web example',
      theme: ThemeData(brightness: Brightness.dark),
      home: const MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  Future<void> _onMapCreated(MapboxMap map) async {
    await map.loadStyleURI(MapboxStyles.STANDARD);

    // Add a single GeoJSON source + a SymbolLayer rendering a marker at the
    // map center, just to exercise the source/layer plumbing.
    await map.style.addSource(
      const GeoJsonSource(
        id: 'pins',
        data: '''
{"type":"FeatureCollection","features":[
  {"type":"Feature","geometry":{"type":"Point","coordinates":[77.5946,12.9716]},
   "properties":{"title":"Bengaluru"}}
]}''',
      ),
    );

    final layer = SymbolLayer(id: 'pin-text', sourceId: 'pins')
      ..textField = 'title'
      ..textSize = 18.0
      ..textAnchor = TextAnchor.TOP
      ..textColor = 0xFFFFFFFF
      ..textHaloColor = 0xFF000000
      ..textHaloWidth = 1.5;
    await map.style.addLayer(layer);
    await map.style.setStyleLayerProperty(
      'pin-text',
      'text-field',
      ['get', 'title'],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('mapbox_gl_flutter_web example')),
      body: MapboxMapWidget(
        cameraOptions: const CameraOptions(
          center: Point(coordinates: Position(77.5946, 12.9716)),
          zoom: 11,
          pitch: 45,
        ),
        styleUri: MapboxStyles.STANDARD,
        onMapCreated: _onMapCreated,
      ),
    );
  }
}