Add Polyline component and sample in README.md (#59)

* feat: polyline component and sample

* feat: up version

* update package.json

* chore: coding convention 통일

---------

Co-authored-by: cloud <[email protected]>
Co-authored-by: Seongcheol Jo <[email protected]>
Co-authored-by: Seongcheol Jo <[email protected]>

README.md

@@ -1,6 +1,7 @@
 # react-naver-map
 
 ## Introduction
+
 네이버 맵을 리액트에서 사용하기 편하게 만들어 둔 라이브러리입니다.
 
 ## Installation
@@ -17,27 +18,71 @@ pnpm add @r2don/react-naver-map
 ```
 
 ## Usage
+
 > 기본 스타일이 적용되어있지 않으니, 필요에 맞게 width와 height를 적용해주세요.
+
 ### Map component
 
 ```js
-import { Map, useNaverMapInit, Marker } from '@r2don/react-naver-map'
+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},
-]
+  { 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
+
+```js
+import { Map, useNaverMapInit, Marker, Poly } 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();
 
-function App () {
-  const {isLoaded} = useNaverMapInit();
+  if (!isLoaded) return null;
 
-  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: 37.3595704, longitude: 127.105399}} style={{height: '500px', width: '500px'}}>
-      {MARKERS.map((marker) => <Marker key={JSON.stringify(marker)} position={marker} />)}
+    <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>
   );
 }
@@ -47,4 +92,4 @@ function App () {
 
 Licensed under the MIT License, Copyright (c) 2022 r2don.
 
-See [LICENSE](https://github.com/r2don/react-naver-map/blob/main/LICENSE) for more information.
+See [LICENSE](https://github.com/r2don/react-naver-map/blob/main/LICENSE) for more information.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@r2don/react-naver-map",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "author": {
     "name": "r2don",
     "email": "[email protected]"

src/components/Polyline.tsx

@@ -0,0 +1,53 @@
+import React, { useRef } from "react";
+import { useMapContext } from "../context";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+
+interface PolylineProps {
+  path: { latitude: number; longitude: number }[];
+  strokeColor?: string;
+  strokeWeight?: number;
+  strokeOpacity?: number;
+  strokeStyle?: naver.maps.strokeStyleType;
+}
+
+/**
+ * Set polyline into Map obejct without rendering anything in VirtualDOM
+ * @returns <></>
+ */
+const Polyline = ({
+  path,
+  strokeColor = "#FF0000",
+  strokeWeight = 4,
+  strokeOpacity = 0.8,
+  strokeStyle = "solid",
+}: PolylineProps) => {
+  const map = useMapContext();
+  const polylineRef = useRef<naver.maps.Polyline | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!map) return;
+
+    const polylinePath = path.map(
+      (point) => new naver.maps.LatLng(point.latitude, point.longitude),
+    );
+
+    polylineRef.current = new naver.maps.Polyline({
+      map,
+      path: polylinePath,
+      strokeColor,
+      strokeWeight,
+      strokeOpacity,
+      strokeStyle: strokeStyle as naver.maps.strokeStyleType,
+    });
+
+    return () => {
+      if (polylineRef.current) {
+        polylineRef.current.setMap(null);
+      }
+    };
+  }, [map, path, strokeColor, strokeWeight, strokeOpacity, strokeStyle]);
+
+  return <></>;
+};
+
+export default Polyline;

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./Map";
 export * from "./Controls";
 export * from "./marker";
 export * from "./Cluster";
+export * from "./Polyline";