feat: many circles page

fleaflet · Oct 6, 2023 · 201d128 · 201d128
1 parent bc3cc99
commit 201d128
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 0 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -9,6 +9,7 @@ import 'package:flutter_map_example/pages/fallback_url_network_page.dart';
 import 'package:flutter_map_example/pages/home.dart';
 import 'package:flutter_map_example/pages/interactive_test_page.dart';
 import 'package:flutter_map_example/pages/latlng_to_screen_point.dart';
+import 'package:flutter_map_example/pages/many_circles.dart';
 import 'package:flutter_map_example/pages/many_markers.dart';
 import 'package:flutter_map_example/pages/map_controller.dart';
 import 'package:flutter_map_example/pages/map_inside_listview.dart';
@@ -60,6 +61,7 @@ class MyApp extends StatelessWidget {
         PluginZoomButtons.route: (context) => const PluginZoomButtons(),
         OfflineMapPage.route: (context) => const OfflineMapPage(),
         MovingMarkersPage.route: (context) => const MovingMarkersPage(),
+        ManyCirclesPage.route: (context) => const ManyCirclesPage(),
         CirclePage.route: (context) => const CirclePage(),
         OverlayImagePage.route: (context) => const OverlayImagePage(),
         PolygonPage.route: (context) => const PolygonPage(),

diff --git a/example/lib/pages/many_circles.dart b/example/lib/pages/many_circles.dart
@@ -0,0 +1,94 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:flutter_map_example/widgets/drawer.dart';
+import 'package:latlong2/latlong.dart';
+
+const maxCirclesCount = 20000;
+
+/// On this page, [maxCirclesCount] circles are randomly generated
+/// across europe, and then you can limit them with a slider
+///
+/// This way, you can test how map performs under a lot of circles
+class ManyCirclesPage extends StatefulWidget {
+  static const String route = '/many_circles';
+
+  const ManyCirclesPage({Key? key}) : super(key: key);
+
+  @override
+  _ManyCirclesPageState createState() => _ManyCirclesPageState();
+}
+
+class _ManyCirclesPageState extends State<ManyCirclesPage> {
+  double doubleInRange(Random source, num start, num end) =>
+      source.nextDouble() * (end - start) + start;
+  List<CircleMarker> allCircles = [];
+
+  int _sliderVal = maxCirclesCount ~/ 10;
+
+  @override
+  void initState() {
+    super.initState();
+    Future.microtask(() {
+      final r = Random();
+      for (var x = 0; x < maxCirclesCount; x++) {
+        allCircles.add(
+          CircleMarker(
+            point: LatLng(
+              doubleInRange(r, 37, 55),
+              doubleInRange(r, -9, 30),
+            ),
+            color: Colors.red,
+            radius: 5,
+          ),
+        );
+      }
+      setState(() {});
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('A lot of circles')),
+      drawer: buildDrawer(context, ManyCirclesPage.route),
+      body: Column(
+        children: [
+          Slider(
+            min: 0,
+            max: maxCirclesCount.toDouble(),
+            divisions: maxCirclesCount ~/ 500,
+            label: 'Circles',
+            value: _sliderVal.toDouble(),
+            onChanged: (newVal) {
+              _sliderVal = newVal.toInt();
+              setState(() {});
+            },
+          ),
+          Text('$_sliderVal circles'),
+          Flexible(
+            child: FlutterMap(
+              options: const MapOptions(
+                initialCenter: LatLng(50, 20),
+                initialZoom: 5,
+                interactionOptions: InteractionOptions(
+                  flags: InteractiveFlag.all - InteractiveFlag.rotate,
+                ),
+              ),
+              children: [
+                TileLayer(
+                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
+                ),
+                CircleLayer(
+                    circles: allCircles.sublist(
+                        0, min(allCircles.length, _sliderVal))),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/example/lib/widgets/drawer.dart b/example/lib/widgets/drawer.dart
@@ -10,6 +10,7 @@ import 'package:flutter_map_example/pages/fallback_url_network_page.dart';
 import 'package:flutter_map_example/pages/home.dart';
 import 'package:flutter_map_example/pages/interactive_test_page.dart';
 import 'package:flutter_map_example/pages/latlng_to_screen_point.dart';
+import 'package:flutter_map_example/pages/many_circles.dart';
 import 'package:flutter_map_example/pages/many_markers.dart';
 import 'package:flutter_map_example/pages/map_controller.dart';
 import 'package:flutter_map_example/pages/map_inside_listview.dart';
@@ -180,6 +181,12 @@ Drawer buildDrawer(BuildContext context, String currentRoute) {
           MovingMarkersPage.route,
           currentRoute,
         ),
+        _buildMenuItem(
+          context,
+          const Text('Many Circles'),
+          ManyCirclesPage.route,
+          currentRoute,
+        ),
         const Divider(),
         _buildMenuItem(
           context,

diff --git a/lib/src/layer/circle_layer.dart b/lib/src/layer/circle_layer.dart
@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/widgets.dart';
 import 'package:flutter_map/src/map/camera/camera.dart';
 import 'package:latlong2/latlong.dart' hide Path;