react-native-n-maps/README.md

react-native bridge for naver map

# react-native-n-maps
-----
Naver maps module for React-Native.
It supports Android, iOS platform.

## Install

```
npm install react-native-n-maps --save;
```

- **React Native 0.60+**

```bash
$ cd ios/ && pod install
```

- **React Native <= 0.59**

```bash
$ react-native link react-native-n-maps
$ cd ios/ && pod install
```


### 안드로이드 추가 설정

[네이버 맵 안드로이드 SDK 문서](https://navermaps.github.io/android-map-sdk/guide-ko/1.html)를 따라 API키와 레포지터리 경로를 추가합니다

`/android/build.gradle` 파일에 아래와 같이 레포지터리를 추가합니다
```
allprojects {
    repositories {
        google()
        jcenter()

        //Naver Maps resource repo
        maven {
            url 'https://navercorp.bintray.com/maps'
        }
    }
}
```

`/android/app/src/AndroidManifest.xml`에 아래와 같이 추가하고 발급받은 클라이언트 아이디로 바꿔줍니다.
```xml
<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>
```

### IOS 추가 설정

[네이버 맵 IOS SDK 문서](https://navermaps.github.io/ios-map-sdk/guide-ko/1.html)를 따라 API키와 레포지터리 경로를 추가합니다.
(Pod NMapsMap 라이브러리 추가시 git-lfs 설치후 진행해야 합니다. 하기 참조.)

```bash
#git-lfs가 설치 안된 경우 설치
$ brew install git-lfs

#프로젝트 폴더로 이동
$ cd ~/${project_parh}
#프로젝트 폴더에서 git-lfs 설치
$ git-lfs install
#pod 캐시 제거
$ pod cache clean NMapsMap
# SDK 업데이트
$ pod update NMapsMap
```

`info.plist`에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.

![image](https://user-images.githubusercontent.com/49827449/66392740-b2fd5f00-ea0b-11e9-8c38-23e604b1009d.png)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string>
...
<dict>
<plist>
```

## Components

### `NaverMapView`
```ts
interface NaverMapViewProps {
    style?: StyleProp<ViewStyle>,
    center?: Coord & { zoom?: number, tilt?: number, bearing?: number },
    tilt?: number,
    bearing?: number,
    mapPadding?: { left: number, top: number, right: number, bottom: number },
    onMapClick?: (event: {
        latitude: number,
        longitude: number,
    }) => void,
    onInitialized?: Function,
    onCameraChange?: (event: {
        latitude: number,
        longitude: number,
        zoom: number,
    }) => void,
    showsMyLocationButton?: boolean,
    compass?: boolean,
    scaleBar?: boolean,
    zoomControl?: boolean,
    mapType?: number,
    buildingHeight?: number,
    nightMode?: boolean,
}
```

### `Marker`
```ts
interface MarkerProps {
    tag: number
    coordinate: Coord
    anchor?: { x: number, y: number }
    pinColor?: string
    rotation?: number
    flat?: boolean
    image?: ImageSourcePropType
    onClick?: (event: {
        tag: number
    }) => void,
}
```

### `Polyline`
```ts
interface PolylineProps {
    coordinates: Coord[]
    strokeWidth?: number
    strokeColor?: string
}
```
### `Path`
```ts
interface PathProps {
    coordinates: Coord[]
    width?: number
    color?: string
    outlineWidth?: number
    passedColor?: string
    outlineColor?: string
    passedOutlineColor?: string
    pattern?: ImageSourcePropType
    patternInterval?: number
}
```

## Example
```ts
<NaverMapView
    style={styles.map}
    showsMyLocationButton={true}
    center={{
        latitude: 37.5668260054857,
        longitude: 126.978656785931,
    }}
    onMapClick={(event) => { console.log(event)	}}
    onTouch={(event) => { console.log(event) }}
    nightMode={false}
    ref={(ref) => {this.naverMapView = ref}}>
    {this.state.markerData.map((marker, index) => {
        return (
            <Marker 
                key={index}
                coordinate={{
                    latitude: 37.5668260054857,
                    longitude: 126.978656785931,
                }}
                caption={'caption'}
                image={require('./images/map_marker.png')}
                onClick={() => { console.log("onMarkerClick", index) }} />
        )
    })}
</NaverMapView>
```

### `Release Note`
```
1.0.6 - 2020/02/28 - Add onClick() event for Marker (Android/iOS)
1.0.8 - 2020/03/03 - Add onMapClick() event for Map (Android/iOS)
```

### `추가 개발 및 수정요청`
```
ObangGopro / bibichoo@nate.com
```