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

Fixed incorrect Marker anchoring when counter-rotating #1623

Merged
merged 3 commits into from
Sep 8, 2023
Merged

Fixed incorrect Marker anchoring when counter-rotating #1623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2820a74
Fixed #1500
JaffaKetchup Aug 26, 2023
f7721e2
Merge branch 'master' into fix-1500
JaffaKetchup Aug 27, 2023
ca2ca75
Merge branch 'master' into fix-1500
JaffaKetchup Sep 8, 2023
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
259 changes: 127 additions & 132 deletions example/lib/pages/markers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,28 @@ class MarkerPage extends StatefulWidget {

class MarkerPageState extends State<MarkerPage> {
final alignments = {
315: AnchorAlign.topLeft,
0: AnchorAlign.top,
45: AnchorAlign.topRight,
270: AnchorAlign.left,
null: AnchorAlign.center,
90: AnchorAlign.right,
225: AnchorAlign.bottomLeft,
180: AnchorAlign.bottom,
135: AnchorAlign.bottomRight,
315: Alignment.topLeft,
0: Alignment.topCenter,
45: Alignment.topRight,
270: Alignment.centerLeft,
null: Alignment.center,
90: Alignment.centerRight,
225: Alignment.bottomLeft,
180: Alignment.bottomCenter,
135: Alignment.bottomRight,
};

AnchorAlign anchorAlign = AnchorAlign.top;
Alignment anchorAlign = Alignment.topCenter;
bool counterRotate = false;
final customMarkers = <Marker>[];
late final customMarkers = <Marker>[
buildPin(const LatLng(51.51868093513547, -0.12835376940892318)),
buildPin(const LatLng(53.33360293799854, -6.284001062079881)),
];

Marker buildPin(LatLng point) => Marker(
point: point,
builder: (ctx) => const Icon(Icons.location_pin, size: 60),
builder: (ctx) =>
const Icon(Icons.location_pin, size: 60, color: Colors.black),
width: 60,
height: 60,
);
Expand All @@ -43,136 +47,127 @@ class MarkerPageState extends State<MarkerPage> {
return Scaffold(
appBar: AppBar(title: const Text('Markers')),
drawer: buildDrawer(context, MarkerPage.route),
body: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox.square(
dimension: 130,
child: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 5,
crossAxisSpacing: 5,
),
itemCount: 9,
itemBuilder: (_, index) {
final deg = alignments.keys.elementAt(index);
final align = alignments.values.elementAt(index);

return IconButton.outlined(
onPressed: () => setState(() => anchorAlign = align),
icon: Transform.rotate(
angle: deg == null ? 0 : deg * pi / 180,
child: Icon(
deg == null ? Icons.circle : Icons.arrow_upward,
color: anchorAlign == align ? Colors.green : null,
size: deg == null ? 16 : null,
),
),
);
},
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox.square(
dimension: 130,
child: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 5,
crossAxisSpacing: 5,
),
),
const SizedBox(width: 16),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Tap the map to add markers!'),
const SizedBox(height: 10),
Row(
children: [
const Text('Counter-rotation'),
const SizedBox(width: 10),
Switch.adaptive(
value: counterRotate,
onChanged: (v) => setState(() => counterRotate = v),
itemCount: 9,
itemBuilder: (_, index) {
final deg = alignments.keys.elementAt(index);
final align = alignments.values.elementAt(index);

return IconButton.outlined(
onPressed: () => setState(() => anchorAlign = align),
icon: Transform.rotate(
angle: deg == null ? 0 : deg * pi / 180,
child: Icon(
deg == null ? Icons.circle : Icons.arrow_upward,
color: anchorAlign == align ? Colors.green : null,
size: deg == null ? 16 : null,
),
],
),
],
),
);
},
),
],
),
),
const SizedBox(width: 16),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Tap the map to add markers!'),
const SizedBox(height: 10),
Row(
children: [
const Text('Counter-rotation'),
const SizedBox(width: 10),
Switch.adaptive(
value: counterRotate,
onChanged: (v) => setState(() => counterRotate = v),
),
],
),
],
),
],
),
Flexible(
child: FlutterMap(
options: MapOptions(
initialCenter: const LatLng(51.5, -0.09),
initialZoom: 5,
onTap: (_, p) =>
setState(() => customMarkers.add(buildPin(p))),
interactionOptions: const InteractionOptions(
flags: ~InteractiveFlag.doubleTapZoom,
),
),
Flexible(
child: FlutterMap(
options: MapOptions(
initialCenter: const LatLng(51.5, -0.09),
initialZoom: 5,
onTap: (_, p) => setState(() => customMarkers.add(buildPin(p))),
interactionOptions: const InteractionOptions(
flags: ~InteractiveFlag.doubleTapZoom,
),
children: [
TileLayer(
urlTemplate:
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
MarkerLayer(
rotate: counterRotate,
anchorPos: AnchorPos.align(anchorAlign),
markers: [
buildPin(const LatLng(
51.51868093513547, -0.12835376940892318)),
buildPin(
const LatLng(53.33360293799854, -6.284001062079881)),
Marker(
point: const LatLng(
47.18664724067855, -1.5436768515939427),
width: 64,
height: 64,
anchorPos: const AnchorPos.align(AnchorAlign.left),
builder: (context) => const ColoredBox(
color: Colors.lightBlue,
child: Align(
alignment: Alignment.centerRight,
child: Text('-->'),
),
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
userAgentPackageName: 'dev.fleaflet.flutter_map.example',
),
MarkerLayer(
rotate: counterRotate,
anchorPos: AnchorPos.defaultAnchorPos,
markers: [
Marker(
point:
const LatLng(47.18664724067855, -1.5436768515939427),
width: 64,
height: 64,
anchorPos: const AnchorPos.align(Alignment.centerLeft),
builder: (context) => const ColoredBox(
color: Colors.lightBlue,
child: Align(
alignment: Alignment.centerRight,
child: Text('-->'),
),
),
Marker(
point: const LatLng(
47.18664724067855, -1.5436768515939427),
width: 64,
height: 64,
anchorPos: const AnchorPos.align(AnchorAlign.right),
builder: (context) => const ColoredBox(
color: Colors.pink,
child: Align(
alignment: Alignment.centerLeft,
child: Text('<--'),
),
),
Marker(
point:
const LatLng(47.18664724067855, -1.5436768515939427),
width: 64,
height: 64,
anchorPos: const AnchorPos.align(Alignment.centerRight),
builder: (context) => const ColoredBox(
color: Colors.pink,
child: Align(
alignment: Alignment.centerLeft,
child: Text('<--'),
),
),
Marker(
point: const LatLng(
47.18664724067855, -1.5436768515939427),
rotate: false,
builder: (context) =>
const ColoredBox(color: Colors.black),
),
],
),
MarkerLayer(
markers: customMarkers,
rotate: counterRotate,
anchorPos: AnchorPos.align(anchorAlign),
),
],
),
),
Marker(
point:
const LatLng(47.18664724067855, -1.5436768515939427),
rotate: false,
builder: (context) =>
const ColoredBox(color: Colors.black),
),
],
),
MarkerLayer(
markers: customMarkers,
rotate: counterRotate,
anchorPos: AnchorPos.align(anchorAlign),
),
],
),
],
),
),
],
),
);
}
Expand Down
Loading