0.0.20 • Published 10 months ago

@r2don/react-naver-map v0.0.20

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

react-naver-map

Introduction

네이버 맵을 리액트에서 사용하기 편하게 만들어 둔 라이브러리입니다.

Installation

# with npm
npm i @r2don/react-naver-map

# with yarn
yarn add @r2don/react-naver-map

# with pnpm
pnpm add @r2don/react-naver-map

Usage

기본 스타일이 적용되어있지 않으니, 필요에 맞게 width와 height를 적용해주세요.

Map component

import { Map, useNaverMapInit, Marker } from "@r2don/react-naver-map";

const MARKERS = [
  { latitude: 37, longitude: 127 },
  { latitude: 37.5, longitude: 127.5 },
  { latitude: 38, longitude: 128 },
  { latitude: 38.5, longitude: 128.5 },
];

function App() {
  const { isLoaded } = useNaverMapInit();

  if (!isLoaded) return null;

  return (
    <Map
      center={{ latitude: 37.3595704, longitude: 127.105399 }}
      style={{ height: "500px", width: "500px" }}
    >
      {MARKERS.map((marker) => (
        <Marker key={JSON.stringify(marker)} position={marker} />
      ))}
    </Map>
  );
}

PolyLine Component

import { Map, useNaverMapInit, Marker, Polyline } from "@r2don/react-naver-map";

const MARKERS = [
  { latitude: 37, longitude: 127 },
  { latitude: 37.5, longitude: 127.5 },
  { latitude: 38, longitude: 128 },
  { latitude: 38.5, longitude: 128.5 },
];

function App() {
  const { isLoaded } = useNaverMapInit();

  if (!isLoaded) return null;

  const path = [{ latitude: 37.3595704; longitude: 127.105399 }, { latitude: 37.3585781; longitude: 127.1053234 }];
  const mid = {
    latitude: (path[0].latitude + path[1].latitude) / 2,
    longitude: (path[0].longitude + path[1].longitude) / 2,
  }

  return (
    <Map
      center={{ latitude: mid.latitude, longitude: mid.longitude }}
      style={{ height: "500px", width: "500px" }}
    >
      {MARKERS.map((marker) => (
        <Marker key={JSON.stringify(marker)} position={marker} />
      ))}
      <Polyline path={path} />
    </Map>
  );
}

License

Licensed under the MIT License, Copyright (c) 2022 r2don.

See LICENSE for more information.

0.0.20

10 months ago

0.0.19

10 months ago

0.0.18

10 months ago

0.0.17

11 months ago

0.0.15

1 year ago

0.0.16

1 year ago

0.0.14

1 year ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago