@mint-ui/map

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

Installation

1yarn add @mint-ui/map
2
3npm install @mint-ui/map

Examples

1...
2...
3
4import { MapMarkerWrapper, MintMap, Position } from '@mint-ui/map'
5
6const root = ReactDOM.createRoot(
7  document.getElementById('root')
8)
9
10function MyMapComponent(){
11
12  return <MintMap 
13    mapType={'google'} 
14    mapKey={'YOUR_GOOGLE_MAP_KEY'}
15    mapId='YOUR_GOOGLE_MAP_ID' //Use advanced markers in Google maps
16    base={{center:new Position(-25.344, 131.031), zoomLevel:12}}
17  >
18    {/* Your marker */}
19    <MapMarkerWrapper position={new Position(-25.344, 131.031)}>
20    
21      {/* Your marker elements */}
22      <div style={{width:'10px', height:'10px', background:'red', borderRadius:'10px'}}></div>
23      
24    </MapMarkerWrapper>
25
26    {/* Canvas marker */}
27    <CanvasMarker
28
29      /* Canvas renderer */
30      renderer={({ context, offset, payload }) => {
31        context.beginPath();
32
33        // rect
34        context.rect(offset[0].x, offset[0].y, 20, 20);
35        context.fillStyle = 'orange';
36        context.fill();
37
38        // rect outline
39        context.strokeStyle = 'red';
40        context.strokeRect(offset[0].x, offset[0].y, 20, 20);
41
42        // font
43        context.fillStyle = 'white';
44        context.font = '10px caption';
45        context.fillText(String(payload?.no), offset[0].x + 2, offset[0].y + 14);
46        context.closePath();
47      }}
48      zIndex={2}
49      data={markers}
50    />
51      
52  </MintMap>
53
54}
55
56root.render((<MyMapComponent/>))
57

Document / Reference Site

https://dev-rsquare.github.io/mint-ui-map-guide