Skip to content

Commit

Permalink
Added hitValue and generic typing to Polylines, and reflected cha…
Browse files Browse the repository at this point in the history 
…nge elsewhere

Removed polyline simplification precomputer
Reorganised polyline-related source files
Fixed bugs and improved efficiency
  • Loading branch information
@JaffaKetchup
JaffaKetchup committed Jan 10, 2024
1 parent cd4cc0a commit 7aac486
Show file tree
Hide file tree
Showing 10 changed files with 740 additions and 771 deletions.
174 changes: 90 additions & 84 deletions example/lib/pages/polyline.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import 'package:flutter_map_example/misc/tile_providers.dart';
import 'package:flutter_map_example/widgets/drawer/menu_drawer.dart';
import 'package:latlong2/latlong.dart';

typedef PolylineHitValue = ({String title, String subtitle});

class PolylinePage extends StatefulWidget {
static const String route = '/polyline';

Expand All @@ -17,95 +19,104 @@ class PolylinePage extends StatefulWidget {
}

class _PolylinePageState extends State<PolylinePage> {
final PolylineHitNotifier _hitNotifier = ValueNotifier(null);
List<Polyline>? _prevHitLines;
List<Polyline>? _hoverLines;
final PolylineHitNotifier<PolylineHitValue> _hitNotifier =
ValueNotifier(null);
List<PolylineHitValue>? _prevHitValues;
List<Polyline<PolylineHitValue>>? _hoverLines;

final _polylines = <Polyline, ({String title, String subtitle})>{
Polyline(
final _polylinesRaw = <Polyline<PolylineHitValue>>[
const Polyline(
points: [
const LatLng(51.5, -0.09),
const LatLng(53.3498, -6.2603),
const LatLng(48.8566, 2.3522),
LatLng(51.5, -0.09),
LatLng(53.3498, -6.2603),
LatLng(48.8566, 2.3522),
],
strokeWidth: 8,
color: const Color(0xFF60399E),
): (
title: 'Elizabeth Line',
subtitle: 'Nothing really special here...',
color: Color(0xFF60399E),
hitValue: (
title: 'Elizabeth Line',
subtitle: 'Nothing really special here...',
),
),
Polyline(
const Polyline(
points: [
const LatLng(48.5, -3.09),
const LatLng(47.3498, -9.2603),
const LatLng(43.8566, -1.3522),
LatLng(48.5, -3.09),
LatLng(47.3498, -9.2603),
LatLng(43.8566, -1.3522),
],
strokeWidth: 16000,
color: Colors.pink,
useStrokeWidthInMeter: true,
): (
title: 'Pink Line',
subtitle: 'Fixed radius in meters instead of pixels',
hitValue: (
title: 'Pink Line',
subtitle: 'Fixed radius in meters instead of pixels',
),
),
Polyline(
const Polyline(
points: [
const LatLng(55.5, -0.09),
const LatLng(54.3498, -6.2603),
const LatLng(52.8566, 2.3522),
LatLng(55.5, -0.09),
LatLng(54.3498, -6.2603),
LatLng(52.8566, 2.3522),
],
strokeWidth: 4,
gradientColors: [
const Color(0xffE40203),
const Color(0xffFEED00),
const Color(0xff007E2D),
Color(0xffE40203),
Color(0xffFEED00),
Color(0xff007E2D),
],
): (
title: 'Traffic Light Line',
subtitle: 'Fancy gradient instead of a solid color',
hitValue: (
title: 'Traffic Light Line',
subtitle: 'Fancy gradient instead of a solid color',
),
),
Polyline(
points: [
const LatLng(50.5, -0.09),
const LatLng(51.3498, 6.2603),
const LatLng(53.8566, 2.3522),
points: const [
LatLng(50.5, -0.09),
LatLng(51.3498, 6.2603),
LatLng(53.8566, 2.3522),
],
strokeWidth: 20,
color: Colors.blue.withOpacity(0.6),
borderStrokeWidth: 20,
borderColor: Colors.red.withOpacity(0.4),
): (
title: 'BlueRed Line',
subtitle: 'Solid translucent color fill, with different color outline',
hitValue: (
title: 'BlueRed Line',
subtitle: 'Solid translucent color fill, with different color outline',
),
),
Polyline(
points: [
const LatLng(50.2, -0.08),
const LatLng(51.2498, -10.2603),
const LatLng(54.8566, -9.3522),
points: const [
LatLng(50.2, -0.08),
LatLng(51.2498, -10.2603),
LatLng(54.8566, -9.3522),
],
strokeWidth: 20,
color: Colors.black.withOpacity(0.2),
borderStrokeWidth: 20,
borderColor: Colors.white30,
): (
title: 'BlackWhite Line',
subtitle: 'Solid translucent color fill, with different color outline',
hitValue: (
title: 'BlackWhite Line',
subtitle: 'Solid translucent color fill, with different color outline',
),
),
Polyline(
points: [
const LatLng(49.1, -0.06),
const LatLng(52.15, -1.4),
const LatLng(55.5, 0.8),
points: const [
LatLng(49.1, -0.06),
LatLng(52.15, -1.4),
LatLng(55.5, 0.8),
],
strokeWidth: 10,
color: Colors.yellow,
borderStrokeWidth: 10,
borderColor: Colors.blue.withOpacity(0.5),
): (
title: 'YellowBlue Line',
subtitle: 'Solid translucent color fill, with different color outline',
hitValue: (
title: 'YellowBlue Line',
subtitle: 'Solid translucent color fill, with different color outline',
),
),
};
];
late final _polylines =
Map.fromEntries(_polylinesRaw.map((e) => MapEntry(e.hitValue, e)));

final _randomWalk = [const LatLng(44.861294, 13.845086)];

Expand Down Expand Up @@ -146,54 +157,51 @@ class _PolylinePageState extends State<PolylinePage> {
hitTestBehavior: HitTestBehavior.deferToChild,
cursor: SystemMouseCursors.click,
onHover: (_) {
// Filter out hover outlines, and ignore if no lines were hit
final hitLines = _hitNotifier.value?.lines
.where((e) => _polylines.containsKey(e))
.toList();
if (hitLines == null) return;
final hitValues = _hitNotifier.value?.hitValues.toList();
if (hitValues == null) return;

if (listEquals(hitValues, _prevHitValues)) return;
_prevHitValues = hitValues;

// Avoid unnecessary rebuilds if no new lines were hit
if (listEquals(hitLines, _prevHitLines)) return;
_prevHitLines = hitLines;
final hoverLines = hitValues.map((v) {
final original = _polylines[v]!;

// Create hover outlines and add them to the map
final hoverLines = hitLines
.map(
(e) => Polyline(
points: e.points,
strokeWidth: e.strokeWidth + e.borderStrokeWidth,
color: Colors.transparent,
borderStrokeWidth: 15,
borderColor: Colors.green,
useStrokeWidthInMeter: e.useStrokeWidthInMeter,
),
)
.toList();
return Polyline<PolylineHitValue>(
points: original.points,
strokeWidth:
original.strokeWidth + original.borderStrokeWidth,
color: Colors.transparent,
borderStrokeWidth: 15,
borderColor: Colors.green,
useStrokeWidthInMeter: original.useStrokeWidthInMeter,
);
}).toList();
setState(() => _hoverLines = hoverLines);
},
// Clear hovered lines when touched lines modal appears
onExit: (_) => setState(() => _hoverLines = null),
onExit: (_) {
_prevHitValues = null;
setState(() => _hoverLines = null);
},
child: GestureDetector(
onTap: () => _openTouchedLinesModal(
'Tapped',
_hitNotifier.value!.lines,
_hitNotifier.value!.hitValues,
_hitNotifier.value!.point,
),
onLongPress: () => _openTouchedLinesModal(
'Long pressed',
_hitNotifier.value!.lines,
_hitNotifier.value!.hitValues,
_hitNotifier.value!.point,
),
onSecondaryTap: () => _openTouchedLinesModal(
'Secondary tapped',
_hitNotifier.value!.lines,
_hitNotifier.value!.hitValues,
_hitNotifier.value!.point,
),
child: PolylineLayer(
hitNotifier: _hitNotifier,
//simplificationTolerance: null,
polylines:
_polylines.keys.followedBy(_hoverLines ?? []).toList(),
simplificationTolerance: null,
polylines: [..._polylinesRaw, ...?_hoverLines],
),
),
),
Expand Down Expand Up @@ -228,11 +236,9 @@ class _PolylinePageState extends State<PolylinePage> {

void _openTouchedLinesModal(
String eventType,
List<Polyline> tappedLines,
List<PolylineHitValue> tappedLines,
LatLng coords,
) {
tappedLines.removeWhere((e) => !_polylines.containsKey(e));

showModalBottomSheet<void>(
context: context,
builder: (context) => Padding(
Expand All @@ -251,7 +257,7 @@ class _PolylinePageState extends State<PolylinePage> {
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
final tappedLineData = _polylines[tappedLines[index]]!;
final tappedLineData = tappedLines[index];
return ListTile(
leading: index == 0
? const Icon(Icons.vertical_align_top)
Expand Down
2 changes: 1 addition & 1 deletion lib/flutter_map.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export 'package:flutter_map/src/layer/general/translucent_pointer.dart';
export 'package:flutter_map/src/layer/marker_layer.dart';
export 'package:flutter_map/src/layer/overlay_image_layer.dart';
export 'package:flutter_map/src/layer/polygon_layer/polygon_layer.dart';
export 'package:flutter_map/src/layer/polyline_layer.dart';
export 'package:flutter_map/src/layer/polyline_layer/polyline_layer.dart';
export 'package:flutter_map/src/layer/tile_layer/tile_builder.dart';
export 'package:flutter_map/src/layer/tile_layer/tile_coordinates.dart';
export 'package:flutter_map/src/layer/tile_layer/tile_display.dart';
Expand Down
Loading

0 comments on commit 7aac486

Please sign in to comment.