@mint-ui/map v1.0.0
@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
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
7 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
7 months ago
10 months ago
7 months ago
8 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago