From a846971825e637ce81b13689cdce719d31bf691c Mon Sep 17 00:00:00 2001 From: cloud Date: Sat, 14 Sep 2024 16:50:45 +0900 Subject: [PATCH 1/6] feat: polyline component and sample --- README.md | 69 ++++++++++++++++++++++++++++++------- src/components/Polyline.tsx | 52 ++++++++++++++++++++++++++++ src/components/index.ts | 1 + 3 files changed, 110 insertions(+), 12 deletions(-) create mode 100644 src/components/Polyline.tsx diff --git a/README.md b/README.md index 908aa52..3bd15f6 100644 --- a/README.md +++ b/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 ( + + {MARKERS.map((marker) => ( + + ))} + + ); +} +``` + +### 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 ( - - {MARKERS.map((marker) => )} + + {MARKERS.map((marker) => ( + + ))} + ); } @@ -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. \ No newline at end of file +See [LICENSE](https://github.com/r2don/react-naver-map/blob/main/LICENSE) for more information. diff --git a/src/components/Polyline.tsx b/src/components/Polyline.tsx new file mode 100644 index 0000000..5a61e57 --- /dev/null +++ b/src/components/Polyline.tsx @@ -0,0 +1,52 @@ +import React, { useEffect, useRef } from "react"; +import { useMapContext } from "../context"; + +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: React.FC = ({ + path, + strokeColor = "#FF0000", + strokeWeight = 4, + strokeOpacity = 0.8, + strokeStyle = "solid", +}: PolylineProps) => { + const map = useMapContext(); + const polylineRef = useRef(null); + + useEffect(() => { + 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; diff --git a/src/components/index.ts b/src/components/index.ts index b276835..6f06046 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export * from "./Map"; export * from "./Controls"; export * from "./marker"; export * from "./Cluster"; +export * from "./Polyline"; From 2a230f5a85e003e499e3da734b8f9c38cd2fec85 Mon Sep 17 00:00:00 2001 From: cloud Date: Sat, 14 Sep 2024 17:32:38 +0900 Subject: [PATCH 2/6] feat: up version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index efaca5f..532cd6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@r2don/react-naver-map", - "version": "0.0.17", + "version": "0.0.18", "author": { "name": "r2don", "email": "leejj2002@naver.com" From 529b5f110c8420e80bb1eb331a493004a3d3c16f Mon Sep 17 00:00:00 2001 From: Seongcheol Jo <48130830+josworks27@users.noreply.github.com> Date: Thu, 26 Sep 2024 21:32:57 +0900 Subject: [PATCH 3/6] update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 532cd6c..e5e7e7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@r2don/react-naver-map", - "version": "0.0.18", + "version": "0.0.19", "author": { "name": "r2don", "email": "leejj2002@naver.com" From d1e295c1a761cbdaaeda29b86e70232f213b9a1e Mon Sep 17 00:00:00 2001 From: Seongcheol Jo Date: Thu, 26 Sep 2024 21:42:04 +0900 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20coding=20convention=20=ED=86=B5?= =?UTF-8?q?=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Polyline.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Polyline.tsx b/src/components/Polyline.tsx index 5a61e57..725a304 100644 --- a/src/components/Polyline.tsx +++ b/src/components/Polyline.tsx @@ -1,5 +1,6 @@ -import React, { useEffect, useRef } from "react"; +import React, { useRef } from "react"; import { useMapContext } from "../context"; +import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"; interface PolylineProps { path: { latitude: number; longitude: number }[]; @@ -13,7 +14,7 @@ interface PolylineProps { * Set polyline into Map obejct without rendering anything in VirtualDOM * @returns <> */ -const Polyline: React.FC = ({ +const Polyline = ({ path, strokeColor = "#FF0000", strokeWeight = 4, @@ -23,7 +24,7 @@ const Polyline: React.FC = ({ const map = useMapContext(); const polylineRef = useRef(null); - useEffect(() => { + useIsomorphicLayoutEffect(() => { if (!map) return; const polylinePath = path.map( From 7981bb274daba07b9f4b2b352c5909698a48ed48 Mon Sep 17 00:00:00 2001 From: sanghun Lee Date: Mon, 14 Oct 2024 21:55:13 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20Polyline=20named=20export?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/components/Polyline.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3bd15f6..f100a91 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ function App() { ### PolyLine Component ```js -import { Map, useNaverMapInit, Marker, Poly } from "@r2don/react-naver-map"; +import { Map, useNaverMapInit, Marker, Polyline } from "@r2don/react-naver-map"; const MARKERS = [ { latitude: 37, longitude: 127 }, diff --git a/src/components/Polyline.tsx b/src/components/Polyline.tsx index 725a304..56a40ee 100644 --- a/src/components/Polyline.tsx +++ b/src/components/Polyline.tsx @@ -14,7 +14,7 @@ interface PolylineProps { * Set polyline into Map obejct without rendering anything in VirtualDOM * @returns <> */ -const Polyline = ({ +export const Polyline = ({ path, strokeColor = "#FF0000", strokeWeight = 4, @@ -49,5 +49,3 @@ const Polyline = ({ return <>; }; - -export default Polyline; From dc0c557219feca25ab12be2a11fc605a5e4e4694 Mon Sep 17 00:00:00 2001 From: sanghun Lee Date: Mon, 14 Oct 2024 22:01:12 +0900 Subject: [PATCH 6/6] feat: version up --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e5e7e7b..ede6fde 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@r2don/react-naver-map", - "version": "0.0.19", + "version": "0.0.20", "author": { "name": "r2don", "email": "leejj2002@naver.com"