Hızlı başlangıç: maplibre_gl (Flutter, vektör)

flutter pub add updraft_maps maplibre_gl:0.28.0

// Updraft quick start 3: maplibre_gl (MapLibre Native on Android/iOS, MapLibre GL JS on web)
// with the Updraft "pilot eye" vector style and the thermal grid, through the updraft_maps package.
import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';
import 'package:updraft_maps/maplibre_gl.dart';

import 'raster_map.dart'
    show openAttributionRules, updraftTiles, updraftTilesKey;

class VectorMapScreen extends StatefulWidget {
  const VectorMapScreen({super.key, this.dark = false});

  /// `pilot-dark` instead of `pilot-light`.
  final bool dark;

  @override
  State<VectorMapScreen> createState() => _VectorMapScreenState();
}

class _VectorMapScreenState extends State<VectorMapScreen> {
  MapLibreMapController? _controller;

  UpdraftTheme get _theme =>
      widget.dark ? UpdraftTheme.dark : UpdraftTheme.light;

  Future<void> _onMapCreated(MapLibreMapController controller) async {
    _controller = controller;
    // The key goes only to the Updraft tile server, as a header (Android and iOS; on web the
    // public tile path is used, a browser key would be visible to everyone).
    await applyUpdraftKey(
      controller,
      apiKey: updraftTilesKey,
      tilesUrl: updraftTiles,
    );
  }

  // Thermal grid for July, 12:00–14:00 local time, wind from the west (all values: ThermalFilter()).
  Future<void> _onStyleLoaded() => setUpdraftThermalFilter(
    _controller!,
    ThermalFilter(month: 7, hourBucket: 6, windSector: 6),
    theme: _theme,
    tilesUrl: updraftTiles,
  );

  @override
  Widget build(BuildContext context) => Stack(
    children: [
      MapLibreMap(
        styleString: updraftStyleString(theme: _theme, tilesUrl: updraftTiles),
        initialCameraPosition: const CameraPosition(
          target: LatLng(36.56, 29.17),
          zoom: 11.5,
        ),
        onMapCreated: _onMapCreated,
        onStyleLoadedCallback: _onStyleLoaded,
        minMaxZoomPreference: const MinMaxZoomPreference(4, 17),
        compassEnabled: true,
        // MapLibre's own attribution button folds the text into a menu: show the line instead.
        attributionButtonPosition: AttributionButtonPosition.topRight,
      ),
      const UpdraftAttribution(thermals: true, onTap: openAttributionRules),
    ],
  );
}