feat: add optimizeRadiusInMeters option to CircleLayer (#2101)

Co-authored-by: JaffaKetchup <[email protected]>

Author: monsieurtanuki

example/lib/pages/many_circles.dart

@@ -9,7 +9,7 @@ import 'package:flutter_map_example/widgets/number_of_items_slider.dart';
 import 'package:flutter_map_example/widgets/show_no_web_perf_overlay_snackbar.dart';
 import 'package:latlong2/latlong.dart';
 
-const _maxCirclesCount = 20000;
+const _maxCirclesCount = 30000;
 
 /// On this page, [_maxCirclesCount] circles are randomly generated
 /// across europe, and then you can limit them with a slider
@@ -21,15 +21,19 @@ class ManyCirclesPage extends StatefulWidget {
   const ManyCirclesPage({super.key});
 
   @override
-  ManyCirclesPageState createState() => ManyCirclesPageState();
+  State<ManyCirclesPage> createState() => _ManyCirclesPageState();
 }
 
-class ManyCirclesPageState extends State<ManyCirclesPage> {
-  double doubleInRange(Random source, num start, num end) =>
+class _ManyCirclesPageState extends State<ManyCirclesPage> {
+  static double doubleInRange(Random source, num start, num end) =>
       source.nextDouble() * (end - start) + start;
-  List<CircleMarker> allCircles = [];
 
   int numOfCircles = _maxCirclesCount ~/ 10;
+  List<CircleMarker> allCircles = [];
+
+  bool useBorders = false;
+  bool useRadiusInMeters = false;
+  bool optimizeRadiusInMeters = true;
 
   @override
   void initState() {
@@ -39,12 +43,16 @@ class ManyCirclesPageState extends State<ManyCirclesPage> {
 
     Future.microtask(() {
       final r = Random();
-      for (var x = 0; x < _maxCirclesCount; x++) {
+      for (double x = 0; x < _maxCirclesCount; x++) {
         allCircles.add(
           CircleMarker(
             point: LatLng(doubleInRange(r, 37, 55), doubleInRange(r, -9, 30)),
-            color: Colors.red,
+            color: HSLColor.fromAHSL(1, x % 360, 1, doubleInRange(r, 0.3, 0.7))
+                .toColor(),
             radius: 5,
+            useRadiusInMeter: false,
+            borderStrokeWidth: 0,
+            borderColor: Colors.black,
           ),
         );
       }
@@ -76,18 +84,106 @@ class ManyCirclesPageState extends State<ManyCirclesPage> {
             ),
             children: [
               openStreetMapTileLayer,
-              CircleLayer(circles: allCircles.take(numOfCircles).toList()),
+              CircleLayer(
+                circles: allCircles.take(numOfCircles).toList(growable: false),
+                optimizeRadiusInMeters: optimizeRadiusInMeters,
+              ),
             ],
           ),
           Positioned(
             left: 16,
             top: 16,
             right: 16,
-            child: NumberOfItemsSlider(
-              number: numOfCircles,
-              onChanged: (v) => setState(() => numOfCircles = v),
-              maxNumber: _maxCirclesCount,
-              itemDescription: 'Circle',
+            child: RepaintBoundary(
+              child: Column(
+                children: [
+                  NumberOfItemsSlider(
+                    number: numOfCircles,
+                    onChanged: (v) => setState(() => numOfCircles = v),
+                    maxNumber: _maxCirclesCount,
+                    itemDescription: 'Circle',
+                  ),
+                  const SizedBox(height: 12),
+                  UnconstrainedBox(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).colorScheme.surface,
+                        borderRadius: BorderRadius.circular(32),
+                      ),
+                      padding: const EdgeInsets.symmetric(
+                        vertical: 4,
+                        horizontal: 16,
+                      ),
+                      child: Row(
+                        children: [
+                          const Tooltip(
+                            message: 'Use Borders',
+                            child: Icon(Icons.circle_outlined),
+                          ),
+                          const SizedBox(width: 8),
+                          Switch.adaptive(
+                            value: useBorders,
+                            onChanged: (v) {
+                              allCircles = allCircles
+                                  .map(
+                                    (c) => CircleMarker(
+                                      point: c.point,
+                                      radius: c.radius,
+                                      color: c.color,
+                                      useRadiusInMeter: c.useRadiusInMeter,
+                                      borderColor: c.borderColor,
+                                      borderStrokeWidth: v ? 5 : 0,
+                                    ),
+                                  )
+                                  .toList(growable: false);
+                              useBorders = v;
+                              setState(() {});
+                            },
+                          ),
+                          const SizedBox(width: 16),
+                          const Tooltip(
+                            message: 'Use Radius In Meters',
+                            child: Icon(Icons.straighten),
+                          ),
+                          const SizedBox(width: 8),
+                          Switch.adaptive(
+                            value: useRadiusInMeters,
+                            onChanged: (v) {
+                              allCircles = allCircles
+                                  .map(
+                                    (c) => CircleMarker(
+                                      point: c.point,
+                                      radius: v ? 25000 : 5,
+                                      color: c.color,
+                                      useRadiusInMeter: v,
+                                      borderColor: c.borderColor,
+                                      borderStrokeWidth: c.borderStrokeWidth,
+                                    ),
+                                  )
+                                  .toList(growable: false);
+                              useRadiusInMeters = v;
+                              setState(() {});
+                            },
+                          ),
+                          const SizedBox(width: 16),
+                          const Tooltip(
+                            message: 'Optimise Meters Radius',
+                            child: Icon(Icons.speed_rounded),
+                          ),
+                          const SizedBox(width: 8),
+                          Switch.adaptive(
+                            value: optimizeRadiusInMeters,
+                            onChanged: useRadiusInMeters
+                                ? (v) =>
+                                    setState(() => optimizeRadiusInMeters = v)
+                                : null,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
           if (!kIsWeb)

lib/src/layer/circle_layer/circle_layer.dart

@@ -8,6 +8,7 @@ import 'package:flutter_map/src/layer/shared/layer_interactivity/internal_hit_de
 import 'package:latlong2/latlong.dart' hide Path;
 
 part 'circle_marker.dart';
+
 part 'painter.dart';
 
 /// A layer that displays a list of [CircleMarker] on the map
@@ -19,11 +20,33 @@ class CircleLayer<R extends Object> extends StatelessWidget {
   /// {@macro fm.lhn.layerHitNotifier.usage}
   final LayerHitNotifier<R>? hitNotifier;
 
+  /// Whether to use a single meters to pixels conversion ratio for all circles
+  /// with [CircleMarker.useRadiusInMeter] enabled
+  ///
+  /// > [!IMPORTANT]
+  /// > This reduces the accuracy of the radius of circles. Depending on the
+  /// > location of the circles, this may or may not be significant.
+  ///
+  /// Where all circles within this layer are geographically (particularly
+  /// latitudinally) close, the difference in the ratio between pixels and
+  /// meters between circles is likely to be small. Calculating this
+  /// conversion ratio is expensive, and is usually done for every circle to
+  /// ensure accuracy, as the ratio depends on the latitude. Setting this `true`
+  /// means the ratio is calculated based off the first circle only, then reused
+  /// for all other circles within this layer.
+  ///
+  /// This should not be used where circles are geographically spread out - it
+  /// is best suited, for example, for circles located within a single city.
+  ///
+  /// Defaults to `false`.
+  final bool optimizeRadiusInMeters;
+
   /// Create a new [CircleLayer] as a child for [FlutterMap]
   const CircleLayer({
     super.key,
     required this.circles,
     this.hitNotifier,
+    this.optimizeRadiusInMeters = false,
   });
 
   @override
@@ -36,6 +59,7 @@ class CircleLayer<R extends Object> extends StatelessWidget {
           circles: circles,
           camera: camera,
           hitNotifier: hitNotifier,
+          optimizeRadiusInMeters: optimizeRadiusInMeters,
         ),
         size: camera.size,
         isComplex: true,

lib/src/layer/circle_layer/circle_marker.dart

@@ -12,6 +12,8 @@ class CircleMarker<R extends Object> with HitDetectableElement<R> {
   final LatLng point;
 
   /// The radius of the circle
+  ///
+  /// Measured in pixels, unless [useRadiusInMeter] is set.
   final double radius;
 
   /// The color of the circle area.
@@ -24,7 +26,7 @@ class CircleMarker<R extends Object> with HitDetectableElement<R> {
   /// to be visible.
   final Color borderColor;
 
-  /// Set to true if the radius should use the unit meters.
+  /// Whether to treat [radius] as a measurement in meters instead of pixels.
   final bool useRadiusInMeter;
 
   @override

lib/src/layer/circle_layer/painter.dart

@@ -12,12 +12,16 @@ class CirclePainter<R extends Object> extends CustomPainter
   @override
   final LayerHitNotifier<R>? hitNotifier;
 
+  /// If true, we reuse the same "meter in pixels" computation for all circles.
+  final bool optimizeRadiusInMeters;
+
   /// Create a [CirclePainter] instance by providing the required
   /// reference objects.
   CirclePainter({
     required this.circles,
     required this.camera,
     required this.hitNotifier,
+    required this.optimizeRadiusInMeters,
   });
 
   @override
@@ -26,7 +30,7 @@ class CirclePainter<R extends Object> extends CustomPainter
     required Offset point,
     required LatLng coordinate,
   }) {
-    final radius = _getRadiusInPixel(element, withBorder: true);
+    final radius = _getRadiusInPixel(element) + element.borderStrokeWidth / 2;
     final initialCenter = _getOffset(element.point);
 
     WorldWorkControl checkIfHit(double shift) {
@@ -56,9 +60,11 @@ class CirclePainter<R extends Object> extends CustomPainter
     final points = <Color, Map<double, List<Offset>>>{};
     final pointsFilledBorder = <Color, Map<double, List<Offset>>>{};
     final pointsBorder = <Color, Map<double, Map<double, List<Offset>>>>{};
+    _pixelsPerMeter = null;
     for (final circle in circles) {
-      final radiusWithoutBorder = _getRadiusInPixel(circle, withBorder: false);
-      final radiusWithBorder = _getRadiusInPixel(circle, withBorder: true);
+      final radiusWithoutBorder = _getRadiusInPixel(circle);
+      final radiusWithBorder =
+          radiusWithoutBorder + circle.borderStrokeWidth / 2;
       final initialCenter = _getOffset(circle.point);
 
       /// Draws on a "single-world"
@@ -163,11 +169,22 @@ class CirclePainter<R extends Object> extends CustomPainter
 
   Offset _getOffset(LatLng pos) => camera.getOffsetFromOrigin(pos);
 
-  double _getRadiusInPixel(CircleMarker circle, {required bool withBorder}) =>
-      (withBorder ? circle.borderStrokeWidth / 2 : 0) +
-      (circle.useRadiusInMeter
-          ? metersToScreenPixels(circle.point, circle.radius)
-          : circle.radius);
+  // Cached number of pixels per meter.
+  double? _pixelsPerMeter;
+
+  double _getRadiusInPixel(CircleMarker circle) {
+    if (!circle.useRadiusInMeter) {
+      return circle.radius;
+    }
+    if (!optimizeRadiusInMeters) {
+      return metersToScreenPixels(circle.point, circle.radius);
+    }
+    if (_pixelsPerMeter == null) {
+      final result = metersToScreenPixels(circle.point, circle.radius);
+      _pixelsPerMeter = result / circle.radius;
+    }
+    return _pixelsPerMeter! * circle.radius;
+  }
 
   /// Returns true if a centered circle with this radius is on the screen.
   bool _isVisible({