Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf!: add simplification caching to PolygonLayer & other performance improvements #1795

Merged
merged 7 commits into from
Jan 15, 2024
Merged

perf!: add simplification caching to PolygonLayer & other performance improvements #1795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
24a0f05
Added simplification caching to `PolygonLayer` (consistent with `Poly…
JaffaKetchup Jan 13, 2024
c7ff48f
Added `RepaintBoundary` widget around all other children
JaffaKetchup Jan 14, 2024
71ada5d
Minor example app improvements
JaffaKetchup Jan 14, 2024
583436d
Merge branch 'master' into polygon-simplification-caching
JaffaKetchup Jan 15, 2024
979daa4
Merge branch 'master' into polygon-simplification-caching
JaffaKetchup Jan 15, 2024
fb8144a
Update full_coverage_test.dart
josxha Jan 15, 2024
0d13ef6
Applied review comment
JaffaKetchup Jan 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/assets/138k-polygon-points.geojson.noformat
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ import 'package:flutter_map_example/pages/overlay_image.dart';
import 'package:flutter_map_example/pages/plugin_scalebar.dart';
import 'package:flutter_map_example/pages/plugin_zoombuttons.dart';
import 'package:flutter_map_example/pages/polygon.dart';
import 'package:flutter_map_example/pages/polygon_perf_stress.dart';
import 'package:flutter_map_example/pages/polyline.dart';
import 'package:flutter_map_example/pages/polyline_perf_stress.dart';
import 'package:flutter_map_example/pages/reset_tile_layer.dart';
import 'package:flutter_map_example/pages/retina.dart';
import 'package:flutter_map_example/pages/screen_point_to_latlng.dart';
Expand Down Expand Up @@ -53,6 +55,8 @@ class MyApp extends StatelessWidget {
CancellableTileProviderPage.route: (context) =>
const CancellableTileProviderPage(),
PolylinePage.route: (context) => const PolylinePage(),
PolylinePerfStressPage.route: (context) =>
const PolylinePerfStressPage(),
MapControllerPage.route: (context) => const MapControllerPage(),
AnimatedMapControllerPage.route: (context) =>
const AnimatedMapControllerPage(),
Expand All @@ -65,6 +69,7 @@ class MyApp extends StatelessWidget {
CirclePage.route: (context) => const CirclePage(),
OverlayImagePage.route: (context) => const OverlayImagePage(),
PolygonPage.route: (context) => const PolygonPage(),
PolygonPerfStressPage.route: (context) => const PolygonPerfStressPage(),
SlidingMapPage.route: (_) => const SlidingMapPage(),
WMSLayerPage.route: (context) => const WMSLayerPage(),
CustomCrsPage.route: (context) => const CustomCrsPage(),
Expand Down
77 changes: 42 additions & 35 deletions example/lib/pages/many_circles.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.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';
import 'package:latlong2/latlong.dart';

const maxCirclesCount = 20000;
const _maxCirclesCount = 20000;

/// On this page, [maxCirclesCount] circles are randomly generated
/// 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
Expand All @@ -26,20 +27,18 @@ class ManyCirclesPageState extends State<ManyCirclesPage> {
source.nextDouble() * (end - start) + start;
List<CircleMarker> allCircles = [];

int _sliderVal = maxCirclesCount ~/ 10;
static const int _initialNumOfCircles = _maxCirclesCount ~/ 10;
int numOfCircles = _initialNumOfCircles;

@override
void initState() {
super.initState();
Future.microtask(() {
final r = Random();
for (var x = 0; x < maxCirclesCount; x++) {
for (var x = 0; x < _maxCirclesCount; x++) {
allCircles.add(
CircleMarker(
point: LatLng(
doubleInRange(r, 37, 55),
doubleInRange(r, -9, 30),
),
point: LatLng(doubleInRange(r, 37, 55), doubleInRange(r, -9, 30)),
color: Colors.red,
radius: 5,
),
Expand All @@ -52,38 +51,46 @@ class ManyCirclesPageState extends State<ManyCirclesPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('A lot of circles')),
appBar: AppBar(title: const Text('Many Circles')),
drawer: const MenuDrawer(ManyCirclesPage.route),
body: Column(
body: Stack(
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,
FlutterMap(
options: MapOptions(
initialCameraFit: CameraFit.bounds(
bounds: LatLngBounds(
const LatLng(55, -9),
const LatLng(37, 30),
),
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 88,
bottom: 192,
),
),
children: [
openStreetMapTileLayer,
CircleLayer(
circles: allCircles.sublist(
0, min(allCircles.length, _sliderVal))),
],
),
children: [
openStreetMapTileLayer,
CircleLayer(circles: allCircles.take(numOfCircles).toList()),
],
),
Positioned(
left: 16,
top: 16,
right: 16,
child: NumberOfItemsSlider(
itemDescription: 'Circle',
maxNumber: _maxCirclesCount,
initialNumber: _initialNumOfCircles,
onChangedNumber: (v) => setState(() => numOfCircles = v),
),
),
Positioned(
bottom: 16,
left: 0,
right: 0,
child: PerformanceOverlay.allEnabled(),
),
],
),
Expand Down
75 changes: 41 additions & 34 deletions example/lib/pages/many_markers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.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';
import 'package:latlong2/latlong.dart';

const maxMarkersCount = 20000;
const _maxMarkersCount = 20000;

/// On this page, [maxMarkersCount] markers are randomly generated
/// On this page, [_maxMarkersCount] markers 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 markers
Expand All @@ -26,14 +27,15 @@ class ManyMarkersPageState extends State<ManyMarkersPage> {
source.nextDouble() * (end - start) + start;
List<Marker> allMarkers = [];

int _sliderVal = maxMarkersCount ~/ 10;
static const int _initialNumOfMarkers = _maxMarkersCount ~/ 10;
int numOfMarkers = _initialNumOfMarkers;

@override
void initState() {
super.initState();
Future.microtask(() {
final r = Random();
for (var x = 0; x < maxMarkersCount; x++) {
for (var x = 0; x < _maxMarkersCount; x++) {
allMarkers.add(
Marker(
point: LatLng(doubleInRange(r, 37, 55), doubleInRange(r, -9, 30)),
Expand All @@ -50,41 +52,46 @@ class ManyMarkersPageState extends State<ManyMarkersPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('A lot of markers')),
appBar: AppBar(title: const Text('Many Markers')),
drawer: const MenuDrawer(ManyMarkersPage.route),
body: Column(
body: Stack(
children: [
Slider(
min: 0,
max: maxMarkersCount.toDouble(),
divisions: maxMarkersCount ~/ 500,
label: 'Markers',
value: _sliderVal.toDouble(),
onChanged: (newVal) {
_sliderVal = newVal.toInt();
setState(() {});
},
),
Text('$_sliderVal markers'),
Flexible(
child: FlutterMap(
options: const MapOptions(
initialCenter: LatLng(50, 20),
initialZoom: 5,
interactionOptions: InteractionOptions(
flags: InteractiveFlag.all - InteractiveFlag.rotate,
FlutterMap(
options: MapOptions(
initialCameraFit: CameraFit.bounds(
bounds: LatLngBounds(
const LatLng(55, -9),
const LatLng(37, 30),
),
),
children: [
openStreetMapTileLayer,
MarkerLayer(
markers: allMarkers.sublist(
0,
min(allMarkers.length, _sliderVal),
),
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 88,
bottom: 192,
),
],
),
),
children: [
openStreetMapTileLayer,
MarkerLayer(markers: allMarkers.take(numOfMarkers).toList()),
],
),
Positioned(
left: 16,
top: 16,
right: 16,
child: NumberOfItemsSlider(
itemDescription: 'Marker',
maxNumber: _maxMarkersCount,
initialNumber: _initialNumOfMarkers,
onChangedNumber: (v) => setState(() => numOfMarkers = v),
),
),
Positioned(
bottom: 16,
left: 0,
right: 0,
child: PerformanceOverlay.allEnabled(),
),
],
),
Expand Down
Loading