@mint-ui/map/README.md

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

# @mint-ui/map

- React map library 
- Control various map with one interface
- Google, Naver, Kakao map supported now
- Typescript supported
- Canvas marker supported

## Installation

``` bash
yarn add @mint-ui/map

npm install @mint-ui/map
```

## Examples

``` javascript
...
...

import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'

const root = ReactDOM.createRoot(
  document.getElementById('root')
)

function MyMapComponent(){

  return <MintMap 
    mapType={'google'} 
    mapKey={'YOUR_GOOGLE_MAP_KEY'}
    mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
    base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
  >
    {/* Your marker */}
    <MapMarkerWrapper position={new Position(-25.344, 131.031)}>
    
      {/* Your marker elements */}
      <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
      
    </MapMarkerWrapper>

    {/* Canvas marker */}
    <CanvasMarker

      /* Canvas renderer */
      renderer={({ context, offset, payload }) => {
        context.beginPath();

        // rect
        context.rect(offset[0].x, offset[0].y, 20, 20);
        context.fillStyle = 'orange';
        context.fill();

        // rect outline
        context.strokeStyle = 'red';
        context.strokeRect(offset[0].x, offset[0].y, 20, 20);

        // font
        context.fillStyle = 'white';
        context.font = '10px caption';
        context.fillText(String(payload?.no), offset[0].x + 2, offset[0].y + 14);
        context.closePath();
      }}
      zIndex={2}
      data={markers}
    />
      
  </MintMap>

}

root.render((<MyMapComponent/>))

```

## Document / Reference Site

[https://dev-rsquare.github.io/mint-ui-map-guide](https://dev-rsquare.github.io/mint-ui-map-guide)