react-native-maps / react-native-maps

react-native-maps React Native Map components for iOS + Android Contributing This project is being maintained by a small group of people, and any help with issues and pull requests are always appreciated. If you are able and willing to contribute, please read the guidelines. Installation See Installation Instructions. See Setup Instructions for the Included Example Project. Compatibility React Native Compatibility Version Requirements: Compatibility Fabric (New Architecture) | Version | React Native Requirement | | ---------------- | ------------------------ | | 1.26.1+ | >= 0.81.1 | | 1.26.0 and below | >= 0.76 | Old Architecture | Version | React Native Requirement | | --------------- | ------------------------ | | 1.14.0 - 1.20.1 | >= 0.74 | | = 0.64.3 | Component API Component API Component API Component API Component API Component API Component API Component API Component API Component API General Usage or This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself. This provides an intuitive and react-like API for declaratively controlling features on the map. Rendering a Map with an initial region MapView Using a MapView while controlling the region as state Rendering a list of markers on a map Rendering a Marker with a custom image • You need to generate an image with various resolution (lets call them ) - for more information go to Android, iOS • put all images in Android drawables and iOS assets dir • Now you can use the following code: Note: You can also pass the image binary data like , but this will not scale good with the different screen sizes. Rendering a Marker with a custom view Note: This has performance implications, if you wish for a simpler solution go with a custom image (save your self the headache) Rendering a custom Marker with a custom Callout Draggable Markers Using a custom Tile Overlay Tile Overlay using tile server For Android: add the following line in your AndroidManifest.xml For IOS: configure App Transport Security in your app Tile Overlay using local tiles Tiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage. For Android: LocalTile is still just overlay over original map tiles. It means that if device is online, underlying tiles will be still downloaded. If original tiles download/display is not desirable set mapType to 'none'. For example: See OSM Wiki for how to download tiles for offline usage. Overlaying other components on the map Place components that you wish to overlay underneath the closing tag. Absolutely position these elements. Customizing the map style (Google Maps Only) The Google Maps on iOS and Android supports styling via google cloud platform, the styled maps are published under a googleMapId, by simply setting the property googleMapId to the MapView you can use that styled map more info here: google map id MapView Events The component and its child components have several events that you can subscribe to. This example displays some of them in a log as a demonstration. Tracking Region / Location Programmatically Changing Region One can change the mapview's position using refs and component methods, or by passing in an updated prop. The component methods will allow one to animate to a given position like the native API could. Changing the style of the map Arbitrary React Views as Markers Using the MapView with the Animated API The component can be made to work with the Animated API, having the entire prop be declared as an animated value. This allows one to animate the zoom and position of the MapView along with other gestures, giving a nice feel. Further, Marker views can use the animated API to enhance the effect. Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views. Not sure if this can be worked around yet or not. Markers' coordinates can also be animated, as shown in this example: Polygon Creator Other Overlays So far, , , and are available to pass in as children to the component. Gradient Polylines (iOS MapKit only) Gradient polylines can be created using the prop of the component. Default Markers Default markers will be rendered unless a custom marker is specified. One can optionally adjust the color of the default marker by using the prop. Custom Callouts Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view. Additionally, you can fall back to the standard behavior of just having a title/description through the 's and props. Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble. To handle press on specific subview of callout use with . See example. Image-based Markers Markers can be customized by just using images, and specified using the prop. Draggable Markers Markers are draggable, and emit continuous drag events to update other UI during drags. Lite Mode ( Android ) Enable lite mode on Android with prop. Ideal when having multiple maps in a View or ScrollView. On Poi Click (Google Maps Only) Poi are clickable, you can catch the event to get its information (usually to get the full detail from Google Place using the placeId). Animated Region The MapView can accept an value as its prop. This allows you to utilize the Animated API to control the map's center and zoom. Animated Marker Position Markers can also accept an value as a coordinate. Take Snapshot of map Zoom to Specified Markers Pass an array of marker identifiers to have the map re-focus. Zoom to Specified Coordinates Pass an array of coordinates to focus a map region on said coordinates. Troublesho…