[BOUNTY] [FEATURE] Implement unbounded horizontal scroll

[roha99]

What do you want implemented?

i'm absolutely in love with flutter_map ;) thanks a lot for this awesome package !
however an option like worldCopyJump in leaflet would be quite essential to my use case :)
i've double-checked and it's the default behavior of most major mapping apps (e.g. google and apple)
it would be cool to recreate such a user experience with flutter_map ;)
#1201

What other alternatives are available?

No response

Can you provide any other information?

No response

Severity

Obtrusive: No workarounds are available, and this is essential to me

Bounty

This issue is eligible for a bounty!

Bounty Criteria

To be eligible to recieve the bounty (as outlined in the meta information below), the solution must:

• implement seamless infinite horizontal scrolling of the map
• allow other layers to use this functionality - eg. by creating a framework or specification to allow for this capability to be implemented in other layers
• implement infinite tiling and scrolling on the standard TileLayer
• (optional, but appriciated (no additional bounty)) implement infinite repetition of Markers in the MarkerLayer

An example of another open source mapping library that offers infinite/unbounded horizontal scrolling is leaflet.js.

The decision to award the bounty is entirely at the discretion of the maintainer team.

Bounty Meta Information

flutter_map uses Polar.sh to provide a bounty on this issue! Contributors who resolve this issue using the criteria listed above will receive the full amount pledged below, after all fees have been paid.

The flutter_map team funds issues we want to see fixed but are relatively low priority for us, and we do this using your donations! When you donate, 15% goes to the OpenStreetMap Foundation, and the rest is held as donations, some of which we fund these issues with!

Of course, we appriciate any size donation you can make: it supports us directly, and allows us to fund these issues, but if this issue is particularly important to you, you can pledge money directly to this issue using the button below.

[JaffaKetchup]

Hi @r0b3rth4ns3n, thanks for your interest!
At the moment, I think this depends on #1452, which is marked as P4 due to its low-ish demand and due to the fact it won't immediately lead to any new functionality.

[ibrierley]

Hmm I'm not entirely sure it does, if I'm reading that one right. The LatLngs would still be the same wouldn't they ?

My thinking is probably more like that a custom crs would need to be used, and the infinite flag set to true, but I doubt that code fully works, but it would probably be my first port of call when examining...

However,as ever the devil is in the detail. Let's say you have a marker in London and stretch the map and London is displayed twice (or is there a limit to only display one full map) I.e Google seems to have a fixed limit so is infinite, but not duplicated, i.e you can't have 2 Londons displayed.. leaflet.js I think you can have 2 Londons displayed (i.e at https://leafletjs.com/examples/quick-start/ ) but then it only displays one set of markers, so as you scroll horizontally you actually lose your marker. Or should it be more like https://fluttermap.dabbles.info/geoslicer/#/ which isn't infinite, but will duplicate as it stretches out...

[JaffaKetchup]

I guess it depends on how we treat it.
If we keep the current LatLng, we limit to +/- 180deg. I guess this means any taps in the non-standard 'region' will be redirected to taps in the standard region? Ie. Trying to place a new marker at the tap position would place the marker in the corresponding tap position on the standard region.
Not really sure though. Just basing this off behaviour I've seen elsewhere.

[roha99]

in case someone else is looking for this feature right now
both #1452 and #468 mention possible albeit undesirable workarounds

[ibrierley]

Yeah, this is why it's one of those that sounds simple and fine in theory until its broken down.

Fwiw I feel like Googles feels the most intuitive. I.e limit the size to only one world, but allow scrolling to the same map/markers wrapped around. Leaflet feels incorrect, allows infinite scrolling, but then you're kind of on a separate map not showing the existing markers which feels confusing.

[roha99]

i agree with @ibrierley
the user experience of google maps seems most intuitive

[roha99]

imho hitting a wall at "the edge of the world" as with the current behavior of flutter_map seems most undesirable in terms of user experience and plays into flat earthers hands ;)

[jbdtky]

I believe it's a very important feature for any person using a map in a app. It's a feature that definitely need ASAP. So happy to contribute if needed.

[JaffaKetchup]

We're very happy to accept PRs, but it's likely going to be a big job!

[jbdtky]

I need it for my product: https://www.dokoni.app. Or maybe should I use something else, any recommendation?

[JaffaKetchup]

Personally, I'm a massive supporter of OSS and not locking in to massive corporations. Aware I'm using GitHub 😂

On a serious note, the only other real alternatives are mapbox_gl and Google. But you've probably looked into those already. For flexibility and ecosystem, FM really is the leader atm. Check the home page of the docs for a small comparison - but TLDR, they only really win in performance (although, you won't notice a difference unless you're layering like 50000 markers features, and they keep it performant by cheating and not using Dart) and cost in some cases, as they often use charge by load instead of tile and sometimes have preferable pricing (but be aware of lock-in).

[noforeignland]

Any update on this? I'm looking at the viability of using FM in an app that allows users to pan around in the Pacific (and the rest of the world) and it's really not intuitive for them to have to scroll the "wrong" way around the world when they reach the anti-meridian. Thx.

[JaffaKetchup]

As pointed out in #1750 (comment), the latest version of latlong2 has removed constraints on the latlong.

This means we can do something suggested by @josxha somewhere else, which I now can't find, which is to use an inner widget which repeats and represents a specific range of coords, and change all the necessary methods to return a list of coords rather than a single one, all which could be on screen (which would then be handled by the widget).

As stated (I believe by @ibrierley somewhere else, which I now can't find), the best behaviour would probably be to have each 'world instance' be identical, so a marker at 0,0 appears at 0,0 in all world instances.

I'm not sure where the best place to start this would be, if my description made sense, and whether I've missed anything :D

[ReinisSprogis]

Something like this?
https://github.com/fleaflet/flutter_map/assets/69913791/f1574401-fab1-4575-a024-6f31835e7b7c

[JaffaKetchup]

Hey @ReinisSprogis,
Yep, this is pretty close to what we're looking for. However, for it to be fully seamless, the flash would need to be removed. Is that possible?
If you're actively working on this, please open a draft PR and I'll assign you to this issue.

[monsieurtanuki]

@JaffaKetchup For the record I've just managed to scroll beyond the end of the world, and to remove the undesired flash side-effect.
Needs some refactoring, though.
Am I supposed to PR a draft now?

[JaffaKetchup]

Yes, a draft PR would be great! I'll assign you to this issue.

[monsieurtanuki]

Thank you @JaffaKetchup!
I had the wrong impression I solved it a couple of days ago.
But eventually I've found and coded today the solution against the flash effect.
Would probably be ready for a first lousy PR tomorrow.