Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding overlaying components details #2425

Merged
merged 1 commit into from
Aug 14, 2018
Merged

Adding overlaying components details #2425

merged 1 commit into from
Aug 14, 2018

Conversation

SKempin
Copy link
Contributor

@SKempin SKempin commented Aug 11, 2018

How to overlay other React components on top of the MapView. This was not clear from the documentation and took some research to find a solution.

Does any other open PR do the same thing?

No, this is to make it clear in the documentation.

What issue is this PR fixing?

Documentation for overlaying components on the MapView

How did you test this PR?

I found multiple other repos that utilise the same approach.

How to overlay other React components on top of the `MapView`. This was not clear from the documentation and took some research to find a solution.
@christopherdro christopherdro merged commit 108bf75 into react-native-maps:master Aug 14, 2018
@SKempin SKempin deleted the patch-1 branch August 14, 2018 15:02
timxyz pushed a commit to 3sidedcube/react-native-maps that referenced this pull request Aug 24, 2018
* 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
@maccomaccomaccomacco
Copy link

maccomaccomaccomacco commented May 30, 2019

Well, to me it's still not clear... I mean, I tried

<MapView  style={{position: 'absolute', top: 0,left: 0,right: 0,bottom: 0}} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421}}>
     <View style={{zIndex: 4, position: "absolute", height:400, widht:400, background: '#0000ff', bottom: 50}}></View>
</MapView>

but I don't see any trace om <View/> that is supposed to be in overlay on the map.

@rborn
Copy link
Collaborator

rborn commented May 30, 2019

@marcoautiero you cannot "embed" a View in a Map. If you want to show something ontop of the map just treat it like any other component.

<MapView  style={{position: 'absolute', top: 0,left: 0,right: 0,bottom: 0}} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421}}></MapView>

<View style={{zIndex: 4, position: "absolute", height:400, widht:400, background: '#0000ff', bottom: 50}}></View>

@maccomaccomaccomacco
Copy link

Oh i see, in this case of course the content in overlay is static and doesn't follow the events happening in the map (scaling, panning and so on)...big limit for me.

Thank you for your reply anyway.

@rborn
Copy link
Collaborator

rborn commented May 31, 2019

@marcoautiero in this case you need to check Overlay there is an example in the repo on how to create custom overlays

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

Successfully merging this pull request may close these issues.

4 participants