@ant-design/maps
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

@ant-design/maps

A React geographic visualization component library, based on L7Plot.

npm npm GitHub stars npm License

WebsiteQuick StartGalleryFAQBlog

Case

✨ Features

  • Easy to use
  • TypeScript

📦 Installation

$ npm install @ant-design/maps

🔨 Usage

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 <AreaMap {...config} />;
};

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

Readme

Keywords

none

Package Sidebar

Install

npm i @ant-design/maps

Weekly Downloads

37,580

Version

1.0.8

License

MIT

Unpacked Size

10.6 MB

Total Files

77

Last publish

Collaborators

  • pearmini
  • kn9117
  • afc163