feat: [WIP] use custom render objects for MarkerLayer

example/lib/misc/test_marker.dart

@@ -0,0 +1,63 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:latlong2/latlong.dart';
+
+final _randomGenerator = Random(10);
+
+class TestMarker extends StatefulWidget {
+  const TestMarker({super.key, required this.point});
+
+  final LatLng point;
+
+  @override
+  State<TestMarker> createState() => _TestMarkerState();
+}
+
+class _TestMarkerState extends State<TestMarker> {
+  Timer? _tapSelected;
+  bool _hoverSelected = false;
+
+  bool get _isSelected => _tapSelected != null || _hoverSelected;
+
+  late final _unselectedColor = Color.fromARGB(
+    255,
+    _randomGenerator.nextInt(256),
+    _randomGenerator.nextInt(256),
+    _randomGenerator.nextInt(256),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    print('built ${widget.point}');
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: _isSelected ? Colors.green : Colors.black.withAlpha(51),
+          width: _isSelected ? 3 : 1,
+        ),
+      ),
+      child: MouseRegion(
+        onEnter: (_) => setState(() => _hoverSelected = true),
+        onExit: (_) => setState(() => _hoverSelected = false),
+        child: GestureDetector(
+          onTap: () => setState(() {
+            _tapSelected?.cancel();
+            _tapSelected = Timer(
+              const Duration(seconds: 1),
+              () {
+                if (mounted) setState(() => _tapSelected = null);
+              },
+            );
+          }),
+          child: Icon(
+            Icons.location_pin,
+            size: 40,
+            color: _isSelected ? Colors.green : _unselectedColor,
+          ),
+        ),
+      ),
+    );
+  }
+}

example/lib/pages/many_markers.dart

@@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/misc/test_marker.dart';
 import 'package:flutter_map_example/misc/tile_providers.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:flutter_map_example/widgets/number_of_items_slider.dart';
@@ -39,37 +40,19 @@ class ManyMarkersPageState extends State<ManyMarkersPage> {
           distance * sin(angle) * (0.7 + randomGenerator.nextDouble() * 0.6);
       final lngOffset =
           distance * cos(angle) * (0.7 + randomGenerator.nextDouble() * 0.6);
-      final position = LatLng(
+      final point = LatLng(
         _londonOrigin.latitude + latOffset,
         _londonOrigin.longitude + lngOffset,
       );
 
       return Marker(
-        point: position,
-        width: 30,
-        height: 30,
-        child: GestureDetector(
-          onTap: () => ScaffoldMessenger.of(context).showSnackBar(
-            SnackBar(
-              content: Text(
-                'Tapped existing marker (${position.latitude}, '
-                '${position.longitude})',
-              ),
-              duration: const Duration(seconds: 1),
-              showCloseIcon: true,
-            ),
-          ),
-          child: Icon(
-            Icons.location_pin,
-            size: 30,
-            color: Color.fromARGB(
-              255,
-              randomGenerator.nextInt(256),
-              randomGenerator.nextInt(256),
-              randomGenerator.nextInt(256),
-            ),
-          ),
-        ),
+        point: point,
+        // TODO: Part of what's being tested is removing these w/h. But we can't
+        // perform culling before build without - but maybe that's not too
+        // necessary now?
+        // width: 30,
+        // height: 30,
+        child: TestMarker(point: point),
       );
     },
   );
@@ -100,6 +83,7 @@ class ManyMarkersPageState extends State<ManyMarkersPage> {
             children: [
               openStreetMapTileLayer,
               MarkerLayer(
+                alignment: Alignment.topCenter,
                 markers: allMarkers
                     .take(displayedMarkersCount)
                     .toList(growable: false),

example/lib/pages/markers.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/misc/test_marker.dart';
 import 'package:flutter_map_example/misc/tile_providers.dart';
 import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
 import 'package:latlong2/latlong.dart';
@@ -30,24 +31,18 @@ class _MarkerPageState extends State<MarkerPage> {
   };
 
   late final customMarkers = <Marker>[
-    buildPin(const LatLng(51.51868093513547, -0.12835376940892318)),
-    buildPin(const LatLng(53.33360293799854, -6.284001062079881)),
+    buildPin(const LatLng(51.5186809, -0.1283537)),
+    buildPin(const LatLng(53.3336029, -6.2840010)),
   ];
 
   Marker buildPin(LatLng point) => Marker(
         point: point,
-        width: 60,
-        height: 60,
-        child: GestureDetector(
-          onTap: () => ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(
-              content: Text('Tapped existing marker'),
-              duration: Duration(seconds: 1),
-              showCloseIcon: true,
-            ),
-          ),
-          child: const Icon(Icons.location_pin, size: 60, color: Colors.black),
-        ),
+        // TODO: Part of what's being tested is removing these w/h. But we can't
+        // perform culling before build without - but maybe that's not too
+        // necessary now?
+        // width: 60,
+        // height: 60,
+        child: TestMarker(point: point),
       );
 
   @override
@@ -128,37 +123,46 @@ class _MarkerPageState extends State<MarkerPage> {
                 openStreetMapTileLayer,
                 MarkerLayer(
                   rotate: counterRotate,
-                  markers: const [
+                  markers: [
                     Marker(
                       point: LatLng(47.18664724067855, -1.5436768515939427),
-                      width: 64,
-                      height: 64,
+                      //width: 64,
+                      //height: 64,
                       alignment: Alignment.centerLeft,
-                      child: ColoredBox(
-                        color: Colors.lightBlue,
-                        child: Align(
-                          alignment: Alignment.centerRight,
-                          child: Text('-->'),
+                      child: SizedBox.square(
+                        dimension: 64,
+                        child: ColoredBox(
+                          color: Colors.lightBlue,
+                          child: Align(
+                            alignment: Alignment.centerRight,
+                            child: Text('-->'),
+                          ),
                         ),
                       ),
                     ),
                     Marker(
                       point: LatLng(47.18664724067855, -1.5436768515939427),
-                      width: 64,
-                      height: 64,
+                      //width: 64,
+                      //height: 64,
                       alignment: Alignment.centerRight,
-                      child: ColoredBox(
-                        color: Colors.pink,
-                        child: Align(
-                          alignment: Alignment.centerLeft,
-                          child: Text('<--'),
+                      child: SizedBox.square(
+                        dimension: 64,
+                        child: ColoredBox(
+                          color: Colors.pink,
+                          child: Align(
+                            alignment: Alignment.centerLeft,
+                            child: Text('<--'),
+                          ),
                         ),
                       ),
                     ),
                     Marker(
                       point: LatLng(47.18664724067855, -1.5436768515939427),
                       rotate: false,
-                      child: ColoredBox(color: Colors.black),
+                      child: SizedBox.square(
+                        dimension: 24,
+                        child: ColoredBox(color: Colors.black),
+                      ),
                     ),
                   ],
                 ),