ubhub_maps 0.4.0

Official UBHUB Flutter SDK with native vector maps, place-search widgets, typed geocoding, reverse geocoding, and routing.

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 and a
/// polygon.
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 = [];

  // 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);
      _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')),
      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,
              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'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}