├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .jscodeshiftignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── .watchmanconfig ├── CHANGELOG.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── babel.config.js ├── build.gradle ├── docs ├── callout.md ├── circle.md ├── examples-setup.md ├── geojson.md ├── heatmap.md ├── installation.md ├── mapview.md ├── marker.md ├── overlay.md ├── polygon.md └── polyline.md ├── enable-google-maps ├── example ├── .eslintrc ├── .watchmanconfig ├── App.js ├── android │ └── app │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── airbnb │ │ │ └── android │ │ │ └── react │ │ │ └── maps │ │ │ └── example │ │ │ ├── ExampleApplication.java │ │ │ └── MainActivity.java │ │ └── res │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── app.json ├── examples │ ├── AnimatedMarkers.js │ ├── AnimatedNavigation.js │ ├── AnimatedPriceMarker.js │ ├── AnimatedViews.js │ ├── BugMarkerWontUpdate.js │ ├── CachedMap.js │ ├── Callouts.js │ ├── CameraControl.js │ ├── CustomCallout.js │ ├── CustomMarkers.js │ ├── CustomOverlay.js │ ├── CustomOverlayXMarksTheSpot.js │ ├── CustomTiles.js │ ├── CustomTilesLocal.js │ ├── DefaultMarkers.js │ ├── DisplayLatLng.js │ ├── DraggableMarkers.js │ ├── EventListener.js │ ├── FitToCoordinates.js │ ├── FitToSuppliedMarkers.js │ ├── Geojson.js │ ├── GradientPolylines.js │ ├── ImageOverlayWithAssets.js │ ├── ImageOverlayWithURL.js │ ├── IndoorMap.js │ ├── LegalLabel.js │ ├── LiteMapView.js │ ├── LoadingMap.js │ ├── MapBoundaries.js │ ├── MapKml.js │ ├── MapStyle.js │ ├── MarkerTypes.js │ ├── MassiveCustomMarkers.js │ ├── MyLocationMapMarker.js │ ├── OnPoiClick.js │ ├── Overlays.js │ ├── PanController.js │ ├── PolygonCreator.js │ ├── PolylineCreator.js │ ├── PriceMarker.js │ ├── SetNativePropsOverlays.js │ ├── StaticMap.js │ ├── TakeSnapshot.js │ ├── TestIdMarkers.js │ ├── ViewsAsMarkers.js │ ├── WMSTiles.js │ ├── ZIndexMarkers.js │ └── assets │ │ ├── car.png │ │ ├── flag-blue.png │ │ └── flag-pink.png ├── index.js └── ios │ ├── AirMapsExplorer.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── AirMapsExplorer.xcscheme │ ├── AirMapsExplorer │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── Info.plist │ └── main.m │ ├── AirMapsExplorerTests │ ├── AirMapsExplorerTests.m │ └── Info.plist │ ├── Podfile │ └── Podfile.lock ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── index.d.ts ├── index.js ├── lib ├── android │ ├── build.gradle │ ├── gradle-maven-push.gradle │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── assets │ │ └── ula.kml │ │ └── java │ │ └── com │ │ └── airbnb │ │ └── android │ │ └── react │ │ └── maps │ │ ├── AirMapCallout.java │ │ ├── AirMapCalloutManager.java │ │ ├── AirMapCircle.java │ │ ├── AirMapCircleManager.java │ │ ├── AirMapFeature.java │ │ ├── AirMapGradientPolyline.java │ │ ├── AirMapGradientPolylineManager.java │ │ ├── AirMapHeatmap.java │ │ ├── AirMapHeatmapManager.java │ │ ├── AirMapLiteManager.java │ │ ├── AirMapLocalTile.java │ │ ├── AirMapLocalTileManager.java │ │ ├── AirMapManager.java │ │ ├── AirMapMarker.java │ │ ├── AirMapMarkerManager.java │ │ ├── AirMapModule.java │ │ ├── AirMapOverlay.java │ │ ├── AirMapOverlayManager.java │ │ ├── AirMapPolygon.java │ │ ├── AirMapPolygonManager.java │ │ ├── AirMapPolyline.java │ │ ├── AirMapPolylineManager.java │ │ ├── AirMapUrlTile.java │ │ ├── AirMapUrlTileManager.java │ │ ├── AirMapView.java │ │ ├── AirMapWMSTile.java │ │ ├── AirMapWMSTileManager.java │ │ ├── FileUtil.java │ │ ├── ImageReadable.java │ │ ├── ImageReader.java │ │ ├── ImageUtil.java │ │ ├── LatLngBoundsUtils.java │ │ ├── MapsPackage.java │ │ ├── RegionChangeEvent.java │ │ ├── SizeReportingShadowNode.java │ │ ├── ViewAttacherGroup.java │ │ └── ViewChangesTracker.java ├── components │ ├── AirMapModule.js │ ├── AirMapModule.web.js │ ├── AnimatedRegion.js │ ├── Geojson.js │ ├── MapCallout.js │ ├── MapCalloutSubview.js │ ├── MapCircle.js │ ├── MapHeatmap.js │ ├── MapLocalTile.js │ ├── MapMarker.js │ ├── MapOverlay.js │ ├── MapPolygon.js │ ├── MapPolyline.js │ ├── MapUrlTile.js │ ├── MapView.js │ ├── MapWMSTile.js │ ├── ProviderConstants.js │ ├── decorateMapComponent.js │ ├── requireNativeComponent.js │ ├── requireNativeComponent.web.js │ ├── resolveAssetSource.js │ └── resolveAssetSource.web.js ├── ios │ ├── AirGoogleMaps │ │ ├── AIRDummyView.h │ │ ├── AIRDummyView.m │ │ ├── AIRGMSMarker.h │ │ ├── AIRGMSMarker.m │ │ ├── AIRGMSPolygon.h │ │ ├── AIRGMSPolygon.m │ │ ├── AIRGMSPolyline.h │ │ ├── AIRGMSPolyline.m │ │ ├── AIRGoogleMap.h │ │ ├── AIRGoogleMap.m │ │ ├── AIRGoogleMapCallout.h │ │ ├── AIRGoogleMapCallout.m │ │ ├── AIRGoogleMapCalloutManager.h │ │ ├── AIRGoogleMapCalloutManager.m │ │ ├── AIRGoogleMapCalloutSubview.h │ │ ├── AIRGoogleMapCalloutSubview.m │ │ ├── AIRGoogleMapCalloutSubviewManager.h │ │ ├── AIRGoogleMapCalloutSubviewManager.m │ │ ├── AIRGoogleMapCircle.h │ │ ├── AIRGoogleMapCircle.m │ │ ├── AIRGoogleMapCircleManager.h │ │ ├── AIRGoogleMapCircleManager.m │ │ ├── AIRGoogleMapHeatmap.h │ │ ├── AIRGoogleMapHeatmap.m │ │ ├── AIRGoogleMapHeatmapManager.h │ │ ├── AIRGoogleMapHeatmapManager.m │ │ ├── AIRGoogleMapManager.h │ │ ├── AIRGoogleMapManager.m │ │ ├── AIRGoogleMapMarker.h │ │ ├── AIRGoogleMapMarker.m │ │ ├── AIRGoogleMapMarkerManager.h │ │ ├── AIRGoogleMapMarkerManager.m │ │ ├── AIRGoogleMapOverlay.h │ │ ├── AIRGoogleMapOverlay.m │ │ ├── AIRGoogleMapOverlayManager.h │ │ ├── AIRGoogleMapOverlayManager.m │ │ ├── AIRGoogleMapPolygon.h │ │ ├── AIRGoogleMapPolygon.m │ │ ├── AIRGoogleMapPolygonManager.h │ │ ├── AIRGoogleMapPolygonManager.m │ │ ├── AIRGoogleMapPolyline.h │ │ ├── AIRGoogleMapPolyline.m │ │ ├── AIRGoogleMapPolylineManager.h │ │ ├── AIRGoogleMapPolylineManager.m │ │ ├── AIRGoogleMapURLTileManager.m │ │ ├── AIRGoogleMapUrlTile.h │ │ ├── AIRGoogleMapUrlTile.m │ │ ├── AIRGoogleMapUrlTileManager.h │ │ ├── AIRGoogleMapWMSTile.h │ │ ├── AIRGoogleMapWMSTile.m │ │ ├── AIRGoogleMapWMSTileManager.h │ │ ├── AIRGoogleMapWMSTileManager.m │ │ ├── RCTConvert+GMSMapViewType.h │ │ └── RCTConvert+GMSMapViewType.m │ ├── AirMaps.xcodeproj │ │ └── project.pbxproj │ ├── AirMaps │ │ ├── AIRMap.h │ │ ├── AIRMap.m │ │ ├── AIRMapCallout.h │ │ ├── AIRMapCallout.m │ │ ├── AIRMapCalloutManager.h │ │ ├── AIRMapCalloutManager.m │ │ ├── AIRMapCalloutSubview.h │ │ ├── AIRMapCalloutSubview.m │ │ ├── AIRMapCalloutSubviewManager.h │ │ ├── AIRMapCalloutSubviewManager.m │ │ ├── AIRMapCircle.h │ │ ├── AIRMapCircle.m │ │ ├── AIRMapCircleManager.h │ │ ├── AIRMapCircleManager.m │ │ ├── AIRMapCoordinate.h │ │ ├── AIRMapCoordinate.m │ │ ├── AIRMapLocalTile.h │ │ ├── AIRMapLocalTile.m │ │ ├── AIRMapLocalTileManager.h │ │ ├── AIRMapLocalTileManager.m │ │ ├── AIRMapLocalTileOverlay.h │ │ ├── AIRMapLocalTileOverlay.m │ │ ├── AIRMapManager.h │ │ ├── AIRMapManager.m │ │ ├── AIRMapMarker.h │ │ ├── AIRMapMarker.m │ │ ├── AIRMapMarkerManager.h │ │ ├── AIRMapMarkerManager.m │ │ ├── AIRMapOverlay.h │ │ ├── AIRMapOverlay.m │ │ ├── AIRMapOverlayManager.h │ │ ├── AIRMapOverlayManager.m │ │ ├── AIRMapOverlayRenderer.h │ │ ├── AIRMapOverlayRenderer.m │ │ ├── AIRMapPolygon.h │ │ ├── AIRMapPolygon.m │ │ ├── AIRMapPolygonManager.h │ │ ├── AIRMapPolygonManager.m │ │ ├── AIRMapPolyline.h │ │ ├── AIRMapPolyline.m │ │ ├── AIRMapPolylineManager.h │ │ ├── AIRMapPolylineManager.m │ │ ├── AIRMapPolylineRenderer.h │ │ ├── AIRMapPolylineRenderer.m │ │ ├── AIRMapSnapshot.h │ │ ├── AIRMapUrlTile.h │ │ ├── AIRMapUrlTile.m │ │ ├── AIRMapUrlTileManager.h │ │ ├── AIRMapUrlTileManager.m │ │ ├── AIRMapWMSTile.h │ │ ├── AIRMapWMSTile.m │ │ ├── AIRMapWMSTileManager.h │ │ ├── AIRMapWMSTileManager.m │ │ ├── AIRWeakMapReference.h │ │ ├── AIRWeakMapReference.m │ │ ├── AIRWeakTimerReference.h │ │ ├── AIRWeakTimerReference.m │ │ ├── Callout │ │ │ ├── SMCalloutView.h │ │ │ └── SMCalloutView.m │ │ ├── RCTConvert+AirMap.h │ │ └── RCTConvert+AirMap.m │ └── User.xcconfig └── web │ ├── Leaflet │ ├── Callout.js │ ├── CalloutSubview.js │ ├── Circle.js │ ├── LocalTile.js │ ├── Map.js │ ├── Marker.js │ ├── Overlay.js │ ├── Polygon.js │ ├── Polyline.js │ ├── UrlTile.js │ ├── WMSTile.js │ ├── index.js │ └── utils │ │ ├── autoLink.js │ │ ├── coordinates.js │ │ ├── events.js │ │ ├── icons.js │ │ ├── transformProps.js │ │ └── withRemoteStyles.js │ ├── index.js │ └── utils │ └── createLogger.js ├── metro.config.js ├── package-lock.json ├── package.json ├── react-native-google-maps.podspec ├── react-native-maps.podspec ├── react-native.config.js ├── rn-cli.config.js ├── scripts └── update-version.js ├── settings.gradle └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "@react-native-community", 4 | "plugins": [ 5 | "prefer-object-spread" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | 16 | ; Ignore polyfills 17 | .*/Libraries/polyfills/.* 18 | 19 | ; Ignore metro 20 | .*/node_modules/metro/.* 21 | 22 | [include] 23 | 24 | [libs] 25 | node_modules/react-native/Libraries/react-native/react-native-interface.js 26 | node_modules/react-native/flow/ 27 | 28 | [options] 29 | emoji=true 30 | 31 | esproposal.optional_chaining=enable 32 | esproposal.nullish_coalescing=enable 33 | 34 | module.system=haste 35 | module.system.haste.use_name_reducers=true 36 | # get basename 37 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' 38 | # strip .js or .js.flow suffix 39 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' 40 | # strip .ios suffix 41 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' 42 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' 43 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' 44 | module.system.haste.paths.blacklist=.*/__tests__/.* 45 | module.system.haste.paths.blacklist=.*/__mocks__/.* 46 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* 47 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* 48 | 49 | munge_underscores=true 50 | 51 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 52 | 53 | module.file_ext=.js 54 | module.file_ext=.jsx 55 | module.file_ext=.json 56 | module.file_ext=.native.js 57 | 58 | suppress_type=$FlowIssue 59 | suppress_type=$FlowFixMe 60 | suppress_type=$FlowFixMeProps 61 | suppress_type=$FlowFixMeState 62 | 63 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 64 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 65 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 66 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 67 | 68 | [version] 69 | ^0.92.0 70 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 12 | 13 | ### Does any other open PR do the same thing? 14 | 15 | 26 | 27 | (please answer here) 28 | 29 | ### What issue is this PR fixing? 30 | 31 | (please link the issue here) 32 | 33 | ### How did you test this PR? 34 | 35 | 48 | 49 | (please answer here) 50 | 51 | 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | Pods/ 25 | AirMapsExplorer.xcworkspace/ 26 | 27 | # Android/IntelliJ 28 | # 29 | build/ 30 | .idea 31 | .gradle 32 | local.properties 33 | *.iml 34 | 35 | # node.js 36 | # 37 | node_modules/ 38 | npm-debug.log 39 | yarn-error.log 40 | 41 | # Bundle artifact 42 | *.jsbundle 43 | 44 | # VSCode workspace settings 45 | .vscode 46 | -------------------------------------------------------------------------------- /.jscodeshiftignore: -------------------------------------------------------------------------------- 1 | # To run a codeshift on the react-native-maps library, cd to the root dir and run: 2 | # jscodeshift -t PATH_TO_TRANSFORM . --ignore-config .jscodeshiftignore 3 | .idea 4 | android 5 | docs 6 | example 7 | gradle 8 | node_modules 9 | scripts -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | .babelrc 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "lts/*" 5 | 6 | cache: 7 | directories: 8 | - node_modules 9 | 10 | script: npm run ci 11 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'cocoapods' 3 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.0) 5 | activesupport (4.2.11.1) 6 | i18n (~> 0.7) 7 | minitest (~> 5.1) 8 | thread_safe (~> 0.3, >= 0.3.4) 9 | tzinfo (~> 1.1) 10 | atomos (0.1.3) 11 | claide (1.0.2) 12 | cocoapods (1.6.1) 13 | activesupport (>= 4.0.2, < 5) 14 | claide (>= 1.0.2, < 2.0) 15 | cocoapods-core (= 1.6.1) 16 | cocoapods-deintegrate (>= 1.0.2, < 2.0) 17 | cocoapods-downloader (>= 1.2.2, < 2.0) 18 | cocoapods-plugins (>= 1.0.0, < 2.0) 19 | cocoapods-search (>= 1.0.0, < 2.0) 20 | cocoapods-stats (>= 1.0.0, < 2.0) 21 | cocoapods-trunk (>= 1.3.1, < 2.0) 22 | cocoapods-try (>= 1.1.0, < 2.0) 23 | colored2 (~> 3.1) 24 | escape (~> 0.0.4) 25 | fourflusher (>= 2.2.0, < 3.0) 26 | gh_inspector (~> 1.0) 27 | molinillo (~> 0.6.6) 28 | nap (~> 1.0) 29 | ruby-macho (~> 1.4) 30 | xcodeproj (>= 1.8.1, < 2.0) 31 | cocoapods-core (1.6.1) 32 | activesupport (>= 4.0.2, < 6) 33 | fuzzy_match (~> 2.0.4) 34 | nap (~> 1.0) 35 | cocoapods-deintegrate (1.0.4) 36 | cocoapods-downloader (1.2.2) 37 | cocoapods-plugins (1.0.0) 38 | nap 39 | cocoapods-search (1.0.0) 40 | cocoapods-stats (1.1.0) 41 | cocoapods-trunk (1.3.1) 42 | nap (>= 0.8, < 2.0) 43 | netrc (~> 0.11) 44 | cocoapods-try (1.1.0) 45 | colored2 (3.1.2) 46 | concurrent-ruby (1.1.5) 47 | escape (0.0.4) 48 | fourflusher (2.2.0) 49 | fuzzy_match (2.0.4) 50 | gh_inspector (1.1.3) 51 | i18n (0.9.5) 52 | concurrent-ruby (~> 1.0) 53 | minitest (5.11.3) 54 | molinillo (0.6.6) 55 | nanaimo (0.2.6) 56 | nap (1.1.0) 57 | netrc (0.11.0) 58 | ruby-macho (1.4.0) 59 | thread_safe (0.3.6) 60 | tzinfo (1.2.5) 61 | thread_safe (~> 0.1) 62 | xcodeproj (1.8.2) 63 | CFPropertyList (>= 2.3.3, < 4.0) 64 | atomos (~> 0.1.3) 65 | claide (>= 1.0.2, < 2.0) 66 | colored2 (~> 3.1) 67 | nanaimo (~> 0.2.6) 68 | 69 | PLATFORMS 70 | ruby 71 | 72 | DEPENDENCIES 73 | cocoapods 74 | 75 | BUNDLED WITH 76 | 1.17.2 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Airbnb 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: [ 4 | [ 5 | 'module-resolver', 6 | { 7 | alias: { 8 | 'react-native-maps': './', 9 | }, 10 | cwd: 'babelrc', 11 | }, 12 | ], 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext { 3 | minSdkVersion = 16 4 | compileSdkVersion = 28 5 | targetSdkVersion = 28 6 | supportLibVersion = '28.0.0' 7 | playServicesVersion = '16.1.0' 8 | } 9 | repositories { 10 | google() 11 | jcenter() 12 | } 13 | dependencies { 14 | classpath 'com.android.tools.build:gradle:3.3.1' 15 | } 16 | } 17 | 18 | allprojects { 19 | repositories { 20 | mavenLocal() 21 | google() 22 | jcenter() 23 | maven { 24 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 25 | url "$rootDir/node_modules/react-native/android" 26 | } 27 | } 28 | } 29 | 30 | task clean(type: Delete) { 31 | delete rootProject.buildDir 32 | } 33 | -------------------------------------------------------------------------------- /docs/callout.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | |---|---|---|---| 7 | | `tooltip` | `Boolean` | `false` | If `false`, a default "tooltip" bubble window will be drawn around this callouts children. If `true`, the child views can fully customize their appearance, including any "bubble" like styles. 8 | | `alphaHitTest` | `Boolean` | `false` | If `true`, clicks on transparent areas in callout will be passed to map. **Note**: iOS only. 9 | 10 | ## Events 11 | 12 | | Event Name | Returns | Notes 13 | |---|---|---| 14 | | `onPress` | | Callback that is called when the user presses on the callout 15 | 16 | 17 | 18 | --- 19 | 20 | 21 | 22 | # `` Component API 23 | 24 | **Note**: Supported on iOS only. 25 | Use to handle press on specific subview of callout. 26 | Put this component inside ``. 27 | 28 | ## Events 29 | 30 | | Event Name | Returns | Notes 31 | |---|---|---| 32 | | `onPress` | | Callback that is called when the user presses on this subview inside callout 33 | 34 | ## Notes 35 | Native press event has property `action`, which is: 36 | - `callout-press` (or `marker-overlay-press` for GoogleMaps on iOS) for press on `` 37 | - `callout-inside-press` (or `marker-inside-overlay-press` for GoogleMaps on iOS) for press on `` 38 | 39 | -------------------------------------------------------------------------------- /docs/circle.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | |---|---|---|---| 7 | | `center` | `LatLng` | (Required) | The coordinate of the center of the circle 8 | | `radius` | `Number` | (Required) | The radius of the circle to be drawn (in meters) 9 | | `strokeWidth` | `Number` | `1` | The stroke width to use for the path. 10 | | `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path. 11 | | `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path. 12 | | `zIndex` | `Number` | 0 | The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. The default zIndex is 0. (Android Only) 13 | | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path. Other values : `butt`, `square` 14 | | `lineJoin` | `String` | | The line join style to apply to corners of the path. possible value: `miter`, `round`, `bevel` 15 | | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. 16 | | `geodesic` | `Boolean` | | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. 17 | | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. 18 | | `lineDashPattern` | `Array` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. 19 | 20 | 21 | ## Types 22 | 23 | ``` 24 | type LatLng { 25 | latitude: Number, 26 | longitude: Number, 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /docs/examples-setup.md: -------------------------------------------------------------------------------- 1 | # Examples Setup 2 | 3 | ## iOS 4 | 5 | 1. If you don't have bundler gem installed: 6 | 7 | ``` 8 | gem install bundler 9 | ``` 10 | 11 | 2. Install dependencies and open the workspace: 12 | 13 | ``` 14 | npm install 15 | npm run build:ios 16 | npm run run:ios 17 | ``` 18 | 19 | or 20 | 21 | ``` 22 | yarn install 23 | yarn build:ios 24 | yarn run:ios 25 | ``` 26 | 27 | ## android 28 | 29 | 1. Start your emulator 30 | 31 | 2. Install dependencies and run the example: 32 | 33 | ``` 34 | npm install 35 | npm run run:android 36 | ``` 37 | 38 | or 39 | 40 | ``` 41 | yarn install 42 | yarn run:android 43 | ``` 44 | -------------------------------------------------------------------------------- /docs/geojson.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | | --------- | ---- | ------------------------------------------------------ | ---- | 7 | | `geojson` | | [Geojson](https://geojson.org/) description of object. | 8 | 9 | ## Example 10 | 11 | ``` 12 | import React from 'react'; 13 | import MapView, {Geojson} from 'react-native-maps'; 14 | 15 | const myPlace = { 16 | type: 'FeatureCollection', 17 | features: [ 18 | { 19 | type: 'Feature', 20 | properties: {}, 21 | geometry: { 22 | type: 'Point', 23 | coordinates: [64.165329, 48.844287], 24 | } 25 | } 26 | ] 27 | }; 28 | 29 | const Map = props => ( 30 | 31 | 32 | 33 | ); 34 | ``` 35 | 36 | 37 | -------------------------------------------------------------------------------- /docs/heatmap.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | |---|---|---|---| 7 | | `points` | `Array` | | Array of heatmap entries to apply towards density. 8 | | `radius` | `Number` | `20` | The radius of the heatmap points in pixels, between 10 and 50. 9 | | `opacity` | `Number` | `0.7` | The opacity of the heatmap. 10 | | `gradient` | `Object` | | Heatmap gradient configuration (See below for *Gradient Config*). 11 | 12 | 13 | ## Gradient Config 14 | 15 | [Android Doc](https://developers.google.com/maps/documentation/android-sdk/utility/heatmap#custom) | [iOS Doc](https://developers.google.com/maps/documentation/ios-sdk/utility/heatmap#customize) 16 | 17 | | Prop | Type | Default | Note | 18 | |---|---|---|---| 19 | | `colors` | `Array` | | Colors (one or more) to use for gradient. 20 | | `startPoints` | `Array` | | Array of floating point values from 0 to 1 representing where each color starts. Array length must be equal to `colors` array length. 21 | | `colorMapSize` | `Number` | `256` | Resolution of color map -- number corresponding to the number of steps colors are interpolated into. 22 | 23 | 24 | ## Types 25 | 26 | ``` 27 | type WeightedLatLng = { 28 | latitude: Number; 29 | longitude: Number; 30 | weight?: Number; 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /docs/overlay.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | |---|---|---|---| 7 | | `image` | `ImageSource` | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used. 8 | | `bounds` | `Array` | | The coordinates for the image (left-top corner, right-bottom corner). ie.```[[lat, long], [lat, long]]``` 9 | | `tappable` | `Bool` | `false` | `Android only` Boolean to allow an overlay to be tappable and use the onPress function. 10 | 11 | ## Events 12 | 13 | | Event Name | Returns | Notes 14 | |---|---|---| 15 | | `onPress` | | `Android only` Callback that is called when the user presses on the overlay 16 | 17 | ## Types 18 | 19 | ``` 20 | type LatLng = [ 21 | latitude: Number, 22 | longitude: Number, 23 | ] 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/polygon.md: -------------------------------------------------------------------------------- 1 | # `` Component API 2 | 3 | ## Props 4 | 5 | | Prop | Type | Default | Note | 6 | |---|---|---|---| 7 | | `coordinates` | `Array` | (Required) | An array of coordinates to describe the polygon 8 | | `holes` | `Array>` | | A 2d array of coordinates to describe holes of the polygon where each hole has at least 3 points. 9 | | `strokeWidth` | `Number` | `1` | The stroke width to use for the path. 10 | | `strokeColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The stroke color to use for the path. 11 | | `fillColor` | `String` | `#000`, `rgba(r,g,b,0.5)` | The fill color to use for the path. 12 | | `lineCap` | `String` | `round` | The line cap style to apply to the open ends of the path. 13 | | `lineJoin` | `Array` | | The line join style to apply to corners of the path. 14 | | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. 15 | | `geodesic` | `Boolean` | | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. 16 | | `lineDashPhase` | `Number` | `0` | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. 17 | | `lineDashPattern` | `Array` | `null` | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. 18 | | `tappable` | `Bool` | false | Boolean to allow a polygon to be tappable and use the onPress function. 19 | 20 | ## Events 21 | 22 | | Event Name | Returns | Notes 23 | |---|---|---| 24 | | `onPress` | | Callback that is called when the user presses on the polygon 25 | 26 | ## Types 27 | 28 | ``` 29 | type LatLng { 30 | latitude: Number, 31 | longitude: Number, 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /enable-google-maps: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | cd "$(dirname "${BASH_SOURCE[0]}")" 4 | 5 | GOOGLE_MAPS_INSTALL_LOCATION=$1 6 | 7 | if [[ -z "$GOOGLE_MAPS_INSTALL_LOCATION" ]]; then 8 | echo "usage: enable-google-maps " 9 | exit 1 10 | fi 11 | 12 | cat > lib/ios/User.xcconfig < 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/airbnb/android/react/maps/example/ExampleApplication.java: -------------------------------------------------------------------------------- 1 | package com.airbnb.android.react.maps.example; 2 | 3 | import android.app.Application; 4 | 5 | import com.airbnb.android.react.maps.MapsPackage; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.shell.MainReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class ExampleApplication extends Application implements ReactApplication { 16 | private final ReactNativeHost reactNativeHost = new ReactNativeHost(this) { 17 | @Override public boolean getUseDeveloperSupport() { 18 | return BuildConfig.DEBUG; 19 | } 20 | 21 | @Override 22 | protected String getJSMainModuleName() { 23 | return "example/index"; 24 | } 25 | 26 | @Override protected List getPackages() { 27 | return Arrays.asList( 28 | new MainReactPackage(), 29 | new MapsPackage()); 30 | } 31 | }; 32 | 33 | @Override 34 | public ReactNativeHost getReactNativeHost() { 35 | return reactNativeHost; 36 | } 37 | 38 | @Override 39 | public void onCreate() { 40 | super.onCreate(); 41 | SoLoader.init(this, /* native exopackage */ false); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/airbnb/android/react/maps/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.airbnb.android.react.maps.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | 6 | public class MainActivity extends ReactActivity { 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "AirMapsExplorer"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/expo/react-native-maps/ecb9c829f8eb9d7707dfd2baa87556f2f2a95236/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/expo/react-native-maps/ecb9c829f8eb9d7707dfd2baa87556f2f2a95236/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/expo/react-native-maps/ecb9c829f8eb9d7707dfd2baa87556f2f2a95236/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/expo/react-native-maps/ecb9c829f8eb9d7707dfd2baa87556f2f2a95236/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | AirMapsExplorer 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "AirMapsExplorer", 3 | "displayName": "AirMapsExplorer" 4 | } 5 | -------------------------------------------------------------------------------- /example/examples/CustomCallout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { StyleSheet, View } from 'react-native'; 5 | 6 | const propTypes = { 7 | children: PropTypes.node.isRequired, 8 | style: PropTypes.object, 9 | }; 10 | 11 | class CustomCallout extends React.Component { 12 | render() { 13 | return ( 14 | 15 | 16 | {this.props.children} 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | CustomCallout.propTypes = propTypes; 26 | 27 | const styles = StyleSheet.create({ 28 | container: { 29 | flexDirection: 'column', 30 | alignSelf: 'flex-start', 31 | }, 32 | bubble: { 33 | width: 140, 34 | flexDirection: 'row', 35 | alignSelf: 'flex-start', 36 | backgroundColor: '#4da2ab', 37 | paddingHorizontal: 20, 38 | paddingVertical: 12, 39 | borderRadius: 6, 40 | borderColor: '#007a87', 41 | borderWidth: 0.5, 42 | }, 43 | amount: { 44 | flex: 1, 45 | }, 46 | arrow: { 47 | backgroundColor: 'transparent', 48 | borderWidth: 16, 49 | borderColor: 'transparent', 50 | borderTopColor: '#4da2ab', 51 | alignSelf: 'center', 52 | marginTop: -32, 53 | }, 54 | arrowBorder: { 55 | backgroundColor: 'transparent', 56 | borderWidth: 16, 57 | borderColor: 'transparent', 58 | borderTopColor: '#007a87', 59 | alignSelf: 'center', 60 | marginTop: -0.5, 61 | }, 62 | }); 63 | 64 | export default CustomCallout; 65 | -------------------------------------------------------------------------------- /example/examples/CustomOverlay.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, View, Dimensions } from 'react-native'; 3 | 4 | import MapView, { ProviderPropType } from 'react-native-maps'; 5 | import XMarksTheSpot from './CustomOverlayXMarksTheSpot'; 6 | 7 | const { width, height } = Dimensions.get('window'); 8 | const ASPECT_RATIO = width / height; 9 | const LATITUDE = 37.78825; 10 | const LONGITUDE = -122.4324; 11 | const LATITUDE_DELTA = 0.0922; 12 | const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 13 | 14 | class CustomOverlay extends React.Component { 15 | constructor(props) { 16 | super(props); 17 | 18 | this.state = { 19 | region: { 20 | latitude: LATITUDE, 21 | longitude: LONGITUDE, 22 | latitudeDelta: LATITUDE_DELTA, 23 | longitudeDelta: LONGITUDE_DELTA, 24 | }, 25 | coordinates: [ 26 | { 27 | longitude: -122.442753, 28 | latitude: 37.79879, 29 | }, 30 | { 31 | longitude: -122.424728, 32 | latitude: 37.801232, 33 | }, 34 | { 35 | longitude: -122.422497, 36 | latitude: 37.790651, 37 | }, 38 | { 39 | longitude: -122.440693, 40 | latitude: 37.788209, 41 | }, 42 | ], 43 | center: { 44 | longitude: -122.4326648935676, 45 | latitude: 37.79418561114521, 46 | }, 47 | }; 48 | } 49 | 50 | render() { 51 | const { coordinates, center, region } = this.state; 52 | return ( 53 | 54 | 59 | 60 | 61 | 62 | ); 63 | } 64 | } 65 | 66 | CustomOverlay.propTypes = { 67 | provider: ProviderPropType, 68 | }; 69 | 70 | const styles = StyleSheet.create({ 71 | container: { 72 | ...StyleSheet.absoluteFillObject, 73 | justifyContent: 'flex-end', 74 | alignItems: 'center', 75 | }, 76 | map: { 77 | ...StyleSheet.absoluteFillObject, 78 | }, 79 | }); 80 | 81 | export default CustomOverlay; 82 | -------------------------------------------------------------------------------- /example/examples/CustomOverlayXMarksTheSpot.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { View } from 'react-native'; 5 | import { Polygon, Polyline, Marker } from 'react-native-maps'; 6 | 7 | class XMarksTheSpot extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 16 | 19 | 22 | 23 | 24 | ); 25 | } 26 | } 27 | 28 | XMarksTheSpot.propTypes = { 29 | coordinates: PropTypes.array, 30 | center: PropTypes.object, 31 | zIndex: PropTypes.number, 32 | }; 33 | 34 | export default XMarksTheSpot; 35 | -------------------------------------------------------------------------------- /example/examples/DraggableMarkers.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, View, Dimensions } from 'react-native'; 3 | 4 | import MapView, { Marker, ProviderPropType } from 'react-native-maps'; 5 | import PriceMarker from './PriceMarker'; 6 | 7 | const { width, height } = Dimensions.get('window'); 8 | 9 | const ASPECT_RATIO = width / height; 10 | const LATITUDE = 37.78825; 11 | const LONGITUDE = -122.4324; 12 | const LATITUDE_DELTA = 0.0922; 13 | const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 14 | const SPACE = 0.01; 15 | 16 | function log(eventName, e) { 17 | console.log(eventName, e.nativeEvent); 18 | } 19 | 20 | class MarkerTypes extends React.Component { 21 | constructor(props) { 22 | super(props); 23 | 24 | this.state = { 25 | a: { 26 | latitude: LATITUDE + SPACE, 27 | longitude: LONGITUDE + SPACE, 28 | }, 29 | b: { 30 | latitude: LATITUDE - SPACE, 31 | longitude: LONGITUDE - SPACE, 32 | }, 33 | }; 34 | } 35 | 36 | render() { 37 | return ( 38 | 39 | 49 | log('onSelect', e)} 52 | onDrag={e => log('onDrag', e)} 53 | onDragStart={e => log('onDragStart', e)} 54 | onDragEnd={e => log('onDragEnd', e)} 55 | onPress={e => log('onPress', e)} 56 | draggable 57 | > 58 | 59 | 60 | log('onSelect', e)} 63 | onDrag={e => log('onDrag', e)} 64 | onDragStart={e => log('onDragStart', e)} 65 | onDragEnd={e => log('onDragEnd', e)} 66 | onPress={e => log('onPress', e)} 67 | draggable 68 | /> 69 | 70 | 71 | ); 72 | } 73 | } 74 | 75 | MarkerTypes.propTypes = { 76 | provider: ProviderPropType, 77 | }; 78 | 79 | const styles = StyleSheet.create({ 80 | container: { 81 | ...StyleSheet.absoluteFillObject, 82 | justifyContent: 'flex-end', 83 | alignItems: 'center', 84 | }, 85 | map: { 86 | ...StyleSheet.absoluteFillObject, 87 | }, 88 | }); 89 | 90 | export default MarkerTypes; 91 | -------------------------------------------------------------------------------- /example/examples/Geojson.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapView, { Geojson } from 'react-native-maps'; 3 | 4 | const myPlace = { 5 | type: 'FeatureCollection', 6 | features: [ 7 | { 8 | type: 'Feature', 9 | properties: {}, 10 | geometry: { 11 | type: 'Point', 12 | coordinates: [64.165329, 48.844287], 13 | }, 14 | }, 15 | ], 16 | }; 17 | 18 | const GeojsonMap = props => ( 19 | 20 | 21 | 22 | ); 23 | 24 | export default GeojsonMap; 25 | -------------------------------------------------------------------------------- /example/examples/GradientPolylines.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Dimensions } from 'react-native'; 3 | 4 | import MapView, { Polyline, ProviderPropType } from 'react-native-maps'; 5 | 6 | const { width, height } = Dimensions.get('window'); 7 | 8 | const ASPECT_RATIO = width / height; 9 | const LATITUDE = 37.78825; 10 | const LONGITUDE = -122.4324; 11 | const LATITUDE_DELTA = 0.0922; 12 | const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 13 | 14 | const COORDINATES = [ 15 | { latitude: 37.8025259, longitude: -122.4351431 }, 16 | { latitude: 37.7896386, longitude: -122.421646 }, 17 | { latitude: 37.7665248, longitude: -122.4161628 }, 18 | { latitude: 37.7734153, longitude: -122.4577787 }, 19 | { latitude: 37.7948605, longitude: -122.4596065 }, 20 | { latitude: 37.8025259, longitude: -122.4351431 }, 21 | ]; 22 | 23 | const COLORS = [ 24 | '#7F0000', 25 | '#00000000', // no color, creates a "long" gradient between the previous and next coordinate 26 | '#B24112', 27 | '#E5845C', 28 | '#238C23', 29 | '#7F0000', 30 | ]; 31 | 32 | class GradientPolylines extends React.Component { 33 | constructor(props) { 34 | super(props); 35 | 36 | this.state = { 37 | region: { 38 | latitude: LATITUDE, 39 | longitude: LONGITUDE, 40 | latitudeDelta: LATITUDE_DELTA, 41 | longitudeDelta: LONGITUDE_DELTA, 42 | }, 43 | }; 44 | } 45 | 46 | render() { 47 | return ( 48 | 53 | 59 | 60 | ); 61 | } 62 | } 63 | 64 | GradientPolylines.propTypes = { 65 | provider: ProviderPropType, 66 | }; 67 | 68 | const styles = StyleSheet.create({ 69 | container: { 70 | ...StyleSheet.absoluteFillObject, 71 | }, 72 | }); 73 | 74 | export default GradientPolylines; 75 | -------------------------------------------------------------------------------- /example/examples/ImageOverlayWithAssets.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { StyleSheet, View, Dimensions } from 'react-native'; 3 | 4 | import MapView from 'react-native-maps'; 5 | import flagPinkImg from './assets/flag-pink.png'; 6 | 7 | const { width, height } = Dimensions.get('window'); 8 | 9 | const ASPECT_RATIO = width / height; 10 | const LATITUDE = 35.679976; 11 | const LONGITUDE = 139.768458; 12 | const LATITUDE_DELTA = 0.01; 13 | const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 14 | // 116423, 51613, 17 15 | const OVERLAY_TOP_LEFT_COORDINATE = [35.68184060244454, 139.76531982421875]; 16 | const OVERLAY_BOTTOM_RIGHT_COORDINATE = [35.679609609368576, 139.76806640625]; 17 | const IMAGE = flagPinkImg; 18 | 19 | export default class ImageOverlayWithURL extends Component { 20 | static propTypes = { 21 | provider: MapView.ProviderPropType, 22 | }; 23 | 24 | constructor(props) { 25 | super(props); 26 | 27 | this.state = { 28 | region: { 29 | latitude: LATITUDE, 30 | longitude: LONGITUDE, 31 | latitudeDelta: LATITUDE_DELTA, 32 | longitudeDelta: LONGITUDE_DELTA, 33 | }, 34 | overlay: { 35 | bounds: [OVERLAY_TOP_LEFT_COORDINATE, OVERLAY_BOTTOM_RIGHT_COORDINATE], 36 | image: IMAGE, 37 | }, 38 | }; 39 | } 40 | 41 | render() { 42 | return ( 43 | 44 | 49 | 53 | 54 | 55 | ); 56 | } 57 | } 58 | 59 | const styles = StyleSheet.create({ 60 | container: { 61 | ...StyleSheet.absoluteFillObject, 62 | justifyContent: 'flex-end', 63 | alignItems: 'center', 64 | }, 65 | map: { 66 | ...StyleSheet.absoluteFillObject, 67 | }, 68 | bubble: { 69 | backgroundColor: 'rgba(255,255,255,0.7)', 70 | paddingHorizontal: 18, 71 | paddingVertical: 12, 72 | borderRadius: 20, 73 | }, 74 | latlng: { 75 | width: 200, 76 | alignItems: 'stretch', 77 | }, 78 | button: { 79 | width: 80, 80 | paddingHorizontal: 12, 81 | alignItems: 'center', 82 | marginHorizontal: 10, 83 | }, 84 | buttonContainer: { 85 | flexDirection: 'row', 86 | marginVertical: 20, 87 | backgroundColor: 'transparent', 88 | }, 89 | }); 90 | -------------------------------------------------------------------------------- /example/examples/IndoorMap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, View, Dimensions, Button, Alert } from 'react-native'; 3 | import MapView from 'react-native-maps'; 4 | 5 | const { width, height } = Dimensions.get('window'); 6 | const ASPECT_RATIO = width / height; 7 | const LATITUDE = 1.3039991; 8 | const LONGITUDE = 103.8316911; 9 | const LATITUDE_DELTA = 0.003; 10 | const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 11 | 12 | class IndoorMap extends React.Component { 13 | constructor(props) { 14 | super(props); 15 | this.setIndoorLevel = this.setIndoorLevel.bind(this); 16 | } 17 | 18 | handleIndoorFocus(event) { 19 | const { indoorBuilding } = event.nativeEvent; 20 | const { defaultLevelIndex, levels } = indoorBuilding; 21 | const levelNames = levels.map(lv => lv.name || ''); 22 | const msg = `Default Level: ${defaultLevelIndex}\nLevels: ${levelNames.toString()}`; 23 | Alert.alert('Indoor building focused', msg); 24 | } 25 | 26 | setIndoorLevel(level) { 27 | this.map.setIndoorActiveLevelIndex(level); 28 | } 29 | 30 | render() { 31 | return ( 32 | 33 | { 46 | this.map = map; 47 | }} 48 | /> 49 |