{"id":18080576,"url":"https://github.com/soaple/stickyboard-kakao-map","last_synced_at":"2025-10-26T22:31:11.041Z","repository":{"id":57162976,"uuid":"288651340","full_name":"soaple/stickyboard-kakao-map","owner":"soaple","description":"Kakao map component for StickyBoard","archived":false,"fork":false,"pushed_at":"2020-09-27T10:06:58.000Z","size":36,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T04:07:13.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soaple.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-19T06:23:48.000Z","updated_at":"2020-09-27T10:07:01.000Z","dependencies_parsed_at":"2022-09-01T00:21:57.061Z","dependency_job_id":null,"html_url":"https://github.com/soaple/stickyboard-kakao-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soaple%2Fstickyboard-kakao-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soaple%2Fstickyboard-kakao-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soaple%2Fstickyboard-kakao-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soaple%2Fstickyboard-kakao-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soaple","download_url":"https://codeload.github.com/soaple/stickyboard-kakao-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T13:08:51.416Z","updated_at":"2025-10-26T22:31:10.666Z","avatar_url":"https://github.com/soaple.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# stickyboard-kakao-map\nKakao map component for StickyBoard\n\n[![Version](https://img.shields.io/npm/v/@stickyboard/kakao-map.svg)](https://npmjs.org/package/@stickyboard/kakao-map)\n[![Downloads/week](https://img.shields.io/npm/dw/@stickyboard/kakao-map.svg)](https://npmjs.org/package/@stickyboard/kakao-map)\n[![License](https://img.shields.io/npm/l/@stickyboard/kakao-map.svg)](https://github.com/soaple/@stickyboard/kakao-map/blob/master/package.json)\n\n# Webpack watch\n```bsh\n$ npm start\n```\n\n# Build\n```bsh\n$ npm run build\n```\n\n# Publish to npm\n```bsh\n$ npm run publish\n```\n\n# Usage\n1. [props](#props)\n2. [example of simple use](#example-of-simple-use)\n3. [customizing marker image](#customizing-marker-image)\n4. [customizing infowindow](#customizing-infowindow)\n5. [circle component](#circle-component)\n6. [line component](#line-component)\n7. [polygon component](#polygon-component)\n### props\n- KakaoMap\n\n| props     | description       | value             |\n|-----------|-------------------|-------------------|\n| level     | zoom level        | 1~14              |\n| latitude  | central latitude of map | ex) 37.2479       |\n| longitude | central longitude of map | ex) 127.0781      |\n| appKey    | your kakao appkey | your kakao appKey |\n| zoomable  | zoomable option   | true \\| false     |\n- Marker\n\n| props           | description                     | value           |\n|-----------------|---------------------------------|-----------------|\n| latitude        | marker latitude                 | ex) 37.2494     |\n| longitude       | marker longitude                | ex) 127.0781    |\n| details         | marker details                  | object          |\n| markerImgSrc    | custom marker image source      | path of image   |\n| markerImgWidth  | custom marker image width (px)  | number          |\n| markerImgHeight | custom marker image height (px) | number          |\n| iwComponent     | custom infowindow component     | React component |\n- Circle\n\n| props         | description                 | value                                                                   |\n|---------------|-----------------------------|-------------------------------------------------------------------------|\n| latitude      | central latitude of circle  | ex) 37.2492                                                             |\n| longitude     | central longitude of circle | ex) 127.0781                                                            |\n| radius        | radius of circle (meter)    | number                                                                  |\n| strokeWeight  | stroke weight (px)          | number                                                                  |\n| strokeColor   | stroke color                | ex) '#F10000'                                                           |\n| strokeOpacity | stroke opacity              | 0~1                                                                     |\n| strokeStyle   | stroke style                | [Reference](https://apis.map.kakao.com/web/documentation/#StrokeStyles) |\n| fillColor     | fill color                  | ex) '#F10000'                                                           |\n| fillOpacity   | fill opacity                | 0~1                                                                     |\n- Line\n\n| props         | description          | value                                                                   |\n|---------------|----------------------|-------------------------------------------------------------------------|\n| linePath      | array of coordinates that make up line | array                                                                   |\n| strokeWeight  | stroke weight (px)   | number                                                                  |\n| strokeColor   | stroke color         | ex) '#F10000'                                                           |\n| strokeOpacity | stroke opacity       | 0~1                                                                     |\n| strokeStyle   | stroke style         | [Reference](https://apis.map.kakao.com/web/documentation/#StrokeStyles) |\n- Polygon\n\n| props         | description                               | value                                                                   |\n|---------------|-------------------------------------------|-------------------------------------------------------------------------|\n| polygonPath   | array of coordinates that make up polygon | array                                                                   |\n| strokeWeight  | stroke weight (px)                        | number                                                                  |\n| strokeColor   | stroke color                              | ex) '#F10000'                                                           |\n| strokeOpacity | stroke opacity                            | 0~1                                                                     |\n| strokeStyle   | stroke style                              | [Reference](https://apis.map.kakao.com/web/documentation/#StrokeStyles) |\n| fillColor     | fill color                                | ex) '#F10000'                                                           |\n| fillOpacity   | fill opacity                              | 0~1                                                                     |\n### example of simple use\n- Data list with details\n```javascript\nimport React from 'react';\nimport { KakaoMap, Marker } from '@stickyboard/kakao-map';\n\nconst dataListWithDetails = [\n  {\n    latitude: 37.2479104,\n    longitude: 127.0781385,\n    details: {\n      NAME: \"Subway\",\n      TYPE: \"fastfood\",\n      MENU: \"sandwich\"\n    }\n  },\n  {\n    latitude: 37.2479733442,\n    longitude: 127.0776020771,\n    details: {\n      NAME: \"McDonald\",\n      TYPE: \"fastfood\",\n      MENU: \"hamburger\",\n    }\n  },\n  {\n    latitude: 37.2479113250,\n    longitude: 127.0766958899,\n    details: {\n      NAME: \"Starbucks\",\n      TYPE: \"cafe\",\n      MENU: \"beverage, coffee\",\n    }\n  }\n];\n\nconst App = () =\u003e {\n  return (\n    \u003cKakaoMap\n      level={2}\n      longitude={127.0776020771}\n      latitude={37.2479733442}\n      appKey='your_appKey'\n    \u003e\n      {dataListWithDetails.map((data) =\u003e \n        \u003cMarker\n          latitude={data.latitude}\n          longitude={data.longitude}\n          details={data.details}\n        /\u003e\n      )}\n    \u003c/KakaoMap\u003e\n  );\n}\n\nexport default App;\n```\n![datalistwidthdetails](https://user-images.githubusercontent.com/53550707/92702097-c4718880-f38b-11ea-80d1-ec220fcb62d1.png)\n- Data list without details\n```javascript\nimport React from 'react';\nimport { KakaoMap, Marker } from '@stickyboard/kakao-map';\n\nconst dataListWithoutDetails = [\n  {\n    latitude: 37.2479104,\n    longitude: 127.0781385\n  },\n  {\n    latitude: 37.2479733442,\n    longitude: 127.0776020771\n  },\n  {\n    latitude: 37.2479113250,\n    longitude: 127.0766958899\n  }\n];\n\nconst App = () =\u003e {\n  return (\n    \u003cKakaoMap\n      level={2}\n      longitude={127.0776020771}\n      latitude={37.2479733442}\n      appKey='your_appKey'\n    \u003e\n      {dataListWithoutDetails.map((data) =\u003e \n        \u003cMarker\n          latitude={data.latitude}\n          longitude={data.longitude}\n        /\u003e\n      )}\n    \u003c/KakaoMap\u003e\n  );\n}\n\nexport default App;\n```\n![datalistwithoutdetails](https://user-images.githubusercontent.com/53550707/92702788-8fb20100-f38c-11ea-885b-a5370e88a1b5.png)\n\n### customizing marker image\n- Use markerImgSrc, markerImgWidth and markerImgHeight.\n```javascript\nimport React from 'react';\nimport { KakaoMap, Marker } from '@stickyboard/kakao-map';\n\nconst App = () =\u003e {\n  return (\n    \u003cKakaoMap\n      level={3}\n      longitude={127.09598}\n      latitude={37.54699}\n      appKey='your_appKey'\n    \u003e\n      \u003cMarker\n        latitude={37.54699}\n        longitude={127.09598}\n        markerImgSrc='https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'\n        markerImgWidth={64}\n        markerImgHeight={69}\n      /\u003e\n    \u003c/KakaoMap\u003e\n  );\n}\n\nexport default App;\n```\n![custom-marker-img](https://user-images.githubusercontent.com/53550707/92704410-e53add80-f38d-11ea-8a0c-e33e593c2912.png)\n\n### customizing infowindow\n- Use iwComponent. Custom infowindow component should have \"details\" props.\n```javascript\nimport React from 'react';\nimport { KakaoMap, Marker } from '@stickyboard/kakao-map';\n\nconst CustomIW = ({details}) =\u003e {\n  return (\n    \u003cdiv className=\"customoverlay\"\u003e\n      \u003ca href=\"https://map.kakao.com/link/map/11394059\"\u003e\n        \u003cspan className=\"title\"\u003e{details.title}\u003c/span\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst App = () =\u003e {\n  return (\n    \u003cKakaoMap\n      level={3}\n      longitude={127.09598}\n      latitude={37.54699}\n      appKey='your_appKey'\n    \u003e\n      \u003cMarker\n        latitude={37.54699}\n        longitude={127.09598}\n        details={{\n          title: '구의야구공원'\n        }}\n        markerImgSrc='https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'\n        markerImgWidth={64}\n        markerImgHeight={69}\n        iwComponent={CustomIW}\n      /\u003e\n    \u003c/KakaoMap\u003e\n  );\n}\n\nexport default App;\n```\n```css\n/*style.css*/\n.customoverlay {\n        position:relative;\n        bottom:120px;\n        right:5px;\n        border-radius:6px;\n        border: 1px solid #ccc;\n        border-bottom:2px solid #ddd;\n      }\n.customoverlay:nth-of-type(n) {\n  border:0; \n  box-shadow:0px 1px 2px #888;\n}\n.customoverlay a {\n  display:block;\n  text-decoration:none;\n  color:#000;\n  text-align:center;\n  border-radius:6px;\n  font-size:14px;\n  font-weight:bold;\n  overflow:hidden;\n  background: #d95050;\n  background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;\n}\n.customoverlay .title {\n  display:block;\n  text-align:center;\n  background:#fff;\n  margin-right:35px;\n  padding:10px 15px;\n  font-size:14px;\n  font-weight:bold;\n}\n.customoverlay:after {\n  content:'';\n  position:absolute;\n  margin-left:-12px;\n  left:50%;\n  bottom:-12px;\n  width:22px;\n  height:12px;\n  background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')\n}\n```\n![custom-iw](https://user-images.githubusercontent.com/53550707/92713166-9abd5f00-f395-11ea-96b0-44873425060d.png)\n\n### circle component\n- example of 'Circle' component\n```javascript\nimport React from 'react';\nimport { KakaoMap, Circle } from '@stickyboard/kakao-map';\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n    \u003cKakaoMap\n      level={3}\n      longitude={127.09598}\n      latitude={37.54699}\n      appKey='your_appKey'\n    \u003e\n      \u003cCircle\n        longitude={127.09598}\n        latitude={37.54699}\n        radius={50}\n        strokeWeight={5}\n        strokeColor='#75B8FA'\n        strokeOpacity={1}\n        strokeStyle='dashed'\n        fillColor='#CFE7FF'\n        fillOpacity={0.7} \n      /\u003e\n    \u003c/KakaoMap\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n![circle](https://user-images.githubusercontent.com/53550707/94360468-62818480-00e8-11eb-9764-08f180eb76bd.png)\n\n### line component\n- example of 'Line' component\n```javascript\nimport React from 'react';\nimport { KakaoMap, Line } from '@stickyboard/kakao-map';\n\nconst linePath = [\n  {\n    latitude: 37.2479104,\n    longitude: 127.0781385\n  },\n  {\n    latitude: 37.2479733442,\n    longitude: 127.0776020771\n  },\n  {\n    latitude: 37.2479113250,\n    longitude: 127.0766958899\n  }\n]\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n    \u003cKakaoMap\n      level={1}\n      latitude={37.2479733442}\n      longitude={127.0776020771}\n      appKey='your_appKey'\n    \u003e\n      \u003cLine\n        linePath={linePath}\n        strokeWeight={5}\n        strokeColor='#FFAE00'\n        strokeOpacity={0.7}\n        strokeStyle='solid'\n      /\u003e\n    \u003c/KakaoMap\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App; \n```\n![line](https://user-images.githubusercontent.com/53550707/94360475-6c0aec80-00e8-11eb-8bec-ded43a2f1802.png)\n\n### polygon component\n- example of 'Polygon' component\n```javascript\nimport React from 'react';\nimport { KakaoMap, Polygon } from '@stickyboard/kakao-map';\n\nconst polygonPath = [\n  {\n    latitude: 33.45133510810506,\n    longitude: 126.57159381623066\n  },\n  {\n    latitude: 33.44955812811862,\n    longitude: 126.5713551811832\n  },\n  {\n    latitude: 33.449986291544086,\n    longitude: 126.57263296172184\n  },\n  {\n    latitude: 33.450682513554554,\n    longitude: 126.57321034054742\n  },\n  {\n    latitude: 33.451346760004206,\n    longitude: 126.57235740081413\n  }\n]\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n    \u003cKakaoMap\n      level={2}\n      latitude={33.449986291544086}\n      longitude={126.57263296172184}\n      appKey='your_appKey'\n    \u003e\n      \u003cPolygon\n        polygonPath={polygonPath}\n        strokeWeight={3}\n        strokeColor='#39DE2A'\n        strokeOpacity={0.8}\n        strokeStyle='longdash'\n        fillColor='#A2FF99'\n        fillOpacity={0.7}\n      /\u003e\n    \u003c/KakaoMap\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n![polygon](https://user-images.githubusercontent.com/53550707/94360483-7c22cc00-00e8-11eb-93a4-cacfa996ae4d.png)\n\n# License\nThis project is licenced under the [MIT License](http://opensource.org/licenses/mit-license.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoaple%2Fstickyboard-kakao-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoaple%2Fstickyboard-kakao-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoaple%2Fstickyboard-kakao-map/lists"}