This library is inspired from android-google-maps-floating-marker-titles and aims to achieve the same thing on Flutter apps.
I had initially built this library as an experiment to gauge how well native-like things can be achieved with Flutter (e.g. real-time drawing on a Canvas), and I've been very happy with the results, this library is now used in my production app Map Marker running on Android, iOS and Web.
This library is useful if you want to see the titles of the markers on the map floating next to the marker. It attempts to reproduce the behavior for labels of points of interest shown in map applications. It works as a wrapper of existing map view widgets for the following libraries:
This is how it looks like, from the example sample app of this library:
This project is divided into the following main folders:
flutter_floating_map_marker_titles_core: the core code of the floating map marker titles library, meant to be agnostic of any map view implementation, this is the source code of the flutter_floating_map_marker_titles_core libraryflutter_map_floating_marker_titles: the code of the floating map marker titles library for Flutter Map, this is the source code of the flutter_map_floating_marker_titles librarygoogle_maps_flutter_floating_marker_titles: the code of the floating map marker titles library for Google Maps Flutter, this is the source code of the google_maps_flutter_floating_marker_titles libraryexample: a simple example of a flutter application show-casing the use of the libraries
In the sample app, the Flutter Map example will work out of the box, but for the Google Maps Flutter example to work, you will need to update the following file, based on the Google Maps Flutter library getting started instructions:
example/android/app/src/main/AndroidManifest.xmlexample/ios/Runner/AppDelegate.m
For a working example, see the flutter app project in the example folder of this repo.
Add flutter_map_floating_marker_titles and/or google_maps_flutter_floating_marker_titles to your pubspec:
dependencies:
flutter_map_floating_marker_titles: any # or the latest version on Pub
google_maps_flutter_floating_marker_titles: any # or the latest version on Pubfinal FMTOOptions fmtoOptions = FMTOOptions();final List<FloatingMarkerTitleInfo> floatingTitles = [];
floatingTitles.add(FloatingMarkerTitleInfo(
id: 0,
latLng: LatLng(0, 0),
title: 'A floating title',
color: Colors.green,
));// With the FlutterMapWithFMTO widget as a FlutterMap wrapper
FlutterMapWithFMTO(
floatingTitles: floatingTitles,
fmtoOptions: fmtoOptions,
// ... other than the 2 above option, this widget takes
// exactly the same props as the FlutterMap widget.
options: MapOptions(
center: LatLng(0, 0),
zoom: 13,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
),
],
)
// Or with the FloatingMarkerTitlesLayer widget as a FlutterMap layer
FlutterMap(
options: MapOptions(
center: LatLng(0, 0),
zoom: 13,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
),
FloatingMarkerTitlesLayer(
floatingTitles: floatingTitles,
fmtoOptions: fmtoOptions,
),
],
)GoogleMapWithFMTO(
floatingTitles: floatingTitles,
fmtoOptions: fmtoOptions,
// ... other than the 2 above option, this widget takes
// exactly the same props as the GoogleMap widget.
initialCameraPosition: CameraPosition(
target: LatLng(0, 0),
zoom: 13,
),
)- Display floating markers titles on top of the map
- Automatically avoids overlap between floating marker titles, will not display a title if overlapping with others
- Marker title text transparent outline for better visuals: the text will be readable no matter the map background and the outline color will adapt to white or black depending on the text color's luminance (perceived brightness)
- Marker title fade-in animation for better visuals
FMTOOptions(
// The number of milliseconds between two repaints of the titles layer. 60 frames per seconds = 16 milliseconds between each frame.
repaintIntervalMillis: 16,
// Titles text size
textSize: 14.0,
// Maximum number of floating titles
maxTitlesCount: 30,
// Maximum width of floating titles
maxTitlesWidth: 150,
// Maximum lines count of floating titles
maxTitleLines: 2,
// Maximum number of cached, pre-laid out, ready to draw floating titles info, since computing the layout of text is an expensive operation
textPaintingCacheSize: 2000,
// Maximum number of cached coordinates by the map coordinates projections calculator
mapProjectionsCacheSize: 10000,
// No performance drop with more markers once the maximum number of floating titles has been reached, since the library only scans for a limited number of markers per frame, which can be set with titlesToCheckPerFrame
titlesToCheckPerFrame: 30,
// Time in milliseconds of the title fade-in animation
fadeInAnimationTimeMillis: 300,
// Titles placement option with anchor and margin
titlePlacementPolicy: const FloatingMarkerPlacementPolicy(FloatingMarkerGravity.right, 12),
);FloatingMarkerTitleInfo(
// ID of the floating title, used by the system to track what was added/removed between two paints
id: 0,
// Base coordinates the title is attached to
latLng: LatLng(0, 0),
// The title text as a String
title: 'The title',
// The title base color
color: Colors.green,
// Whether the title text should be written in bold
isBold: false,
// z-index of the title to specify which title has the most priority for display in case of titles collisions
zIndex: 1,
);- Does not work in web for Google Maps Flutter
I am not willing to invest time to take feature requests at the moment, but if you find a bug, I'll probably want to fix it, so feel free to report any bugs you may find.
If you need a feature and want to build it and then submit it as a pull request, I'm willing to work with you to merge your work into the current code.