Added animateToNavigation method to MapView #2049

guiedugt · 2018-03-02T01:22:32Z

animateToNavigation is a method to allow navigation-like moviment to a map that, for instance, follows the user position. (like google maps navigation or waze).

On android when trying to animateToRegion, animateToBearing and animateToViewingAngle simultaniously the methods would overwride each other's movement. animateToNavigation solves this problem.

CreateMap method is introduced to solve the react's MapBuilder limitation of key-value pairs.

This was already tested worked on android.

alvelig · 2018-03-02T09:24:36Z

Great contribution! But could you add an example to the project please?

guiedugt · 2018-03-02T12:12:54Z

Thanks! Actually I do have. I needed that new method for an actual project so i've made a testing one which can be found here. The use of the method itself is at NavigationMap.js, line 77.
I've also made a tiny package at npm for my project mates for now.
I hove to have helped in any way. If something feels wrong please feel free to ask/say.

alvelig · 2018-03-02T13:50:52Z

Please undo c819f45 and add an example here please.

guiedugt · 2018-03-03T02:14:54Z

Surely! c819f45 undone and added example here.

juergengunz · 2018-03-03T18:23:00Z

@guilhermeed thanks for this contribution, I tested it on android - it works, but it behaves weird if you set mapPadding. If you want the marker a little bit closer to the bottom, like navigation apps do, for example.

Maybe you could add an additional parameter that allows the function to set a vertical offset that allows the current location to be centered towards the bottom of the screen instead of the middle

alvelig · 2018-03-03T23:59:37Z

LGTM @rborn @christopherdro 🐽

guiedugt · 2018-03-04T00:25:27Z

@juergengunz What a great idea! I'll see what i can do.

guiedugt · 2018-03-04T18:52:03Z

Hey guys. I'm having trouble calculating the offset at AirMapView.java, lines 590-605. If you could take a look at my algorithm that would be great. I commented it so you could check it out.

juergengunz · 2018-03-04T18:58:20Z

@guilhermeed nice! Check out this comment, he made an example for iOS and this seems to work. Maybe you could just adapt the algorithm for android.
#1726 (comment)

EricPKerr · 2018-04-24T16:43:07Z

@guilhermeed what is the offset being used for?

Wouldn't it be better to have this alignment stuff be relative to the map zoom (or lat/long delta)? Ideally this just looks at the coordinates of the edge of the screen to align the user's center point to the bottom of the screen (maybe with an inset). Better to ship this without the offset logic for now ?

guiedugt · 2018-04-24T17:29:25Z

@EricPKerr The offset should be the distance from the current location to the bottom of the map. For instance, most of the navigation apps out there shows the driver position not at the center of the map, but a little to the bottom, instead.
Your idea is good, tough.
Unfortunely lately i've been overwhelmed with work. Maybe ship it without the offset logic would do the trick for now.

equesteo · 2018-05-02T21:39:26Z

I've been watching this for the past month and a half, super excited for it to land. I think the offset is not super necessary, I'd mostly just love to be able to set the angle and bearing at the same time. Thanks for your work, hope I get to use it soon!

guiedugt · 2018-05-03T03:42:00Z

I have already used this functionality in one of my projects and the offset wasn't much of a must-have in this case because most of the time i needed to display some info at the bottom of the screen (which overlapped the bottom part of the map).
Back to the business, how can i submit it without the offset funcionality for now?
Pull > Resolve Conflicts > Pass Travis Build > Pull Request?

rborn · 2018-05-03T08:33:03Z

@guilhermeed yeah 🤗

guiedugt · 2018-05-03T11:32:35Z

There you go :)

rborn

please remove all IDE config files from the commit (like .project, .vscode)
there are a lot of new X.class files comitted, do we need them?

