rny
react-native-yandexmapkit
npm i react-native-yandexmapkit
rny

react-native-yandexmapkit

React-Native wrapper around Yandex Map Kit

by Konstantin Kuznetsov

0.1.4 (see all)License:MITTypeScript:Not Found
npm i react-native-yandexmapkit
Readme

react-native-yandex-map-kit

This is a wrapper around Yandex Map Kit for iOS and Android.

Since original projects are in deep coma, here I only support features that I needed for my other projects. If you need markers, callouts or polygons, I suggest you use react-native-maps. However, if you must use yandex map kit in your react-native projects and you need any of these features, I encourage you to contribute. Just be sure to check out both of the original SDKs before you implement anything, because they are quite different!

Note that Android version might not work properly on emulators, which results in map tiles not being rendered.

Android iOS

Installation

$ npm install react-native-yandexmapkit --save

Android

  1. Run react-native link

  2. Add following permissions to your android/app/src/AndroidManifest.xml:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    
  3. Add yandexmapkit-android repo to your android/build.gradle:

    allprojects {
      repositories {
          ...
          maven { url 'https://github.com/yandexmobile/yandexmapkit-android/raw/maven/' }
      }
    }
    

iOS

  1. This module requires CocoaPods to be used in iOS project. To add CocoaPods to your React Native project, follow steps 2 throught 7 of this tutorial. Add this line

    ```ruby
    pod 'react-native-yandexmapkit', :path => '../node_modules/react-native-yandexmapkit'
    ```
    to your Podfile (you may need to adjust path if you have non-standard project structure).
        And then run `pod install` (if you’re setting up Cocoapods for the first time) or `pod update` (if you’re adding MoPub to an existing CocoaPods project).
    
  2. Add NSLocationWhenInUseUsageDescription key in Info.plist if you want to display user's location.

  3. Make sure that yandex maps can download stuff by configuring App Transport Security

Usage

  1. You'll need Yandex Map Kit API key. To obtain it, you need to send e-mail to Yandex support. You can find more info on this here: EN, RU.

  2. import { YandexMapKit, YandexMapView } from 'react-native-yandexmapkit';

  3. Make sure to call YandexMapKit.setApiKey(YANDEXMAPKIT_API_KEY); before mounting YandexMapView component.

  4. Render YandexMapView component:

        <YandexMapView ref="yandexMap" onInteraction={this.onInteraction} region={this.state.region}
                           showMyLocation={true} geocodingEnabled={true} onGeocoding={this.onGeocoding}
                           showMyLocationButton={true}/>
    
    

Component API

Props

PropTypeDefaultDescription
regionObjectThe region to be displayed by the map.

The region is defined by the center coordinates and the span of coordinates to display: {latitude, longitude, latitudeDelta, longitudeDelta}
initialRegionObjectThe initial region to be displayed by the map. Use this prop instead of region only if you don't want to control the viewport of the map besides the initial region.

Changing this prop after the component has mounted will not result in a region change.

This is similar to the initialValue prop of a text input.
showMyLocationBooleanfalseIf true the map will show current user location marker.
nightModeBooleanfalseA Boolean indicating whether the map should be rendered in a night mode.
showsTrafficBooleanfalseA Boolean value indicating whether the map displays traffic information.
geocodingEnabledBooleanfalseA Boolean value indicating whether the should send reverse geocoding reqquests when region changes. These requests will return the description of geo object found in the center of the map.
disableAndroidGeocodingBooleanfalseIf true, all reverse geocoding requests will be sent from JS. Otherwise, Android will use its own implementation.
geocodingApiKeyStringYandex Maps API key to be used in geocoding requests, can be obtained here. This key is different from Yande Map KIt API key.
geocodingOptionsObject{
sco: 'latlong',
kind: 'house'
}
Reverse geocoding request parameters
showMyLocationButtonBooleanfalseIf true, renders show my location button in top-right corner of the map
myLocationButtonPositionStyle{ position: 'absolute', top: 16, right: 16, }Style used to position container view with 'show my location' button inside it
renderMyLocationButtonFunctionUse this to render custom 'show my location' button

Android-only props

The component exposes some Android-only props that control map UI:

  • showBuiltInScreenButtons: PropTypes.bool,
  • showFindMeButton: PropTypes.bool,
  • showJamsButton: PropTypes.bool,
  • showScaleView: PropTypes.bool,
  • showZoomButtons: PropTypes.bool,
  • interactive: PropTypes.bool,
  • hdMode: PropTypes.bool,

Events

Event NameReturnsNotes
onInteraction{latitude, longitude, latitudeDelta, longitudeDelta, type}Fired when user interacts with map.
On Android, interaction type is returned in type attribute, list of types can be found here
On iOS, this event is fired only at the end of interaction.
onGeocodingObjectsTakes two arguments: the first one is in native Android format, the second one is full response from web service.

Methods

Method NameArgumentsNotes
animateToCoordinatePropTypes.shape({latitude: PropTypes.number, longitude: PropTypes.number})Animates map to given coordinate, or to user's current position if argument is undefined.

YandexMapKit API

Method NameArgumentsNotes
setApiKeyStringSets Yandex Map Kit API key for all map views you use. Call this before you mount your first map view.
requestGeocodinggeocode: string, Required
options: object,
apikey: string
Helper method to call Yandex Geocoder, takes three arguments:
geocode - queried address string or coordinate,
options -well, options
apikey - Yandex Maps API key for geocoding requests, this is different from Yandex Map Kit key
Returns Promise which resolves with json
makeDebouncedGeocodingoptions: object
onComplete: function
apiKey: string
debounceWait: number
Convenience method to make Yandex Geocoder requests.
options - geocoder request options
onComplete - will be called with geocoder two arguments - first match in Android format, and full response
apiKey - same as for requestGeocoding
debounceWait - debouncing interval, defaults to 150 ms

Depending on options returns function that takes one argument - address, or two arguments - latitude and longitude (for reverse geocoding).

Example

You can find it here

You'll need to create .env.development property file in example dir and put your YANDEXMAPKIT_API_KEY in it.

Downloads/wk

9

GitHub Stars

31

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

6

OPEN PRs

0
VersionTagPublished
0.1.4
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial