feat: ui widget enhancements

example/lib/main.dart

@@ -23,7 +23,6 @@ import 'package:maplibre_example/style_layers_raster_page.dart';
 import 'package:maplibre_example/style_layers_symbol_page.dart';
 import 'package:maplibre_example/styled_map_page.dart';
 import 'package:maplibre_example/two_maps_page.dart';
-import 'package:maplibre_example/user_interface_page.dart';
 import 'package:maplibre_example/user_location_page.dart';
 import 'package:maplibre_example/widget_layer_page.dart';
 
@@ -52,7 +51,6 @@ class MyApp extends StatelessWidget {
         EventsPage.location: (context) => const EventsPage(),
         StyledMapPage.location: (context) => const StyledMapPage(),
         UserLocationPage.location: (context) => const UserLocationPage(),
-        UserInterfacePage.location: (context) => const UserInterfacePage(),
         WidgetLayerPage.location: (context) => const WidgetLayerPage(),
         OfflinePage.location: (context) => const OfflinePage(),
         PermissionsPage.location: (context) => const PermissionsPage(),

example/lib/menu_page.dart

@@ -22,7 +22,6 @@ import 'package:maplibre_example/style_layers_raster_page.dart';
 import 'package:maplibre_example/style_layers_symbol_page.dart';
 import 'package:maplibre_example/styled_map_page.dart';
 import 'package:maplibre_example/two_maps_page.dart';
-import 'package:maplibre_example/user_interface_page.dart';
 import 'package:maplibre_example/user_location_page.dart';
 import 'package:maplibre_example/widget_layer_page.dart';
 
@@ -83,11 +82,6 @@ class MenuPage extends StatelessWidget {
                   iconData: Icons.gps_fixed,
                   location: UserLocationPage.location,
                 ),
-              ItemCard(
-                label: 'User interface',
-                iconData: Icons.control_camera,
-                location: UserInterfacePage.location,
-              ),
               if (!kIsWeb)
                 ItemCard(
                   label: 'Offline',

example/lib/styled_map_page.dart

@@ -23,7 +23,12 @@ class _StyledMapPageState extends State<StyledMapPage> {
           initZoom: 2,
           initStyle: MapStyles.maptilerStreets,
         ),
-        children: const [SourceAttribution()],
+        children: const [
+          MapScalebar(),
+          SourceAttribution(),
+          MapControlButtons(showTrackLocation: true),
+          MapCompass(),
+        ],
         onStyleLoaded: (style) {
           style.setProjection(MapProjection.globe);
         },

lib/src/map.dart

@@ -27,6 +27,12 @@ class MapLibreMap extends StatefulWidget {
 
   /// Flutter widgets that get displayed on top on the map and are within the
   /// [MapLibreMap] context.
+  ///
+  /// You can use the following included UI elements:
+  /// - [MapCompass]
+  /// - [MapControlButtons]
+  /// - [MapScalebar]
+  /// - [SourceAttribution].
   final List<Widget> children;
 
   /// Which gestures should be consumed by the map.

lib/src/platform/web/interop/camera.dart

@@ -60,6 +60,23 @@ extension type FlyToOptions._(CameraOptions _) implements CameraOptions {
   });
 }
 
+/// Options to specify the map bounds.
+@anonymous
+@JS()
+extension type FitBoundsOptions._(FlyToOptions _) implements FlyToOptions {
+  /// Create a new JS [FitBoundsOptions] object.
+  external FitBoundsOptions({
+    bool? linear,
+    Point? offset,
+    num? maxZoom,
+    num? maxDuration,
+    PaddingOptions? padding,
+    num? speed,
+    num? pitch,
+    num? bearing,
+  });
+}
+
 /// https://github.com/maplibre/maplibre-gl-js/blob/8a005bd7d4769b62db470ce7e8cf2b08255c1d36/src/geo/edge_insets.ts#L129
 @anonymous
 @JS()

lib/src/platform/web/interop/map.dart

@@ -136,23 +136,6 @@ extension type MapOptions._(JSObject _) implements JSObject {
   });
 }
 
-/// Options to specify the map bounds.
-@anonymous
-@JS()
-extension type FitBoundsOptions._(FlyToOptions _) implements FlyToOptions {
-  /// Create a new JS [FitBoundsOptions] object.
-  external FitBoundsOptions({
-    bool? linear,
-    Point? offset,
-    num? maxZoom,
-    num? maxDuration,
-    PaddingOptions? padding,
-    num? speed,
-    num? pitch,
-    num? bearing,
-  });
-}
-
 /// The specifications of map sources.
 @anonymous
 @JS()

lib/src/platform/web/map_state.dart

@@ -243,12 +243,13 @@ final class MapLibreMapStateWeb extends MapLibreMapState {
     double? pitch,
   }) async {
     _nextGestureCausedByController = true;
+    final camera = getCamera();
     _map.jumpTo(
       interop.JumpToOptions(
         center: center?.toLngLat(),
-        zoom: zoom,
-        bearing: bearing,
-        pitch: pitch,
+        zoom: zoom ?? camera.zoom,
+        bearing: bearing ?? camera.bearing,
+        pitch: pitch ?? camera.pitch,
       ),
     );
   }
