stickyboard-kakao-map

Kakao map component for StickyBoard

Webpack watch

$ npm start

Build

$ npm run build

Publish to npm

$ npm run publish

Usage

1. props

• KakaoMap

  • level : zoom level
  • longtitude : central longtitude
  • latitude : central latitude
  • appKey : your kakao appkey
  • zoomable : zoomable option

• Marker

  • latitude : marker latitude
  • longitude : marker longitude
  • details : marker details
  • markerImgSrc : custom marker image source
  • markerImgWidth : custom marker image width
  • markerImgHeight : custom marker image height
  • iwComponent : custom infowindow component

2. Example of simple use

• Data list with details

import React from 'react';
import { KakaoMap, Marker } from '@stickyboard/kakao-map';

const dataListWithDetails = [
  {
    latitude: 37.2479104,
    longitude: 127.0781385,
    details: {
      NAME: "Subway",
      TYPE: "fastfood",
      MENU: "sandwich"
    }
  },
  {
    latitude: 37.2479733442,
    longitude: 127.0776020771,
    details: {
      NAME: "McDonald",
      TYPE: "fastfood",
      MENU: "hamburger",
    }
  },
  {
    latitude: 37.2479113250,
    longitude: 127.0766958899,
    details: {
      NAME: "Starbucks",
      TYPE: "cafe",
      MENU: "beverage, coffee",
    }
  }
];

const App = () => {
  return (
    <KakaoMap
      level={2}
      longitude={127.0776020771}
      latitude={37.2479733442}
      appKey='your_appKey'
    >
      {dataListWithDetails.map((data) => 
        <Marker
          latitude={data.latitude}
          longitude={data.longitude}
          details={data.details}
        />
      )}
    </KakaoMap>
  );
}

export default App;

• Data list without details

import React from 'react';
import { KakaoMap, Marker } from '@stickyboard/kakao-map';

const dataListWithoutDetails = [
  {
    latitude: 37.2479104,
    longitude: 127.0781385
  },
  {
    latitude: 37.2479733442,
    longitude: 127.0776020771
  },
  {
    latitude: 37.2479113250,
    longitude: 127.0766958899
  }
];

const App = () => {
  return (
    <KakaoMap
      level={2}
      longitude={127.0776020771}
      latitude={37.2479733442}
      appKey='your_appKey'
    >
      {dataListWithoutDetails.map((data) => 
        <Marker
          latitude={data.latitude}
          longitude={data.longitude}
        />
      )}
    </KakaoMap>
  );
}

export default App;

3. Customizing marker image

• Use markerImgSrc, markerImgWidth and markerImgHeight.

import React from 'react';
import { KakaoMap, Marker } from '@stickyboard/kakao-map';

const App = () => {
  return (
    <KakaoMap
      level={3}
      longitude={127.09598}
      latitude={37.54699}
      appKey='your_appKey'
    >
      <Marker
        latitude={37.54699}
        longitude={127.09598}
        markerImgSrc='https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'
        markerImgWidth={64}
        markerImgHeight={69}
      />
    </KakaoMap>
  );
}

export default App;

4. Customizing infowindow

• Use iwComponent. Custom infowindow component should have "details" props.

import React from 'react';
import { KakaoMap, Marker } from '@stickyboard/kakao-map';

const CustomIW = ({details}) => {
  return (
    <div className="customoverlay">
      <a href="https://map.kakao.com/link/map/11394059">
        <span className="title">{details.title}</span>
      </a>
    </div>
  )
}

const App = () => {
  return (
    <KakaoMap
      level={3}
      longitude={127.09598}
      latitude={37.54699}
      appKey='your_appKey'
    >
      <Marker
        latitude={37.54699}
        longitude={127.09598}
        details={{
          title: '구의야구공원'
        }}
        markerImgSrc='https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'
        markerImgWidth={64}
        markerImgHeight={69}
        iwComponent={CustomIW}
      />
    </KakaoMap>
  );
}

export default App;

/*style.css*/
.customoverlay {
        position:relative;
        bottom:120px;
        right:5px;
        border-radius:6px;
        border: 1px solid #ccc;
        border-bottom:2px solid #ddd;
      }
.customoverlay:nth-of-type(n) {
  border:0; 
  box-shadow:0px 1px 2px #888;
}
.customoverlay a {
  display:block;
  text-decoration:none;
  color:#000;
  text-align:center;
  border-radius:6px;
  font-size:14px;
  font-weight:bold;
  overflow:hidden;
  background: #d95050;
  background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;
}
.customoverlay .title {
  display:block;
  text-align:center;
  background:#fff;
  margin-right:35px;
  padding:10px 15px;
  font-size:14px;
  font-weight:bold;
}
.customoverlay:after {
  content:'';
  position:absolute;
  margin-left:-12px;
  left:50%;
  bottom:-12px;
  width:22px;
  height:12px;
  background:url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}

License

This project is licenced under the MIT License.