Skip to content

[google_maps_flutter_web] set icon anchor for markers #8077

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

Merged
merged 8 commits into from
Mar 7, 2025
Merged

[google_maps_flutter_web] set icon anchor for markers #8077

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f93d346
set icon anchor for markers in flutter web google maps
veronikalaskova Nov 12, 2024
16b28da
Use local constants for test, remove unnecessary issue link in anchor…
veronikalaskova Feb 24, 2025
0dfee76
Set second marker anchor offset to within image boundaries in test
veronikalaskova Feb 24, 2025
82839e4
fixup changelog
veronikalaskova Mar 3, 2025
dcbadfa
Merge remote-tracking branch 'upstream/main' into google_maps_web_mar…
veronikalaskova Mar 3, 2025
aa4a154
Merge branch 'main' into google_maps_web_marker_anchor
veronikalaskova Mar 4, 2025
bb87e8e
Merge branch 'main' into google_maps_web_marker_anchor
veronikalaskova Mar 5, 2025
0f8c9a4
Fix whitespace lines in changelog
stuartmorgan-g Mar 7, 2025
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
4 changes: 2 additions & 2 deletions packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## NEXT
## 0.5.11

* Updates minimum supported SDK version to Flutter 3.22/Dart 3.4.
* Adds support for marker anchor
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is missing a period (per linked CHANGELOG style).


## 0.5.10

Expand Down
40 changes: 40 additions & 0 deletions ...es/google_maps_flutter/google_maps_flutter_web/example/integration_test/markers_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,5 +493,45 @@ void main() {
expect(event, isA<InfoWindowTapEvent>());
expect((event as InfoWindowTapEvent).value, equals(const MarkerId('1')));
});

// https://github.com/flutter/flutter/issues/80578
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not necessary to link to an issue when the purpose of the test is self-evident. There's nothing subtle here that requires the context of the issue to understand.

testWidgets('markers with anchor work', (WidgetTester tester) async {
final Uint8List bytes = const Base64Decoder().convert(iconImageBase64);
final Marker marker1 = Marker(
markerId: const MarkerId('1'),
icon: BytesMapBitmap(
bytes,
width: 20,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use local constants instead of repeating magic numbers throughout the test.

height: 30,
),
);
final Marker marker2 = Marker(
markerId: const MarkerId('2'),
icon: BytesMapBitmap(
bytes,
width: 20,
height: 30,
),
anchor: const Offset(1.5, 2),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anchors are in a normalized coordinate space; why are these both more than 1.0?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not quite sure what you mean by this comment. What is it normalized to?

The default value for anchor is const Offset(0.5, 1).
In some scenarios the user may want the offset to be different. Using a different offset for the second marker proves the different variable doesn't get ignored.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is it normalized to?

packages/packages/google_maps_flutter/google_maps_flutter_platform_interface/lib/src/types/marker.dart

Lines 43 to 45 in 5498d4d

/// The image point is specified in normalized coordinates: An anchor of
/// (0.0, 0.0) means the top left corner of the image. An anchor
/// of (1.0, 1.0) means the bottom right corner of the image.

This is setting an anchor that is well outside the image's bounds in both directions.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An example (from our project) to use an anchor outside the bounds would be positioning 2 markers in relation to one another. Eg a point (user's position) marker and a label for that point marker where the label needs to be offset from the marker and positioned lower on the y axis of the map.

);
final Set<Marker> markers = <Marker>{marker1, marker2};

await controller.addMarkers(markers);
expect(controller.markers.length, 2);

final gmaps.Icon? icon1 =
controller.markers[const MarkerId('1')]?.marker?.icon as gmaps.Icon?;
expect(icon1, isNotNull);
final gmaps.Icon? icon2 =
controller.markers[const MarkerId('2')]?.marker?.icon as gmaps.Icon?;
expect(icon2, isNotNull);

expect(icon1!.anchor, isNotNull);
expect(icon2!.anchor, isNotNull);
expect(icon1.anchor!.x, 20 * 0.5);
expect(icon1.anchor!.y, 30 * 1);
expect(icon2.anchor!.x, 20 * 1.5);
expect(icon2.anchor!.y, 30 * 2);
});
});
}
17 changes: 15 additions & 2 deletions packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,18 @@ void _setIconSize({
icon.scaledSize = gmapsSize;
}

void _setIconAnchor({
required Size size,
required Offset anchor,
required gmaps.Icon icon,
}) {
final gmaps.Point gmapsAnchor = gmaps.Point(
size.width * anchor.dx,
size.height * anchor.dy,
);
icon.anchor = gmapsAnchor;
}

/// Determines the appropriate size for a bitmap based on its descriptor.
///
/// This method returns the icon's size based on the provided [width] and
Expand Down Expand Up @@ -371,7 +383,7 @@ void _cleanUpBitmapConversionCaches() {

// Converts a [BitmapDescriptor] into a [gmaps.Icon] that can be used in Markers.
Future<gmaps.Icon?> _gmIconFromBitmapDescriptor(
BitmapDescriptor bitmapDescriptor) async {
BitmapDescriptor bitmapDescriptor, Offset anchor) async {
gmaps.Icon? icon;

if (bitmapDescriptor is MapBitmap) {
Expand All @@ -394,6 +406,7 @@ Future<gmaps.Icon?> _gmIconFromBitmapDescriptor(
final Size? size = await _getBitmapSize(bitmapDescriptor, url);
if (size != null) {
_setIconSize(size: size, icon: icon);
_setIconAnchor(size: size, anchor: anchor, icon: icon);
}
case MapBitmapScaling.none:
break;
Expand Down Expand Up @@ -460,7 +473,7 @@ Future<gmaps.MarkerOptions> _markerOptionsFromMarker(
..visible = marker.visible
..opacity = marker.alpha
..draggable = marker.draggable
..icon = await _gmIconFromBitmapDescriptor(marker.icon);
..icon = await _gmIconFromBitmapDescriptor(marker.icon, marker.anchor);
// TODO(ditman): Compute anchor properly, otherwise infowindows attach to the wrong spot.
// Flat and Rotation are not supported directly on the web.
}
Expand Down
2 changes: 1 addition & 1 deletion packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: google_maps_flutter_web
description: Web platform implementation of google_maps_flutter
repository: https://github.com/flutter/packages/tree/main/packages/google_maps_flutter/google_maps_flutter_web
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+maps%22
version: 0.5.10
version: 0.5.11

environment:
sdk: ^3.4.0
Expand Down