React Naver Maps

https://github.com/zeakd/react-naver-maps
Admin
React Naver Maps provides API integration for Naver Maps within modern React development.
Tokens:2,170
Snippets:21
Trust Score:8.1
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Component Structure for useMap()

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/guides/use-map.mdx

The useMap() hook is only functional within child components of <NaverMap>. This example shows a typical structure where MyControls, which uses useMap(), is a child of <NaverMap>.

```tsx
<Container style={{ width: '100%', height: '400px' }}>
  <NaverMap defaultCenter={{ lat: 37.5666, lng: 126.9784 }} defaultZoom={15}>
    <MyControls /> {/* useMap() 사용 가능 */}
    <Marker position={{ lat: 37.5666, lng: 126.9784 }} />
  </NaverMap>
</Container>
```

--------------------------------

### Get NaverMap Instance with useMap()

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/guides/use-map.mdx

Use the useMap() hook within a child component of <NaverMap> to get the current map instance. This allows for imperative control over map functionalities.

```tsx
import { useMap } from 'react-naver-maps';

function MyControls() {
  const map = useMap();

  return (
    <div>
      <button onClick={() => map.setZoom(map.getZoom() + 1)}>+</button>
      <button onClick={() => map.setZoom(map.getZoom() - 1)}>-</button>
    </div>
  );
}
```

--------------------------------

### Get Current Map State

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/guides/use-map.mdx

Retrieve the current map's center coordinates, zoom level, and boundaries using methods like getCenter(), getZoom(), and getBounds() from the map instance obtained via useMap().

```tsx
function MapInfo() {
  const map = useMap();
  const [info, setInfo] = useState('');

  return (
    <div>
      <button
        onClick={() => {
          const center = map.getCenter();
          const zoom = map.getZoom();
          const bounds = map.getBounds();
          setInfo(`center: ${center}, zoom: ${zoom}, bounds: ${bounds}`);
        }}
      >
        현재 상태
      </button>
      {info && <pre>{info}</pre>}
    </div>
  );
}
```

--------------------------------

### Basic Usage

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Demonstrates the fundamental usage of the Container component as a parent for NaverMap, setting basic dimensions.

```APIDOC
## Basic Usage

### Description
This example shows how to use the `Container` component as a parent for `NaverMap`, specifying its dimensions via CSS styles.

### Code
```tsx
import { Container as MapDiv, NaverMap } from 'react-naver-maps';

<MapDiv style={{ width: '100%', height: '400px' }}>
  <NaverMap />
</MapDiv>;
```
```

--------------------------------

### 기본 지도 표시 예제

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/examples/map-tutorial-1-simple.mdx

이 예제는 NavermapsProvider로 인증 키를 설정하고, Container로 지도 영역을 잡은 뒤 NaverMap을 렌더링하는 가장 기본적인 지도 표시 방법을 보여줍니다. Container는 position: relative인 div이며, Suspense를 포함하여 스크립트 로드를 자동으로 처리합니다.

```tsx
import React from "react";
import {
  NavermapsProvider,
  Container,
  NaverMap,
} from "react-navermaps";

export default function BasicMap() {
  return (
    <NavermapsProvider
      ncpClientId="YOUR_CLIENT_ID"
      error kiujs="YOUR_ERROR_KIJS"
    >
      <Container
        style={{
          width: "100%",
          height: "400px",
        }}
      >
        <NaverMap
          defaultCenter={{
            lat: 37.5666805,
            lng: 126.9784147,
          }}
          defaultZoom={12}
        />
      </Container>
    </NavermapsProvider>
  );
}
```

--------------------------------

### Loading Fallback UI

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Shows how to specify a custom UI element to display while the Naver Maps scripts are loading using the `fallback` prop.

```APIDOC
## Loading Fallback UI

### Description
Utilize the `fallback` prop on the `Container` component to define custom content that will be displayed to the user during the Naver Maps script loading process.

### Code
```tsx
<Container
  style={{ width: '100%', height: '400px' }}
  fallback={<div>지도를 불러오는 중...</div>}
>
  <NaverMap />
</Container>
```
```

--------------------------------

### Server-Side Rendering (SSR) Considerations

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Explains the behavior of the Container component during SSR and the requirement to call `useNavermaps()` within the Container.

```APIDOC
## Server-Side Rendering (SSR) Considerations

### Description
In SSR environments, the `Container` component initially renders only an outer div with height. The map itself is displayed after client-side hydration. It is crucial to call hooks like `useNavermaps()` exclusively within the `Container` component to ensure proper functionality.

### Usage Note
Ensure `useNavermaps()` is called within the `Container` component during SSR.
```

--------------------------------

### Basic Container Usage

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Use the Container component as a parent for NaverMap to render it within a specified DOM element. It includes Suspense for automatic script loading.

```tsx
import { Container as MapDiv, NaverMap } from 'react-naver-maps';

<MapDiv style={{ width: '100%', height: '400px' }}>
  <NaverMap />
</MapDiv>;
```

--------------------------------

### Render Function with Navermaps Namespace

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Illustrates how to use a render function as a child of Container to access the `navermaps` namespace for advanced map configurations.

```APIDOC
## Render Function with Navermaps Namespace

### Description
Pass a render function as a child to the `Container`. This function receives the `navermaps` namespace as an argument, allowing direct access to its properties like `LatLng` for map initialization.

### Code
```tsx
<Container style={{ width: '100%', height: '400px' }}>
  {(navermaps) => (
    <NaverMap
      defaultCenter={new navermaps.LatLng(37.5666, 126.9784)}
      defaultZoom={15}
    />
  )}
</Container>
```
```

--------------------------------

### Move Map with panTo() and morph()

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/guides/use-map.mdx

Utilize the map instance obtained from useMap() to move the map. panTo() animates the map to a new center, while morph() can change both the center and zoom level simultaneously. Use panTo() for general movements, especially when only the center needs to change, as setCenter() can interrupt ongoing animations.

```tsx
function MoveButtons() {
  const map = useMap();
  const navermaps = useNavermaps();

  return (
    <div>
      <button
        onClick={() => map.panTo(new navermaps.LatLng(37.5666, 126.9784))}
      >
        서울시청으로 이동
      </button>
      <button
        onClick={() => map.morph(new navermaps.LatLng(33.359, 126.5344), 12)}
      >
        제주도로 이동 (줌 포함)
      </button>
    </div>
  );
}
```

--------------------------------

### Container with Loading Fallback

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Specify a fallback UI to be displayed while the Naver Maps script is loading using the 'fallback' prop. This enhances user experience during script retrieval.

```tsx
<Container
  style={{ width: '100%', height: '400px' }}
  fallback={<div>지도를 불러오는 중...</div>}
>
  <NaverMap />
</Container>
```

--------------------------------

### Container with Render Function

Source: https://github.com/zeakd/react-naver-maps/blob/main/website/src/content/docs/api-references/container.mdx

Pass a render function as a child to the Container to receive the 'navermaps' namespace as an argument. This allows for direct use of Naver Maps API functionalities within the render prop.

```tsx
<Container style={{ width: '100%', height: '400px' }}>
  {(navermaps) => (
    <NaverMap
      defaultCenter={new navermaps.LatLng(37.5666, 126.9784)}
      defaultZoom={15}
    />
  )}
</Container>
```
Tokens:
Raw