Flutter_map: FYI: New plugin for showing popups

[rorystephenson]

I'm an extremely happy user of this package and as a (very) little thank you I packaged up some code I wrote to show tappable popups on the map.

I wrote it specifically for my purposes so it's definitely far from perfect but I'm very open to suggestions/PRs in order to improve it. A sneak peek (the popup Widget is my own, just a Card with some extra touches, happy to share if anyone wants):

You can find it on:

• Pub: https://pub.dev/packages/flutter_map_marker_popup
• Github: https://github.com/rorystephenson/flutter_map_marker_popup

It's in its early stages and is likely to change, things that I would like to improve but haven't gotten around to yet:

1. Allow dynamically sized popups, currently the size is fixed and the widget returned by the popupBuilder must respect that size.
2. Document an example of using this with a marker clustering layer. This is how I use it myself and it works well.
3. Prevent the user from needing to dispose of the PopupController themselves.

EDIT:

After a lot of experimenting I came up with a much cleaner approach that allows dynamically sized proper widgets to be used for markers and doesn't required the user to dispose of the PopupController themselves. The catch is that it won't work as-is with the clustering plugin so I have instead:

1. Published a new version of the plugin which actually replaces the MarkerLayer with a PopupMarkerLayer, it's the one linked above.
2. Opened a pull request on the marker clustering plugin to add marker logic directly to the plugin. I am not a collaborator on that project so it might not get merged soon. In that case I have a fork which I am using that contains the popup code here: https://github.com/rorystephenson/flutter_map_marker_cluster . I have not created a pub package for it as it would be best that it gets published in a new version of the original package. If that doesn't happen for a while then I will consider publishing my fork but I'd rather avoid it as the work is mostly not mine. To add my fork to your pubspec:

flutter_map_marker_cluster:
    git:
      url: git://github.com/rorystephenson/flutter_map_marker_cluster.git
      ref: master

You should change master to the commit hash if you don't want it to update whenever I push a change! Alternatively make your own fork.

[X-SLAYER]

nice ! just make a pull request to add this plugin to README

[mat8854]

@rorystephenson Thumbs up. I was searching for marker popups too a few weeks ago. I found an issue and used the MarkerWithTooltip class as a basis and customized it further.

Would be nice to have a generic marker popup plugin yes.

[rorystephenson]

@mat8854 I remember reading the same issue and it helped a lot! It depends on what your requirements are. In my case I wanted a solution that:

• Works with the clustering plugin. This means the popup couldn't be added as a separate marker in the same layer as that would change the clusters (might cause the cluster number to be wrong or might cause unclustered markers to get clustered).
• Is tappable. I recall trying to do something similar to the tooltip but it was not tappable because the tooltip was outside of the parent widget constraints. This might actually be an issue with the way the clustering layer is implemented and might work fine for the normal marker layer. I will experiment some more.

So thanks for reminding me of that issue, I'm going to retry some of those solutions.

[mat8854]

@rorystephenson So for a truely generic plugin there are many little details like:

• configurable auto close of a popup when another is opened by user
• configurable auto close popup on map move
• ...

Would be nice to cover them. The Tooltip is not perfect for that. We noticed that too. Will wait for the PR.

[rorystephenson]

@mat8854 I published a big update which now means proper widget popups without a predefined size are supported and the options you've specified are easy to add. I'd hesitate on adding too many options until people ask for them to avoid unnecessary code.

The way it's written it is a replacement for the original MarkerLayer (I copied a lot of the code), with added popup support. That ended up being a far cleaner and flexible implementation. I'd be happy to open a PR to add it directly to this package or it can be left as a separate plugin, that's up to the authors of this package. If integrating it in to this package is preferred there are a couple of options:

1. Add popup functionality directly to the MarkerLayer, but only actually execute popup related code if the user enables popups (with a flag etc).
2. Keep it as a separate layer but refactor to share the common code.

[rorystephenson]

Update: I opened a PR to add popups to the clustering plugin and created a fork which contains the plugin (which I plan to remove when the main repo is updated). See the bottom of the first comment for details.

[kekeu]

When I click on a Marker and then click on another Marker it keeps the information from the previous marker in Popup. To update the information you need to click on the map and then click on the Marker. I tried to solve it by calling hide before the change but it doesn't work.

