Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

[google_maps_flutter] Custom marker size improvements #6805

Conversation

jokerttu
Copy link
Contributor

@jokerttu jokerttu commented Dec 7, 2022

This PR adds and improves marker scaling support for Android, iOS and Web.
With this change, custom marker icons are drawn with same logical size on all platforms, keeping the visual style as close as possible.

To avoid breaking change, this PR makes the following changes while keeping the old behavior intact:

  • Deprecates BitmapDescriptor.fromAssetImage in favor of BitmapDescriptor.createFromAsset
  • Deprecates BitmapDescriptor.fromBytes in favor of BitmapDescriptor.createFromBytes

Android:
Android

Web:
Web

Resolves flutter/flutter#34657

Pre-launch Checklist

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I read and followed the relevant style guides and ran the auto-formatter. (Unlike the flutter/flutter repo, the flutter/plugins repo does use dart format.)
  • I signed the CLA.
  • The title of the PR starts with the name of the plugin surrounded by square brackets, e.g. [shared_preferences]
  • I listed at least one issue that this PR fixes in the description above.
  • I updated pubspec.yaml with an appropriate new version according to the pub versioning philosophy, or this PR is exempt from version changes.
  • I updated CHANGELOG.md to add a description of the change, following repository CHANGELOG style.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is test-exempt.
  • All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Comment on lines 294 to 295
final ui.Codec codec =
await ui.webOnlyInstantiateImageCodecFromUrl(Uri.parse(assetUrl));
Copy link
Member

@ditman ditman Dec 14, 2022

Choose a reason for hiding this comment

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

I like this new approach, but I don't think this works in the html renderer?

https://github.com/flutter/engine/blob/9080a2b49e8cd385c254dd3cdd1685e26b8708a9/lib/web_ui/lib/src/engine/html/renderer.dart#L184

(Compare to canvaskit.)

Copy link
Contributor Author

@jokerttu jokerttu Dec 15, 2022

Choose a reason for hiding this comment

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

True, and this also decodes the entire image frame for each marker, as there is no caching either, which is not a really efficient solution, but not too slow either. I like this solution as this allows automatically use exact same logical marker size for each platform, including web. But this is indeed a bit slow compared to using size parameter (which is fastest approach for web), and also not working for html renderer
I would like to keep this support for scaling with imagePixelRatio, but change the logic so that image width and height are parsed from the image header, so that only first bytes of data need to be parsed... and check if this approach is fast enough and valid for html renderer as well. Here's an example for this approach by @dnfield. Writing something similar, as this gist has no proper license to be used directly.
And also API need to be changed a bit, as developers are not able to disable scaling for web at the moment as for web images need to be counter-scaled even if imagePixelFactor is 1.

Copy link
Member

Choose a reason for hiding this comment

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

@jokerttu, have you see package:image? The only concern I have with this approach is that you'll need to download with a XHR request the image to get access to its bytes, and that's going to make this slower. Is there any way of combining the two solutions, so users can pass a size and dpr for a given marker, and if not, fall back to the slower code path?

Copy link
Contributor Author

@jokerttu jokerttu Dec 22, 2022

Choose a reason for hiding this comment

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

@ditman yes, image packages startDecode does exactly this. If it is ok to add new dependency this would be better option than writing own parsers for image headers.
webOnlyInstantiateImageCodecFromUrl fetches image as well, for each marker, but of course image request is cached by browser, but it still fills up network panel with requests each time marker updates. This is not really good thing either.
I might still implement this feature, and keep the feature for web as well, and instruct users to use size instead, as more performant option.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@ditman feature implemented using package:image. Also fixed case where image was scaled even when imageScaling was set to noScaling.
On web, using scaling without "size" is slow, as the image need to be loaded before size can be calculated, but users have way to improve performance by using size or disabling scaling totally.

@jokerttu jokerttu force-pushed the google_maps_flutter_custom_marker_size branch 2 times, most recently from 26fd693 to a705bd5 Compare February 3, 2023 15:14
@jokerttu jokerttu force-pushed the google_maps_flutter_custom_marker_size branch from a705bd5 to 472b675 Compare February 3, 2023 15:34
@jokerttu jokerttu marked this pull request as ready for review February 3, 2023 15:35
@jokerttu jokerttu requested review from ditman and removed request for stuartmorgan-g, GaryQian and cyanglaz February 3, 2023 15:35
@stuartmorgan-g
Copy link
Contributor

We've just completed the migration of the plugin code to the flutter/packages repository, as described in https://flutter.dev/go/flutter-plugins-repo-migration, and this repository is now being archived. Unfortunately that means that all in-progress PRs here must be moved to flutter/packages.

Please see our instructions for an explanation of how to move your PR, and if you have any issues moving your PR please don't hesitate to reach out in the #hackers-ecosystem channel in Discord.

Our apologies that your PR was caught in this one-time transition. We're aware that it's disruptive in the short term, and appreciate your help in getting us to a better long-term state!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[google_maps_flutter] Add support for custom marker size
4 participants