alopeyk-map v1.2.8

alopeyk-map

Mapbox wrapper for React-native

Getting started

$ npm install alopeyk-map --save

Mostly automatic installation

$ react-native link alopeyk-map

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]

2. Go to node_modules ➜ alopeyk-map and add Map.xcodeproj

3. In XCode, in the project navigator, select your project. Add libMap.a to your project's Build Phases ➜ Link Binary With Libraries

4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.alopeyk.nativemodule.map.MapPackage; to the imports at the top of the file

• Add new MapPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

include ':alopeyk-map'

project(':alopeyk-map').projectDir = new File(rootProject.projectDir, '../node_modules/alopeyk-map/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':alopeyk-map')

4. Optional Add following line to MainApplication.onCreate (Also you can set Access_token on JS):

MapManager.init(getApplicationContext(), "MY_ACCESS_TOKEN");

Usage

import {Map, MapView, Marker, Picker} from  'alopeyk-map';

Map.setAccessToken('MY_TOKEN');

<MapView /> Component API

<Marker /> Component API

<Picker /> Component API

Render map with specific centerCoordinate

<MapView
    centerCoordinate={{
      lat: 37.78825,
      lng: 51.4324,
    }}
  />

Render map with multiple Markers

<MapView>
  <Marker coordinate={{lat: 35.7187515, lng: 51.390037}} shouldBound={true}/>
  <Marker coordinate={{lat: 35.7187515, lng: 51.390037}} shouldBound={true}/>
  <Marker coordinate={{lat: 35.753058, lng: 51.193853}} />
</MapView>

Custom Marker

<Marker coordinate={{lat: 35.7187515, lng: 51.390037}}>
	<Image source={ require( './assets/images/ic_location.png' ) } />
</Marker>

Render map with Picker

<MapView>
  <Picker
	  onPress={ e => {console.log('Picker@onPress', e)} }
	  onLongPress={ e => {console.log('Picker@onLongPress', e)} }/>
</MapView>

Render map with custom Picker

<MapView>
  <Picker>
	<Image source={ require( './assets/images/picker.png' ) } />
  </Picker>
</MapView>