rborn · 2018-05-03T11:52:04Z

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -332,14 +345,15 @@ public Map getExportedCustomDirectEventTypeConstants() {
  @Nullable
  @Override
  public Map<String, Integer> getCommandsMap() {
-    Map<String, Integer> map = MapBuilder.of(
+    Map<String, Integer> map = this.CreateMap(


Why this? CreateMap looks to me now very unreadable and limiting (only 8 key/values pairs allowed and ambiguous naming -> k1,v1)

Hey @rborn sorry about the delay. It's been very hard for me to dedicate time for this. Now about "CreateMap". I was going to ask you guys about the MapBuilder. I have noticed you were using the MapBuilder from com.facebook.react.common.MapBuilder; but if you take a look at it here you'll see it's limitating as well. It seems the MapBuilder class only supports up to 7 keys and I needed 8 (the naming i used was similar to what you'll find in the MapBuilder class). Of course this is not the ideal solution, but I wasn't able to find a solution around it back then.

rborn · 2018-05-03T11:52:47Z

@guilhermeed added few comments 🤗

equesteo · 2018-05-22T00:48:07Z

Gonna be so excited when this lands.

brunocascio · 2018-05-27T23:23:51Z

Any update here?

guiedugt · 2018-05-28T00:09:57Z

@rborn I've deletes the IDE and .class files as you asked. Do you think there is something else that needs to be done? If you have a good solution for the Map function that we've discussed above that would be great as well.

equesteo · 2018-06-25T14:54:46Z

@rborn Is there anything I can do to get this through?

rborn · 2018-06-25T14:56:13Z

@alvelig need some help here, can you take a look? 🐽

alvelig · 2018-06-25T15:00:38Z

@rborn I am! Thanks for the reminder! LGTM
@equesteo @brunocascio have you tried the branch? Can you confirm that it's working ok for you? We'd be very grateful if you helped us with testing this PR.

equesteo · 2018-06-25T23:51:56Z

@alvelig Tested and works for me.

vivianmauer · 2018-06-28T14:35:02Z

Can i pass a object with all my pins locations to it? like in fitToCoordinates(objectWithLocations) ?

ayushnawani · 2018-07-07T17:14:00Z

How to focus map on the current location while using animateToNavigation? In the example also map position is fixed. Can anyone help?

techieyann · 2018-07-07T17:16:57Z

I've been waiting on this functionality, I even wrote my own version for Android but didn't get around to the iOS code. Thank you so much!

Why is there no zoom parameter though? I know most of the package uses regions which negates the need for zoom, but this function just uses a center. It's just one number passed down to the GoogleMap API.

@jonathanmauer No, this merge is just the animateToNavigation function.

@ayushnawani It's up to you to supply the lat/long of where you want the map to be. It sounds like you need to access the GPS of your device and then pass the location results to the function.

* master: (168 commits) Adding overlaying components details (react-native-maps#2425) docs: pin color limitations for android (react-native-maps#2429) Revert "Added MBTiles support for iOS and Android (react-native-maps#2208)" (react-native-maps#2387) Added MBTiles support for iOS and Android (react-native-maps#2208) Fix disabling the toolbar and my location button (react-native-maps#2317) Fixes warnings about self (react-native-maps#2341) Android: Fix lineCap of Polyline (react-native-maps#2375) Update installation.md (react-native-maps#2381) update doc (react-native-maps#2363) zIndex doesn't work when the map moves in iOS 11 (react-native-maps#2359) Fix readme formatting (react-native-maps#2358) add support for calloutAnchor with GoogleMaps on iOS; fixes react-native-maps#1852 (react-native-maps#2351) Added animateToNavigation method to MapView (react-native-maps#2049) Add react-native@^0.55 to peerDependencies (react-native-maps#2332) Fix custom marker updates on android react-native-maps#1611 react-native-maps#2048 [iOS] Prefix or eliminate globals in AIRMapMarker (react-native-maps#2306) Fix CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF warnings (react-native-maps#2154) Fix for compile error (react-native-maps#2215). (react-native-maps#2232) Make tiles display at the same physical size regardless of pixel dens… (react-native-maps#2248) Added support of lineDashPattern polyline prop to iOS Google Maps (react-native-maps#2243) ... # Conflicts: # lib/components/MapMarker.js

* added animateToNavigation method to MapView * Added AnimatedNavigation example * Updated Fork * Deleted IDE files and Unnecessary .class files

added animateToNavigation method to MapView

5dde244

guiedugt force-pushed the master branch 5 times, most recently from 8734bae to 1063872 Compare March 3, 2018 02:09

Added AnimatedNavigation example

1c15fc3

guiedugt force-pushed the master branch from 1063872 to 1c15fc3 Compare March 3, 2018 02:12

guiedugt force-pushed the master branch from e759876 to 1c15fc3 Compare May 3, 2018 10:55

GuilhermeEd added 2 commits May 3, 2018 08:21

Updated Fork

a929ae8

Merge branch 'master' into master

e600d42

rborn reviewed May 3, 2018

View reviewed changes

Deleted IDE files and Unnecessary .class files

a41811f

rborn merged commit 72b0f77 into react-native-maps:master Jun 26, 2018

dorshay6 mentioned this pull request Jul 31, 2018

Use region on navigation method #2407

Closed

This was referenced Aug 17, 2018

Im developing #2435

Closed

Implement zoom on animateToNavigation #2436

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added animateToNavigation method to MapView #2049

Added animateToNavigation method to MapView #2049

guiedugt commented Mar 2, 2018

alvelig commented Mar 2, 2018

guiedugt commented Mar 2, 2018

alvelig commented Mar 2, 2018

guiedugt commented Mar 3, 2018

juergengunz commented Mar 3, 2018 •

edited

Loading

alvelig commented Mar 3, 2018

guiedugt commented Mar 4, 2018

guiedugt commented Mar 4, 2018

juergengunz commented Mar 4, 2018

EricPKerr commented Apr 24, 2018 •

edited

Loading

guiedugt commented Apr 24, 2018

equesteo commented May 2, 2018

guiedugt commented May 3, 2018

rborn commented May 3, 2018

guiedugt commented May 3, 2018

rborn left a comment •

edited

Loading

rborn May 3, 2018

guiedugt May 22, 2018

rborn commented May 3, 2018

equesteo commented May 22, 2018

brunocascio commented May 27, 2018

guiedugt commented May 28, 2018

equesteo commented Jun 25, 2018

rborn commented Jun 25, 2018

alvelig commented Jun 25, 2018

equesteo commented Jun 25, 2018

vivianmauer commented Jun 28, 2018

ayushnawani commented Jul 7, 2018 •

edited

Loading

techieyann commented Jul 7, 2018 •

edited

Loading

Added animateToNavigation method to MapView #2049

Added animateToNavigation method to MapView #2049

Conversation

guiedugt commented Mar 2, 2018

alvelig commented Mar 2, 2018

guiedugt commented Mar 2, 2018

alvelig commented Mar 2, 2018

guiedugt commented Mar 3, 2018

juergengunz commented Mar 3, 2018 • edited Loading

alvelig commented Mar 3, 2018

guiedugt commented Mar 4, 2018

guiedugt commented Mar 4, 2018

juergengunz commented Mar 4, 2018

EricPKerr commented Apr 24, 2018 • edited Loading

guiedugt commented Apr 24, 2018

equesteo commented May 2, 2018

guiedugt commented May 3, 2018

rborn commented May 3, 2018

guiedugt commented May 3, 2018

rborn left a comment • edited Loading

Choose a reason for hiding this comment

rborn May 3, 2018

Choose a reason for hiding this comment

guiedugt May 22, 2018

Choose a reason for hiding this comment

rborn commented May 3, 2018

equesteo commented May 22, 2018

brunocascio commented May 27, 2018

guiedugt commented May 28, 2018

equesteo commented Jun 25, 2018

rborn commented Jun 25, 2018

alvelig commented Jun 25, 2018

equesteo commented Jun 25, 2018

vivianmauer commented Jun 28, 2018

ayushnawani commented Jul 7, 2018 • edited Loading

techieyann commented Jul 7, 2018 • edited Loading

juergengunz commented Mar 3, 2018 •

edited

Loading

EricPKerr commented Apr 24, 2018 •

edited

Loading

rborn left a comment •

edited

Loading

ayushnawani commented Jul 7, 2018 •

edited

Loading

techieyann commented Jul 7, 2018 •

edited

Loading