popupLayerController.hidePopup(); mapController.move(LatLng(city.latitude, city.longitude), 7); popupLayerController.togglePopup(markers[index]);

[rorystephenson]

When I click on a Marker and then click on another Marker it keeps the information from the previous marker in Popup. To update the information you need to click on the map and then click on the Marker. I tried to solve it by calling hide before the change but it doesn't work.

popupLayerController.hidePopup(); mapController.move(LatLng(city.latitude, city.longitude), 7); popupLayerController.togglePopup(markers[index]);

Thanks for reporting that @kekeu, I will track it on the issues for the plugin here: https://github.com/rorystephenson/flutter_map_marker_popup/issues/4

EDIT:

This has now been fixed!

[rorystephenson]

Note @kekeu and others interested the bug where state was not changed when moving from one marker to another has been fixed and published in 0.1.4.

[kekeu]

Thanks. It was very good. It works perfectly.

[flogaribal]

Hi @rorystephenson ,

Thanks a lot for your plugin it works perfectly! I was looking for this for a while now and I could figure out how to do it myself as I am pretty new to Flutter.
I wrote an example of passing data to a marker by extending the Marker class and add it to your issue (https://github.com/rorystephenson/flutter_map_marker_popup/issues/3).
Thanks again !

[rorystephenson]

Hi @rorystephenson ,

Thanks a lot for your plugin it works perfectly! I was looking for this for a while now and I could figure out how to do it myself as I am pretty new to Flutter.
I wrote an example of passing data to a marker by extending the Marker class and add it to your issue (rorystephenson/flutter_map_marker_popup#3).
Thanks again !

Thank you for taking the time to give such positive feedback and for sharing your example, I will have a look! I'm really glad the plugin is useful.

[S-Man42]

Hi, I just saw this plugin and tested it. Works great!

However, I have question: It is not clear to me how to create a specific popup for each marker. Is there a possibility to append a widget or a text to a marker? Currently I have:

popupBuilder: (BuildContext _, Marker marker) => Text(marker.point.toString())

This works fine, because point is a member of marker. But how can use any further information. Do I have to keep a separate map <Marker, Widget> or such?

Thanks in advance!

[kekeu]

Hi, I just saw this plugin and tested it. Works great!

However, I have question: It is not clear to me how to create a specific popup for each marker. Is there a possibility to append a widget or a text to a marker? Currently I have:

popupBuilder: (BuildContext _, Marker marker) => Text(marker.point.toString())

This works fine, because point is a member of marker. But how can use any further information. Do I have to keep a separate map <Marker, Widget> or such?

Thanks in advance!

You can use a variable to store the value. And every time you click on the popup it sets the value you want. When the popup is built it will have the information.

popupBuilder: (BuildContext _, Marker marker) => CustomMapPopup(controller.citySelected),

In build of the Marker

builder: (_) => GestureDetector( onTap: () { citySelected = element; }, child: Container( child: Icon(Icons.location_on, color: azulSesc,), ), ),

[S-Man42]

Ah yes, of course! I missed this. Thank you!

[Engelbrekt39]

Love the popup marker plugin, but I have issues with your clustering since it depends on flutter map 0.8.2 and the rest of the plugins I use depends 0.9.0. Any chance you could change dependency to 0.9.0 as well?

[rorystephenson]

Hi @Engelbrekt39. Thanks I'm glad to hear you like the plugin!

What package are you using and which version?

The latest versions of flutter_map_marker_popup and flutter_map_marker_clustering (which both support popups) should both support 0.9.0. I'm using 0.9.0 with flutter_map_marker_clustering in a personal project.

Pubspec of flutter_map_marker_cluster allowing 0.9.0:
https://github.com/lpongetti/flutter_map_marker_cluster/blob/3ea84569e788d9bc23504f1ecb63c74f9d2eff1f/pubspec.yaml#L16

Pubspec of flutter_map_marker_popup allowing anything over 0.8.0 and under 1.0.0:
https://github.com/rorystephenson/flutter_map_marker_popup/blob/697c38df46916e2c77d74db54f3b7a94fc76f909/pubspec.yaml#L13

[Engelbrekt39]

Hey @rorystephenson I was trying to use your markercluster from git mentioned in your original post, which caused the error. I was not aware I could get the popups yo work nicely with the original marker cluster plugin which worked without any errors.

[rorystephenson]

Closing as this was just an FYI and the plugin has been added to the README