164 lines
19 KiB
JSON
164 lines
19 KiB
JSON
{
|
|
"_args": [
|
|
[
|
|
{
|
|
"raw": "react-native-maps@0.19.0",
|
|
"scope": null,
|
|
"escapedName": "react-native-maps",
|
|
"name": "react-native-maps",
|
|
"rawSpec": "0.19.0",
|
|
"spec": "0.19.0",
|
|
"type": "version"
|
|
},
|
|
"/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/expo"
|
|
]
|
|
],
|
|
"_from": "react-native-maps@0.19.0",
|
|
"_id": "react-native-maps@0.19.0",
|
|
"_inCache": true,
|
|
"_location": "/react-native-maps",
|
|
"_nodeVersion": "8.2.1",
|
|
"_npmOperationalInternal": {
|
|
"host": "s3://npm-registry-packages",
|
|
"tmp": "tmp/react-native-maps-0.19.0.tgz_1513290881107_0.9988682505208999"
|
|
},
|
|
"_npmUser": {
|
|
"name": "cdro",
|
|
"email": "casheghian@gmail.com"
|
|
},
|
|
"_npmVersion": "5.3.0",
|
|
"_phantomChildren": {},
|
|
"_requested": {
|
|
"raw": "react-native-maps@0.19.0",
|
|
"scope": null,
|
|
"escapedName": "react-native-maps",
|
|
"name": "react-native-maps",
|
|
"rawSpec": "0.19.0",
|
|
"spec": "0.19.0",
|
|
"type": "version"
|
|
},
|
|
"_requiredBy": [
|
|
"/expo"
|
|
],
|
|
"_resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.19.0.tgz",
|
|
"_shasum": "ce94fad1cf360e335cb4338a68c95f791e869074",
|
|
"_shrinkwrap": null,
|
|
"_spec": "react-native-maps@0.19.0",
|
|
"_where": "/Volumes/2009-SSD/GT2/GT2-iOS/node_modules/expo",
|
|
"author": {
|
|
"name": "Leland Richardson",
|
|
"email": "leland.m.richardson@gmail.com"
|
|
},
|
|
"bugs": {
|
|
"url": "https://github.com/airbnb/react-native-maps/issues"
|
|
},
|
|
"dependencies": {},
|
|
"description": "React Native Mapview component for iOS + Android",
|
|
"devDependencies": {
|
|
"babel-eslint": "^6.1.2",
|
|
"babel-plugin-module-resolver": "^2.3.0",
|
|
"babel-preset-airbnb": "^1.1.1",
|
|
"babel-preset-react-native": "1.9.0",
|
|
"eslint": "^3.3.1",
|
|
"eslint-config-airbnb": "^10.0.1",
|
|
"eslint-plugin-import": "^1.14.0",
|
|
"eslint-plugin-jsx-a11y": "^2.1.0",
|
|
"eslint-plugin-prefer-object-spread": "^1.1.0",
|
|
"eslint-plugin-react": "^6.1.2",
|
|
"gitbook-cli": "^2.3.0",
|
|
"lodash": "^4.17.2",
|
|
"prop-types": "^15.5.10",
|
|
"react": "16.0.0",
|
|
"react-native": "0.51.0"
|
|
},
|
|
"directories": {},
|
|
"dist": {
|
|
"integrity": "sha512-1THgPVHh8/NL/kLIyPWIsfTpjncT94O92xW+NOt+VQrdMMLX2mynyKnD/we02H29urAtYBXO8ZmVTrZ4ITn8mg==",
|
|
"shasum": "ce94fad1cf360e335cb4338a68c95f791e869074",
|
|
"tarball": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.19.0.tgz"
|
|
},
|
|
"gitHead": "c45131096fda44383335099bee80c2cd2136c231",
|
|
"homepage": "https://github.com/airbnb/react-native-maps#readme",
|
|
"keywords": [
|
|
"react",
|
|
"react-native",
|
|
"react-component",
|
|
"map",
|
|
"mapview",
|
|
"google-maps",
|
|
"mapkit"
|
|
],
|
|
"main": "index.js",
|
|
"maintainers": [
|
|
{
|
|
"name": "ljharb",
|
|
"email": "ljharb@gmail.com"
|
|
},
|
|
{
|
|
"name": "gpeal",
|
|
"email": "gabriel@gpeal.com"
|
|
},
|
|
{
|
|
"name": "felipecsl",
|
|
"email": "felipe.lima@gmail.com"
|
|
},
|
|
{
|
|
"name": "airbnb",
|
|
"email": "jordan.harband+npm@airbnb.com"
|
|
},
|
|
{
|
|
"name": "spikebrehm",
|
|
"email": "ocelot@gmail.com"
|
|
},
|
|
{
|
|
"name": "gilbox",
|
|
"email": "g@gilbox.me"
|
|
},
|
|
{
|
|
"name": "jrichardlai",
|
|
"email": "jrichardlai@gmail.com"
|
|
},
|
|
{
|
|
"name": "cdro",
|
|
"email": "casheghian@gmail.com"
|
|
},
|
|
{
|
|
"name": "intelligibabble",
|
|
"email": "leland.m.richardson@gmail.com"
|
|
}
|
|
],
|
|
"name": "react-native-maps",
|
|
"optionalDependencies": {},
|
|
"peerDependencies": {
|
|
"react": "16.0.0",
|
|
"react-native": "0.51.0",
|
|
"prop-types": "^15.5.10"
|
|
},
|
|
"readme": "# react-native-maps [](https://www.npmjs.com/package/react-native-maps)\n\nReact Native Map components for iOS + Android\n\n## Installation\n\nSee [Installation Instructions](docs/installation.md).\n\nSee [Setup Instructions for the Included Example Project](docs/examples-setup.md).\n\n## Compatibility\n\nDue to the rapid changes being made in the React Native ecosystem, we are not officially going to\nsupport this module on anything but the latest version of React Native. With that said, we will do\nour best to stay compatible with older versions as much that is practical, and the peer dependency\nof this requirement is set to `\"react-native\": \"*\"` explicitly for this reason. If you are using\nan older version of React Native with this module though, some features may be buggy.\n\n### Note about React requires\n\nSince react-native 0.25.0, `React` should be required from `node_modules`.\nReact Native versions from 0.18 should be working out of the box, for lower\nversions you should add `react` as a dependency in your `package.json`.\n\n## Component API\n\n[`<MapView />` Component API](docs/mapview.md)\n\n[`<MapView.Marker />` Component API](docs/marker.md)\n\n[`<MapView.Callout />` Component API](docs/callout.md)\n\n[`<MapView.Polygon />` Component API](docs/polygon.md)\n\n[`<MapView.Polyline />` Component API](docs/polyline.md)\n\n[`<MapView.Circle />` Component API](docs/circle.md)\n\n## General Usage\n\n```js\nimport MapView from 'react-native-maps';\n```\nor\n\n```js\nvar MapView = require('react-native-maps');\n```\n\nThis MapView component is built so that features on the map (such as Markers, Polygons, etc.) are\nspecified as children of the MapView itself. This provides an intuitive and react-like API for\ndeclaratively controlling features on the map.\n\n### Rendering a Map with an initial region\n\n## MapView\n```jsx\n <MapView\n initialRegion={{\n latitude: 37.78825,\n longitude: -122.4324,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n }}\n />\n```\n\n### Using a MapView while controlling the region as state\n\n```jsx\ngetInitialState() {\n return {\n region: {\n latitude: 37.78825,\n longitude: -122.4324,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n },\n };\n}\n\nonRegionChange(region) {\n this.setState({ region });\n}\n\nrender() {\n return (\n <MapView\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n />\n );\n}\n```\n\n### Rendering a list of markers on a map\n\n```jsx\n<MapView\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n>\n {this.state.markers.map(marker => (\n <MapView.Marker\n coordinate={marker.latlng}\n title={marker.title}\n description={marker.description}\n />\n ))}\n</MapView>\n```\n\n### Rendering a Marker with a custom view\n\n```jsx\n<MapView.Marker coordinate={marker.latlng}>\n <MyCustomMarkerView {...marker} />\n</MapView.Marker>\n```\n\n### Rendering a Marker with a custom image\n\n```jsx\n<MapView.Marker\n coordinate={marker.latlng}\n image={require('../assets/pin.png')}\n/>\n```\n\n### Rendering a custom Marker with a custom Callout\n\n```jsx\n<MapView.Marker coordinate={marker.latlng}>\n <MyCustomMarkerView {...marker} />\n <MapView.Callout>\n <MyCustomCalloutView {...marker} />\n </MapView.Callout>\n</MapView.Marker>\n```\n\n### Draggable Markers\n\n```jsx\n<MapView initialRegion={...}>\n <MapView.Marker draggable\n coordinate={this.state.x}\n onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}\n />\n</MapView>\n```\n\n### Using a custom Tile Overlay\n\n#### Tile Overlay using tile server\n\n```jsx\n<MapView\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n>\n <MapView.UrlTile\n /**\n * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime\n * For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png\n */\n urlTemplate={this.state.urlTemplate}\n />\n</MapView>\n```\n\nFor Android: add the following line in your AndroidManifest.xml\n```xml\n<uses-permission android:name=\"android.permission.INTERNET\" />\n```\nFor IOS: configure [App Transport Security](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) in your app\n\n#### Tile Overlay using local tiles\n\nTiles 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.\n\n```jsx\n<MapView\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n>\n <MapView.LocalTile\n /**\n * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime\n * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png\n */\n pathTemplate={this.state.pathTemplate}\n /**\n * The size of provided local tiles (usually 256 or 512).\n */\n tileSize={256}\n />\n</MapView>\n```\n\nFor 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:\n```\n<MapView\n mapType={Platform.OS == \"android\" ? \"none\" : \"standard\"}\n>\n```\n\nSee [OSM Wiki](https://wiki.openstreetmap.org/wiki/Category:Tile_downloading) for how to download tiles for offline usage.\n\n### Customizing the map style\n\nCreate the json object, or download a generated one from the [google style generator](https://mapstyle.withgoogle.com/).\n\n```jsx\n// The generated json object\nmapStyle = [ ... ]\n\nrender() {\n return (\n <MapView\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n customMapStyle={mapStyle}\n />\n );\n}\n```\nFor iOS, in addition to providing the `mapStyle` you will need to do the following\n\n```jsx\nimport MapView, { PROVIDER_GOOGLE } from 'react-native-maps'\n\n// ...\n\n<MapView\n provider={PROVIDER_GOOGLE}\n customMapStyle={MapStyle}\n>\n```\n\nThen add the AirGoogleMaps directory:\n\nhttps://github.com/airbnb/react-native-maps/blob/1e71a21f39e7b88554852951f773c731c94680c9/docs/installation.md#ios\n\nAn unofficial step-by-step guide is also available at https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0\n\n## Examples\n\n### MapView Events\n\nThe `<MapView />` component and its child components have several events that you can subscribe to.\nThis example displays some of them in a log as a demonstration.\n\n \n\n\n\n### Tracking Region / Location\n\n \n\n\n\n\n### Programmatically Changing Region\n\nOne can change the mapview's position using refs and component methods, or by passing in an updated\n`region` prop. The component methods will allow one to animate to a given position like the native\nAPI could.\n\n \n\n\n### Changing the style of the map\n\n\n\n\n\n### Arbitrary React Views as Markers\n\n \n\n\n\n### Using the MapView with the Animated API\n\nThe `<MapView />` component can be made to work with the Animated API, having the entire `region` prop\nbe declared as an animated value. This allows one to animate the zoom and position of the MapView along\nwith other gestures, giving a nice feel.\n\nFurther, Marker views can use the animated API to enhance the effect.\n\n \n\nIssue: Since android needs to render its marker views as a bitmap, the animations APIs may not be\ncompatible with the Marker views. Not sure if this can be worked around yet or not.\n\nMarkers' coordinates can also be animated, as shown in this example:\n\n \n\n\n\n### Polygon Creator\n\n \n\n\n\n### Other Overlays\n\nSo far, `<Circle />`, `<Polygon />`, and `<Polyline />` are available to pass in as children to the\n`<MapView />` component.\n\n \n\n\n\n### Default Markers\n\nDefault markers will be rendered unless a custom marker is specified. One can optionally adjust the\ncolor of the default marker by using the `pinColor` prop.\n\n \n\n\n\n### Custom Callouts\n\nCallouts to markers can be completely arbitrary react views, similar to markers. As a result, they\ncan be interacted with like any other view.\n\nAdditionally, you can fall back to the standard behavior of just having a title/description through\nthe `<Marker />`'s `title` and `description` props.\n\nCustom callout views can be the entire tooltip bubble, or just the content inside of the system\ndefault bubble.\n\n \n\n\n\n### Image-based Markers\n\nMarkers can be customized by just using images, and specified using the `image` prop.\n\n\n\n\n\n### Draggable Markers\n\nMarkers are draggable, and emit continuous drag events to update other UI during drags.\n\n \n\n### Lite Mode ( Android )\n\nEnable lite mode on Android with `liteMode` prop. Ideal when having multiple maps in a View or ScrollView.\n\n\n\n### Animated Region\n\nThe MapView can accept an `MapView.AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.\n\n```jsx\nimport MapView from 'react-native-maps';\n\ngetInitialState() {\n return {\n region: new MapView.AnimatedRegion({\n latitude: LATITUDE,\n longitude: LONGITUDE,\n latitudeDelta: LATITUDE_DELTA,\n longitudeDelta: LONGITUDE_DELTA,\n }),\n };\n}\n\nonRegionChange(region) {\n this.state.region.setValue(region);\n}\n\nrender() {\n return (\n <MapView.Animated\n region={this.state.region}\n onRegionChange={this.onRegionChange}\n />\n );\n}\n```\n\n### Animated Marker Position\n\nMarkers can also accept an `AnimatedRegion` value as a coordinate.\n\n```jsx\ngetInitialState() {\n return {\n coordinate: new MapView.AnimatedRegion({\n latitude: LATITUDE,\n longitude: LONGITUDE,\n }),\n };\n}\n\ncomponentWillReceiveProps(nextProps) {\n if (this.props.coordinate !== nextProps.coordinate) {\n this.state.coordinate.timing({\n ...nextProps.coordinate,\n duration: 500\n }).start();\n }\n}\n\nrender() {\n return (\n <MapView initialRegion={...}>\n <MapView.Marker.Animated coordinate={this.state.coordinate} />\n </MapView>\n );\n}\n```\n\n### Take Snapshot of map\n\n```jsx\ngetInitialState() {\n return {\n coordinate: {\n latitude: LATITUDE,\n longitude: LONGITUDE,\n },\n };\n}\n\ntakeSnapshot () {\n // 'takeSnapshot' takes a config object with the\n // following options\n const snapshot = this.map.takeSnapshot({\n width: 300, // optional, when omitted the view-width is used\n height: 300, // optional, when omitted the view-height is used\n region: {..}, // iOS only, optional region to render\n format: 'png', // image formats: 'png', 'jpg' (default: 'png')\n quality: 0.8, // image quality: 0..1 (only relevant for jpg, default: 1)\n result: 'file' // result types: 'file', 'base64' (default: 'file')\n });\n snapshot.then((uri) => {\n this.setState({ mapSnapshot: uri });\n });\n}\n\nrender() {\n return (\n <View>\n <MapView initialRegion={...} ref={map => { this.map = map }}>\n <MapView.Marker coordinate={this.state.coordinate} />\n </MapView>\n <Image source={{ uri: this.state.mapSnapshot.uri }} />\n <TouchableOpacity onPress={this.takeSnapshot}>\n Take Snapshot\n </TouchableOpacity>\n </View>\n );\n}\n```\n\n### Zoom to Specified Markers\n\nPass an array of marker identifiers to have the map re-focus.\n\n \n\n### Zoom to Specified Coordinates\n\nPass an array of coordinates to focus a map region on said coordinates.\n\n\n\n### Troubleshooting\n\n#### My map is blank\n\n* Make sure that you have [properly installed](docs/installation.md) react-native-maps.\n* Check in the logs if there is more informations about the issue.\n* Try setting the style of the MapView to an absolute position with top, left, right and bottom values set.\n* Make sure you have enabled Google Maps API in \n\n```javascript\nconst styles = StyleSheet.create({\n map: {\n ...StyleSheet.absoluteFillObject,\n },\n});\n```\n\n```jsx\n<MapView\n style={styles.map}\n // other props\n/>\n```\n\n#### Inputs don't focus\n\n* When inputs don't focus or elements don't respond to tap, look at the order of the view hierarchy, sometimes the issue could be due to ordering of rendered components, prefer putting MapView as the first component.\n\nBad:\n\n```jsx\n<View>\n <TextInput/>\n <MapView/>\n</View>\n```\n\nGood:\n\n```jsx\n<View>\n <MapView/>\n <TextInput/>\n</View>\n```\n\n\nLicense\n--------\n\n Copyright (c) 2017 Airbnb\n\n Licensed under the The MIT License (MIT) (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n https://raw.githubusercontent.com/airbnb/react-native-maps/master/LICENSE\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n",
|
|
"readmeFilename": "README.md",
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "git+https://github.com/airbnb/react-native-maps.git"
|
|
},
|
|
"rnpm": {
|
|
"android": {
|
|
"sourceDir": "./lib/android"
|
|
}
|
|
},
|
|
"scripts": {
|
|
"build": "npm run build:js && npm run build:android && npm run build:ios",
|
|
"build:android": "./gradlew :react-native-maps:assembleDebug",
|
|
"build:ios": "bundle install --binstubs ./examples/ios && bundle exec pod install --project-directory=./example/ios/",
|
|
"build:js": "exit 0",
|
|
"ci": "npm run lint",
|
|
"lint": "eslint ./",
|
|
"preversion": "./scripts/update-version.js",
|
|
"run:android": "./gradlew installDebug && npm run start:android",
|
|
"run:ios": "react-native run-ios --project-path ./example/ios",
|
|
"run:packager": "./node_modules/react-native/packager/packager.sh",
|
|
"start": "node node_modules/react-native/local-cli/cli.js start",
|
|
"start:android": "adb shell am start -n com.airbnb.android.react.maps.example/.MainActivity"
|
|
},
|
|
"version": "0.19.0"
|
|
}
|