Neverending Prototype Mode

    @stickyboard/kakao-map

    0.1.3 • Public • Published

    stickyboard-kakao-map

    Kakao map component for StickyBoard

    Version Downloads/week License

    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;

    datalistwidthdetails

    • 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;

    datalistwithoutdetails

    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;

    custom-marker-img

    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')
    }

    custom-iw

    License

    This project is licenced under the MIT License.

    Install

    npm i @stickyboard/kakao-map

    DownloadsWeekly Downloads

    1

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    93.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • soaple