@ant-design/maps

Case

✨ Features

- Easy to use
- TypeScript

📦 Installation

``bash | pure
$ npm install @ant-design/maps
`

🔨 Usage

`tsx | pure
import React, { useState, useEffect } from 'react';
import { AreaMap } from '@ant-design/maps';

const DemoAreaMap = () => {
const [data, setData] = useState({ type: 'FeatureCollection', features: [] });

useEffect(() => {
asyncFetch();
}, []);

const asyncFetch = () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => {
console.log('fetch data failed', error);
});
};
const config = {
map: {
type: 'mapbox',
style: 'blank',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0,
},
source: {
data: data,
parser: {
type: 'geojson',
},
},
autoFit: true,
color: {
field: 'adcode',
value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(107,174,214)', 'rgb(49,130,189)', 'rgb(8,81,156)'],
scale: {
type: 'quantile',
},
},
style: {
opacity: 1,
stroke: 'rgb(93,112,146)',
lineWidth: 0.6,
lineOpacity: 1,
},
state: {
active: true,
},
label: {
visible: true,
field: 'name',
style: {
fill: '#000',
opacity: 0.8,
fontSize: 10,
stroke: '#fff',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5],
},
},
tooltip: {
items: ['name', 'adcode'],
},
zoom: {
position: 'bottomright',
},
legend: {
position: 'bottomleft',
},
};

return ;
};

export default DemoAreaMap;
`

📜 Document & API

See chart API for details. Common props:

| Property | Description | Type | defaultValue |
| :-------------- | :-------------------- | :---------------------------- | :----------- |
| onReady | chart loaded callback | (chart)=> void | - |
| loading | loading status | boolean | - |
| loadingTemplate | loading template | React.ReactElement | - |
| errorTemplate | custom error template | (e: Error) => React.ReactNode | - |
| className | container class | string | - |
| containerStyle | container style | React.CSSProperties | - |

🤝 How to Contribute

Your contributions are always welcome! Please Do have a look at the issues first.

📧 Contact us

DingTalk group number: 44788198 `.

License

MIT