@mint-ui/map

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

Installation

yarn add @mint-ui/map

npm install @mint-ui/map

Examples

...
...

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