ubhub_maps 0.8.1

ubhub_maps: ^0.8.1 copied to clipboard

example/lib/main.dart

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

// Pass a restricted key with geocode + basemap scopes using --dart-define.
// Client-distributed keys are extractable; restrict and rate-limit them.
void main() => runApp(const MaterialApp(home: MapExample()));

/// A map and place search sharing one public UBHUB API key. Shows clustered
/// markers, a search result pin with a tap info window, a polyline, a
/// polygon, and 3D buildings and trees that can be switched on and off.
class MapExample extends StatefulWidget {
  /// Creates the example application.
  const MapExample({super.key});
  @override
  State<MapExample> createState() => _MapExampleState();
}

class _MapExampleState extends State<MapExample> {
  static const _key = String.fromEnvironment('UBHUB_API_KEY');
  late final UbHubGeo _client;
  late final UbHubMapOptions _options;
  UbHubMapController? _map;
  final List<UbHubMarker> _markers = [];
  bool _showBuildings = true;
  bool _showTrees = true;

  // A few fixed points around Ulaanbaatar to show clustering and shapes.
  static const _square = GeoPoint(latitude: 47.9184, longitude: 106.9177);
  static const _nearby = [
    GeoPoint(latitude: 47.9188, longitude: 106.9165),
    GeoPoint(latitude: 47.9179, longitude: 106.9189),
    GeoPoint(latitude: 47.9201, longitude: 106.9172),
    GeoPoint(latitude: 47.9169, longitude: 106.9158),
  ];

  @override
  void initState() {
    super.initState();
    if (_key.isNotEmpty) {
      _client = UbHubGeo(apiKey: _key);
      _options = UbHubMapOptions(
        apiKey: _key,
        buildings: UbHubBuildings.detailed,
        trees: UbHubTrees.extruded,
        initialZoom: 15,
        initialTilt: 50,
      );
      _markers.addAll([for (final p in _nearby) UbHubMarker(p, label: 'Stop')]);
    }
  }

  @override
  void dispose() {
    if (_key.isNotEmpty) _client.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (_key.isEmpty) {
      return const Scaffold(
        body: Center(
          child: Text(
            'Set UBHUB_API_KEY with --dart-define to run this example.',
          ),
        ),
      );
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text('UBHUB Maps'),
        actions: [
          IconButton(
            tooltip: 'Buildings',
            isSelected: _showBuildings,
            icon: const Icon(Icons.apartment_outlined),
            selectedIcon: const Icon(Icons.apartment),
            onPressed: () => setState(() => _showBuildings = !_showBuildings),
          ),
          IconButton(
            tooltip: 'Trees',
            isSelected: _showTrees,
            icon: const Icon(Icons.park_outlined),
            selectedIcon: const Icon(Icons.park),
            onPressed: () => setState(() => _showTrees = !_showTrees),
          ),
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(12),
            child: UbHubPlaceSearch(
              client: _client,
              onSelected: (place) async {
                setState(() {
                  _markers.add(
                    UbHubMarker(
                      place.location,
                      id: place.id,
                      label: place.name,
                      data: place,
                    ),
                  );
                });
                await _map?.flyTo(place.location);
              },
            ),
          ),
          Expanded(
            child: UbHubMap(
              options: _options,
              markers: _markers,
              clusterMarkers: true,
              tiltGesturesEnabled: true,
              showBuildings: _showBuildings,
              showTrees: _showTrees,
              buildingStyle: const UbHubBuildingStyle(color: Color(0xFF93C5FD)),
              polylines: const [
                UbHubPolyline([
                  _square,
                  GeoPoint(latitude: 47.922, longitude: 106.9057),
                ]),
              ],
              polygons: const [
                UbHubPolygon(
                  [
                    [
                      GeoPoint(latitude: 47.921, longitude: 106.913),
                      GeoPoint(latitude: 47.921, longitude: 106.921),
                      GeoPoint(latitude: 47.916, longitude: 106.921),
                      GeoPoint(latitude: 47.916, longitude: 106.913),
                    ],
                  ],
                  strokeColor: Color(0xFF2563EB),
                  strokeWidth: 2,
                ),
              ],
              onReady: (controller) => _map = controller,
              onMarkerTap:
                  (marker) => debugPrint('Tapped ${marker.label ?? marker.id}'),
              infoWindowBuilder:
                  (context, marker) => Material(
                    elevation: 4,
                    borderRadius: BorderRadius.circular(8),
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 8,
                      ),
                      child: Text(marker.label ?? 'Marker'),
                    ),
                  ),
            ),
          ),
        ],
      ),
    );
  }
}