@@ -265,12 +266,13 @@ final class MapLibreMapStateWeb extends MapLibreMapState {
   }) async {
     final destination = center?.toLngLat();
     _nextGestureCausedByController = true;
+    final camera = getCamera();
     _map.flyTo(
       interop.FlyToOptions(
         center: destination,
-        zoom: zoom,
-        bearing: bearing,
-        pitch: pitch,
+        zoom: zoom ?? camera.zoom,
+        bearing: bearing ?? camera.bearing,
+        pitch: pitch ?? camera.pitch,
         speed: webSpeed,
         maxDuration: webMaxDuration?.inMilliseconds,
       ),
@@ -313,20 +315,22 @@ final class MapLibreMapStateWeb extends MapLibreMapState {
     double webMaxZoom = double.maxFinite,
     bool webLinear = false,
     EdgeInsets padding = EdgeInsets.zero,
-  }) async =>
-      _map.fitBounds(
-        bounds.toJsLngLatBounds(),
-        interop.FitBoundsOptions(
-          offset: offset.toJsPoint(),
-          maxZoom: webMaxZoom,
-          linear: webLinear,
-          maxDuration: webMaxDuration?.inMilliseconds,
-          padding: padding.toPaddingOptions(),
-          speed: webSpeed,
-          pitch: pitch,
-          bearing: bearing,
-        ),
-      );
+  }) async {
+    final camera = getCamera();
+    _map.fitBounds(
+      bounds.toJsLngLatBounds(),
+      interop.FitBoundsOptions(
+        offset: offset.toJsPoint(),
+        maxZoom: webMaxZoom,
+        linear: webLinear,
+        maxDuration: webMaxDuration?.inMilliseconds,
+        padding: padding.toPaddingOptions(),
+        speed: webSpeed,
+        pitch: pitch ?? camera.pitch,
+        bearing: bearing ?? camera.bearing,
+      ),
+    );
+  }
 
   @override
   MapCamera getCamera() => MapCamera(

lib/src/ui/map_compass.dart

@@ -16,6 +16,8 @@ class MapCompass extends StatelessWidget {
     super.key,
     this.rotationOffset = 0,
     this.rotationDuration = const Duration(milliseconds: 200),
+    this.webRotationSpeed = 1.2,
+    this.removePinchOnPressed = false,
     this.rotateNorthOnPressed = true,
     this.onPressed,
     this.hideIfRotatedNorth = false,
@@ -40,6 +42,11 @@ class MapCompass extends StatelessWidget {
   /// Defaults to true.
   final bool rotateNorthOnPressed;
 
+  /// Reset the camera pinch / tilt back to 0 when clicked.
+  ///
+  /// Defaults to false.
+  final bool removePinchOnPressed;
+
   /// Set to true to hide the compass while the map is not rotated.
   ///
   /// Defaults to false (always visible).
@@ -60,6 +67,9 @@ class MapCompass extends StatelessWidget {
   /// Default to 200 ms.
   final Duration rotationDuration;
 
+  /// The speed of the rotation animation on web.
+  final double webRotationSpeed;
+
   /// The compass radius.
   final double radius;
 
@@ -80,15 +90,7 @@ class MapCompass extends StatelessWidget {
         angle: (-camera.bearing + rotationOffset) * degree2Radian,
         child: PointerInterceptor(
           child: InkWell(
-            onTap: () {
-              if (rotateNorthOnPressed) {
-                controller.animateCamera(
-                  bearing: 0,
-                  nativeDuration: rotationDuration,
-                );
-              }
-              onPressed?.call();
-            },
+            onTap: () => _onTap(controller),
             child: child ??
                 CustomPaint(
                   painter: _CompassPainter(radius: radius),
@@ -99,6 +101,18 @@ class MapCompass extends StatelessWidget {
       ),
     );
   }
+
+  void _onTap(MapController controller) {
+    if (rotateNorthOnPressed || removePinchOnPressed) {
+      controller.animateCamera(
+        bearing: rotateNorthOnPressed ? 0 : null,
+        pitch: removePinchOnPressed ? 0 : null,
+        nativeDuration: rotationDuration,
+        webSpeed: webRotationSpeed,
+      );
+    }
+    onPressed?.call();
+  }
 }
 
 class _CompassPainter extends CustomPainter {

lib/src/ui/map_control_buttons.dart

@@ -77,6 +77,7 @@ class _MapControlButtonsState extends State<MapControlButtons> {
       padding: widget.padding,
       child: PointerInterceptor(
         child: Column(
+          spacing: 8,
           mainAxisSize: MainAxisSize.min,
           children: [
             FloatingActionButton(
@@ -87,7 +88,6 @@ class _MapControlButtonsState extends State<MapControlButtons> {
               ),
               child: const Icon(Icons.add),
             ),
-            const SizedBox(height: 8),
             FloatingActionButton(
               heroTag: 'MapLibreZoomOutButton',
               onPressed: () => controller.animateCamera(
@@ -97,7 +97,6 @@ class _MapControlButtonsState extends State<MapControlButtons> {
               child: const Icon(Icons.remove),
             ),
             if (!kIsWeb && widget.showTrackLocation) ...[
-              const SizedBox(height: 8),
               FloatingActionButton(
                 heroTag: 'MapLibreTrackLocationButton',
                 onPressed: () async => _initializeLocation(controller),