@dongkyuuuu/react-naver-maps v1.0.0

@dongkyuuuu/react-naver-maps

• @dongkyuuuu/react-naver-maps
  • Support component
  • Installation
• Documentation
  • Quick start
  • NaverMapProvider
  • NaverMap
  • NaverMap.Marker

Support component

@dongkyuuuu/react-naver-maps is beta version. We are planning to apply as soon as possible.

• Map
• Marker

Installation

Via yarn

yarn add @dongkyuuuu/react-naver-maps

Via npm

npm install @dongkyuuuu/react-naver-maps

In a TypeScript project,

yarn add -D @types/navermaps

npm install --save-dev @types/navermaps

Documentation

Quick start

import { NaverMapProvider, NaverMap } from "@dongkyuuuu/react-naver-maps";

function App() {
  return (
    <NaverMapProvider
      options={{
        clientId: "YOUT_CLIENT_ID", // require
        category: "", // optional, "gov" | "ncp" | "fin", default is ncp
        subModules: [], // optional, Array<"panorama" | "geocoder" | "drawing" | "visualization">
      }}
    >
      <Example />
    </NaverMapProvider>
  );
}

function Example() {
  const onLoadMap = (map: naver.maps.Map) => {
    // you can access map object
    console.log("map", map);
  };
  const onLoadMarker = (marker: naver.maps.Marker) => {
    // you can access marker object
    console.log("marker", marker);
  };

  return (
    <NaverMap onLoaded={onLoadMap} style={{ width: "100vw", height: "100vh" }}>
      <NaverMap.Marker
        latitude={37.5666103}
        longtitude={126.9783882}
        onLoaded={onLoadMarker}
      >
        {/* Html Icon Support, write your jsx code */}
        {/* If you don't write anything, use default marker */}
      </NaverMap.Marker>
    </NaverMap>
  );
}

NaverMapProvider

Before use NaverMap this component is loaded in your root.

<NaverMapProvider
  options={{
      clientId: "YOUT_CLIENT_ID", // require
      category: "", // optional, "gov" | "ncp" | "fin", default is ncp
      subModules: [], // optional, Array<"panorama" | "geocoder" | "drawing" | "visualization">
  }}>
</NaverMapProvier>

• clientId: require, string
• category: optional, "gov" | "ncp" | "fin"
  • default value is "ncp"
• subModules: optional, Array<"panorama" | "geocoder" | "drawing" | "visualization">
  • default value is undefiend

NaverMap

NaverMap Component. default props attribute is HTMLDivElement. Default width and height is 0.

All other NaverMap.x component must be write inside NaverMap.

<NaverMap
  onLoaded={onMapLoaded}
  initLayer={}
  mapOptions={{
    latitude: 37.5666103,
    longtitude: 126.9783882,
  }}
  style={{ width: "100vw", height: "100vh" }}
></NaverMap>

• onLoaded: optional, (map:naver.maps.Map)=>void
  • When Map obeject is created, onLoaded function is called.
  • Map object is passed as a parameter.
• initLayer: optional, Array
• mapOptions: optional, naver.maps.MapOptions
  • If you want to change map center, write latitude and longtitude
  • other options can be found in navermap docs - mapOptions

NaverMap.Marker

Marker component.

If you want to use HtmlIcon, write jsx code inside NaverMap.Marker compoent.

<NaverMap>
  <NaverMap.Marker
    latitude={37.5666103}
    longtitude={126.9783882}
    onLoaded={onLoadMarker}
  ></NaverMap.Marker>
</NaverMap>

• latitude: require
• longtitude: require
• onLoaded: optional, (marker:naver.maps.Marker)=>void
  • When Marker obeject is created, onLoaded function is called.
  • Marker object is passed as a parameter.