akvo-charts v1.3.4

Akvo Charts

The akvo-charts library allows you to create a variety of charts by leveraging Apache ECharts configurations. In this documentation, we'll demonstrate how to use all the components from akvo-charts with custom configurations, using both the default config and the rawConfig prop, which directly maps to the ECharts options.

Note: In addition to chart components, akvo-charts also includes a MapView component that leverages Leaflet for creating interactive maps. This provides a powerful combination of charting and mapping capabilities within a single library.

Table of Contents

• Akvo Charts
• Table of Contents
  • Installation
  • API
    • Raw config
    • Config
      • Legend
      • Text Style
      • Item Style
      • Example Config
    • Data
      • 2D Array
      • Row-Based Key-Value Format
      • Column-Based Key-Value Format
  • Usage
    • Bar Chart
      • Props
      • Example usage of Bar chart
      • Example usage of rawConfig for a Bar chart
    • Line Chart
      • Props
      • Example usage of Line chart
      • Example usage of rawConfig for a Line chart
    • Pie Chart
      • Props
      • Example usage of Pie chart
      • Example usage of rawConfig for a Pie chart
    • Doughnut Chart
      • Props
      • Example usage of Doughnut chart
      • Example usage of rawConfig for a Doughnut chart
    • Stack Bar Chart
      • Props
      • Example of stackMapping props
      • Example usage of StackBar chart
      • Example usage of rawConfig for a StackBar chart
    • Stack Cluster Column
      • Props
      • Example usage of StackClusterColumn chart
      • Example usage of rawConfig for a StackClusterColumn chart
    • Scatter Plot Chart
      • Props
      • Example usage of ScatterPlot chart
      • Example usage of rawConfig for a ScatterPlot chart
    • Stack Line Chart
      • Props
      • Example usage of StackLine chart
      • Example usage of rawConfig for a StackLine chart
    • MapView
      • config
      • layer
        • tooltip (object)
      • data
      • config
      • Example usage of MapView
      • Example Usage with Choropleth Mapping
    • MapCluster
      • Props
        • markerIcon
        • clusterIcon
        • Additional Properties
      • Example Usage
      • MapCluster Notes
    • Fully Customized Map
    • Components
      • Container
      • GeoJson
      • LegendControl
      • Marker
      • MarkerClusterGroup
      • TileLayer
      • Utils
      • Example Usage
      • Map components Notes

Installation

To get started, install the package via npm:

npm install --save akvo-charts

or yarn:

yarn add akvo-charts

API

Raw config

An object containing the chart configuration options that adhere to Apache ECharts' specifications. This allows you to customize various aspects of the chart, including axes, series, grid, and more. The structure of this object should follow the ECharts option documentation.

Config

Legend

Example of legend config

const config = {
  // ...other config
  legend: {
    show: true,
    icon: 'pin',
    top: 40,
    left: 'left',
    align: 'left',
    orient: 'vertical',
    itemGap: 15
  }
}

Text Style

Example of textStyle config

const config = {
  // ...other config
  textStyle: {
    color: '#000100',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontFamily: 'Arial',
    fontSize: 12
  }
}

Item Style

Example of itemStyle config

const config = {
  // ...other config
  itemStyle: {
    color: '#5470c6',
    borderColor: '#fff',
    borderWidth: 1,
    borderType: 'dashed',
    opacity: 0.6
  }
}

Example Config

const config = {
  title: 'Akvo Chart',
  xAxisLabel: 'Year',
  yAxisLabel: 'Income',
  legend: {
    show: true,
    icon: 'pin',
    top: 40,
    left: 'left',
    align: 'left',
    orient: 'vertical',
    itemGap: 15
  },
  textStyle: {
    color: '#000100',
    fontStyle: 'normal',
    fontWeight: 'bold',
    fontFamily: 'Arial',
    fontSize: 12
  },
  itemStyle: {
    color: '#5470c6',
    borderColor: '#fff',
    borderWidth: 1,
    borderType: 'dashed',
    opacity: 0.6
  },
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666']
}

Data

In Akvo-Charts, we follow the ECharts dataset format to ensure compatibility and ease of use. The following data formats are supported:

2D Array

A 2D array where the first row and/or column can contain dimension names. If dimension names are not provided, only the data will be used. This format is useful for simple tabular data representations.

Example

[
    ['product', '2015', '2016', '2017'],
    ['Matcha Latte', 43.3, 85.8, 93.7],
    ['Milk Tea', 83.1, 73.4, 55.1],
    ['Cheese Cocoa', 86.4, 65.2, 82.5],
    ['Walnut Brownie', 72.4, 53.9, 39.1]
]

Row-Based Key-Value Format

An array of objects where each object represents a row of data. The keys in the objects correspond to dimension names, and the values represent the data points. This format is useful for datasets with named dimensions.

Example

[
    { product: 'Matcha Latte', count: 823, score: 95.8 },
    { product: 'Milk Tea', count: 235, score: 81.4 },
    { product: 'Cheese Cocoa', count: 1042, score: 91.2 },
    { product: 'Walnut Brownie', count: 988, score: 76.9 }
]

Column-Based Key-Value Format

An object where each key represents a column of data. The values for each key are arrays that correspond to the data in each column. This format is useful for datasets where columns are explicitly defined.

Example

{
    'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
    'count': [823, 235, 1042, 988],
    'score': [95.8, 81.4, 91.2, 76.9]
}

Usage

Bar Chart

A component for rendering basic bar chart.

Props

Example usage of Bar chart

import React from 'react';
import { Bar } from 'akvo-charts';

const BarChartExample = () => {
  const data = [
    { label: 'January', value: 30 },
    { label: 'February', value: 20 },
    // ...
  ];

  const config = {
    title: 'Monthly Sales',
    xAxisLabel: 'Month',
    yAxisLabel: 'Sales'
  };

  return <Bar config={config} data={data} />;
};

export default BarChartExample;

Example usage of rawConfig for a Bar chart

import { Bar } from "akvo-charts";

const BarChartExample = () => {
  const rawConfig = {
    xAxis: {
      type: "category",
      data: [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun"
      ]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [
          120,
          200,
          150,
          80,
          70,
          110,
          130
        ],
        type: "bar"
      }
    ]
  };

  return <Bar rawConfig={rawConfig} />;
};

export default BarChartExample;

Line Chart

A component for rendering basic line chart.

Props

Example usage of Line chart

import React from 'react';
import { Line } from 'akvo-charts';

const LineChartExample = () => {
  const data = [
    { label: 'January', value: 30 },
    { label: 'February', value: 20 },
    // ...
  ];

  const config = {
    title: 'Monthly Sales',
    xAxisLabel: 'Month',
    yAxisLabel: 'Sales'
  };

  return <Line config={config} data={data} />;
};

export default LineChartExample;

Example usage of rawConfig for a Line chart

import { Line } from "akvo-charts";

const LineChartExample = () => {
  const rawConfig = {
    xAxis: {
      type: "category",
      data: [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun"
      ]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [
          820,
          932,
          901,
          934,
          1290,
          1330,
          1320
        ],
        type: "line",
        smooth: true
      }
    ]
  };

  return <Line rawConfig={rawConfig} />;
};

export default LineChartExample;

Pie Chart

A component for rendering basic pie chart.

Props

Example usage of Pie chart

import React from 'react';
import { Pie } from 'akvo-charts';

const PieChartExample = () => {
  const data = [
    { label: 'A', value: 30 },
    { label: 'B', value: 70 },
    // ...
  ];

  const config = {
    title: 'Market Share'
  };

  return <Pie config={config} data={data} />;
};

export default PieChartExample;

Example usage of rawConfig for a Pie chart

import { Pie } from "akvo-charts";

const PieChartExample = () => {
  const rawConfig = {
    title: {
      text: "Referer of a Website",
      subtext: "Fake Data",
      left: "center"
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      orient: "vertical",
      left: "left"
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          {
            value: 1048,
            name: "Search Engine"
          },
          {
            value: 735,
            name: "Direct"
          },
          {
            value: 580,
            name: "Email"
          },
          {
            value: 484,
            name: "Union Ads"
          },
          {
            value: 300,
            name: "Video Ads"
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };

  return <Pie rawConfig={rawConfig} />;
};

export default PieChartExample;

Doughnut Chart

A component for rendering basic doughnut chart.

Props

Example usage of Doughnut chart

import React from 'react';
import { Doughnut } from 'akvo-charts';

const DoughnutChartExample = () => {
  const data = [
    { label: 'A', value: 30 },
    { label: 'B', value: 70 },
    // ...
  ];

  const config = {
    title: 'Market Share'
  };

  return <Doughnut config={config} data={data} size={50} />;
};

export default DoughnutChartExample;

Example usage of rawConfig for a Doughnut chart

import { Doughnut } from "akvo-charts";

const DoughnutChartExample = () => {
  const rawConfig = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      top: "5%",
      left: "center"
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: [
          "40%",
          "70%"
        ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {
            value: 1048,
            name: "Search Engine"
          },
          {
            value: 735,
            name: "Direct"
          },
          {
            value: 580,
            name: "Email"
          },
          {
            value: 484,
            name: "Union Ads"
          },
          {
            value: 300,
            name: "Video Ads"
          }
        ]
      }
    ]
  };

  return <Doughnut rawConfig={rawConfig} />;
};

export default DoughnutChartExample;

Stack Bar Chart

A component for rendering stacked bar chart.

Props

Example of stackMapping props

const data = [
    ['product', '2015', '2016', '2017', '2018'],
    ['Matcha Latte', 43.3, 85.8, 93.7, 90],
    ['Milk Tea', 83.1, 73.4, 55.1, 78],
    ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],
    ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]
];

const stackMapping = {
  'stack1': [2015, 2016],
  'stack2': [2017, 2018],
}

Example usage of StackBar chart

import React from 'react';
import { StackBar } from 'akvo-charts';

const StackBarChartExample = () => {
  const data = [
      ['product', '2015', '2016', '2017', '2018'],
      ['Matcha Latte', 43.3, 85.8, 93.7, 90],
      ['Milk Tea', 83.1, 73.4, 55.1, 78],
      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],
      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]
  ];

  const stackMapping = {
    'stack1': [2015, 2016],
    'stack2': [2017, 2018],
  }

  const config = {
    title: 'Product Sales Stack Bar',
    xAxisLabel: 'Product',
    yAxisLabel: 'Sales'
  };

  return <StackBar config={config} data={data} stackMapping={stackMapping} />;
};

export default StackBarChartExample;

Example usage of rawConfig for a StackBar chart

import { StackBar } from "akvo-charts";

const StackBarChartExample = () => {
  const rawConfig = {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        [
          "product",
          "2015",
          "2016",
          "2017"
        ],
        [
          "Matcha Latte",
          43.3,
          85.8,
          93.7
        ],
        [
          "Milk Tea",
          83.1,
          73.4,
          55.1
        ],
        [
          "Cheese Cocoa",
          86.4,
          65.2,
          82.5
        ],
        [
          "Walnut Brownie",
          72.4,
          53.9,
          39.1
        ]
      ]
    },
    xAxis: {
      type: "category"
    },
    yAxis: {},
    series: [
      {
        type: "bar"
      },
      {
        type: "bar"
      },
      {
        type: "bar"
      }
    ]
  };

  return <StackBar rawConfig={rawConfig} />;
};

export default StackBarChartExample;

Stack Cluster Column

A component for rendering stakc cluster column. Basically this chart is like stack bar chart but stacked into a group of bar chart.

Props

Example usage of StackClusterColumn chart

import React from 'react';
import { StackClusterColumn } from 'akvo-charts';

const StackClusterColumnChartExample = () => {
  const data = [
      ['product', '2015', '2016', '2017', '2018'],
      ['Matcha Latte', 43.3, 85.8, 93.7, 90],
      ['Milk Tea', 83.1, 73.4, 55.1, 78],
      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],
      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]
  ];

  const config = {
    title: 'Product Sales Stack Bar',
    xAxisLabel: 'Product',
    yAxisLabel: 'Sales'
  };

  return <StackClusterColumn config={config} data={data} />;
};

export default StackClusterColumnChartExample;

Example usage of rawConfig for a StackClusterColumn chart

import { StackClusterColumn } from "akvo-charts";

const StackClusterColumnChartExample = () => {
  const rawConfig = {
    legend: {},
    tooltip: {},
    dataset: {
      source: [
        [
          "product",
          "2015",
          "2016",
          "2017"
        ],
        [
          "Matcha Latte",
          43.3,
          85.8,
          93.7
        ],
        [
          "Milk Tea",
          83.1,
          73.4,
          55.1
        ],
        [
          "Cheese Cocoa",
          86.4,
          65.2,
          82.5
        ],
        [
          "Walnut Brownie",
          72.4,
          53.9,
          39.1
        ]
      ]
    },
    xAxis: {
      type: "category"
    },
    yAxis: {},
    series: [
      {
        type: "bar"
      },
      {
        type: "bar"
      },
      {
        type: "bar"
      }
    ]
  };

  return <StackClusterColumn rawConfig={rawConfig} />;
};

export default StackClusterColumnChartExample;

Scatter Plot Chart

A component for rendering basic scatter plot chart.

Props

Example usage of ScatterPlot chart

import React from 'react';
import { ScatterPlot } from 'akvo-charts';

const ScatterPlotChartExample = () => {
   const data = [
      { label: 'A', x: 1, y: 2 },
      { label: 'B', x: 1, y: 3 },
      { label: 'C', x: 5, y: 7 }
    ];

    const config = {
      title: 'ScatterPlot Chart Example'
    };

  return <ScatterPlot config={config} data={data} symbolSize={25} />;
};

export default ScatterPlotChartExample;

Example usage of rawConfig for a ScatterPlot chart

import { ScatterPlot } from "akvo-charts";

const ScatterPlotChartExample = () => {
  const rawConfig = {
    xAxis: {},
    yAxis: {},
    series: [
      {
        symbolSize: 20,
        data: [
          [
            10,
            8.04
          ],
          [
            8.07,
            6.95
          ],
          [
            13,
            7.58
          ],
          [
            9.05,
            8.81
          ],
        ],
        type: "scatter"
      }
    ]
  };

  return <ScatterPlot rawConfig={rawConfig} />;
};

export default ScatterPlotChartExample;

Stack Line Chart

A component for rendering stack line chart.

Props

Example usage of StackLine chart

import React from 'react';
import { StackLine } from 'akvo-charts';

const StackLineChartExample = () => {
  const data = [
      ['product', '2015', '2016', '2017', '2018'],
      ['Matcha Latte', 43.3, 85.8, 93.7, 90],
      ['Milk Tea', 83.1, 73.4, 55.1, 78],
      ['Cheese Cocoa', 86.4, 65.2, 82.5, 44.3],
      ['Walnut Brownie', 72.4, 53.9, 39.1, 55.5]
  ];

  const config = {
    title: 'Product Sales Stack Bar',
    xAxisLabel: 'Product',
    yAxisLabel: 'Sales'
  };

  return <StackLine config={config} data={data} />;
};

export default StackLineChartExample;

Example usage of rawConfig for a StackLine chart

import { StackLine } from "akvo-charts";

const StackLineChartExample = () => {
  const rawConfig = {
    title: {
      text: "Product Sales"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985"
        }
      }
    },
    legend: {
      data: [
        "Matcha Latte",
        "Milk Tea",
        "Cheese Cocoa",
        "Walnut Brownie"
      ]
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: [
          "2015",
          "2016",
          "2017",
          "2018"
        ]
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "Matcha Latte",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series"
        },
        data: [
          43.3,
          85.8,
          93.7,
          90
        ]
      },
      {
        name: "Milk Tea",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series"
        },
        data: [
          83.1,
          73.4,
          55.1,
          78
        ]
      },
      {
        name: "Cheese Cocoa",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series"
        },
        data: [
          86.4,
          65.2,
          82.5,
          44.3
        ]
      },
      {
        name: "Walnut Brownie",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series"
        },
        data: [
          72.4,
          53.9,
          39.1,
          55.5
        ]
      }
    ]
  };

  return <StackLine rawConfig={rawConfig} />;
};

export default StackLineChartExample;

MapView

The MapView component provides an easy way to render a map in your React application using Leaflet. You can customize the map's appearance, add layers, plot points, and handle user interactions such as clicks. The map configuration is passed via the config, data, tile, and layer props.

config

layer

tooltip (object)

Configuration for displaying a Leaflet tooltip on a choropleth map. | Prop | Type | Description | |-------|------|--------------| | show | boolean | Determines whether tooltips are enabled globally on the map. | | showTooltipForAll | boolean | Indicates if tooltips should be shown for all data points, regardless of value. | | tooltipComponent | React component | Custom React component used to render the tooltip content. |

data

An array of objects that define either marker points or data for choropleth mapping. For markers, objects should include point (latitude, longitude) and label. For choropleth, objects should include keys that match mapKey and the corresponding data value (e.g., density).

config

Example usage of MapView

import React from "react";
import { MapView } from "akvo-charts";

const MapViewExample = () => {
  const config = {
    center: [
      -6.2,
      106.816666
    ],
    zoom: 8,
    height: "100vh",
    width: "100%"
  };

  const data = [
    {
      point: [
        -6.170166,
        106.831375
      ],
      label: "Istiqlal Mosque"
    },
    {
      point: [
        -6.174596,
        106.830407
      ],
      label: "Gambir Station"
    },
    {
      point: [
        -6.175414,
        106.827175
      ],
      label: "The National Monument"
    }
  ];

  const onClick = (map, { target }) => map.fitBounds(target._bounds);
  const layer = {
    source: "window.topoData",
    url: "https://akvo.github.io/akvo-charts/static/geojson/indonesia-prov.geojson",
    style: {
      color: "#92400e",
      weight: 1,
      fillColor: "#fbbf24"
    },
    onClick: onClick
  };

  const tile = {
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    maxZoom: 19,
    attribution: "© OpenStreetMap"
  };

  return <MapView tile={tile} layer={layer} data={data} config={config} />;
};

export default MapViewExample;

Example Usage with Choropleth Mapping

Here is an example of how to define a layer in MapView for applying a choropleth map:

const ChoroPlethExample = () => {
  const CustomTooltip = ({ props }) => (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 10
      }}
    >
      <div style={{ fontWeight: 700 }}>{props?.name || 'No Name'}</div>
      <div>Density: {props?.density || 'N/A'}</div>
    </div>
  );

  const config = {
    center: [-6.2, 106.816666],
    zoom: 8,
    height: "100vh",
    width: "100%",
  };

  const data = [
    {
      Propinsi: "DI. ACEH",
      density: 92,
    },
    {
      Propinsi: "SUMATERA UTARA",
      density: 205,
    },
    // more data here
  ];

  const onClick = (map, { target }) => map.fitBounds(target._bounds);
  const layer = {
    source: "window.topoData",
    url: "https://akvo.github.io/akvo-charts/static/geojson/indonesia-prov.geojson",
    style: {
      color: "#92400e",
      weight: 1,
      fillColor: "#fbbf24",
      fillOpacity: 0.7,
    },
    color: [
      "#FFEDA0",
      "#FED976",
      "#FFEDA0",
      "#FED976",
    ],
    mapKey: "Propinsi",
    choropleth: "density",
    onClick: onClick,
    tooltip: {
        show: true,
        showTooltipForAll: false,
        tooltipComponent: CustomTooltip
      },
  };

  const tile = {
    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    maxZoom: 19,
    attribution: "© OpenStreetMap",
  };

  return (
    <div>
      <MapView tile={tile} layer={layer} data={data} config={config} />
    </div>
  );
};

export default ChoroPlethExample;

MapCluster

The MapCluster component provides an initial implementation for map clustering in Akvo project use cases. It leverages Container, MarkerClusterGroup, and Marker to group and display markers on a map.

Props

markerIcon

Defines the styling and attributes for individual marker icons. | Prop | Type | Description | |--------------|--------------------|---------------------------------------------| | className | string | CSS class for styling the marker icon. | | iconSize | [number, number] | Dimensions of the marker icon [width, height]. | | html | boolean | If true, uses a default HTML circle icon. |

clusterIcon

Defines the styling and attributes for cluster icons. | Prop | Type | Description | |--------------|----------------|---------------------------------------------| | className | string | CSS class for styling the cluster icon. | | iconSize | number | Size of the cluster icon in pixels. |

Additional Properties

Example Usage

import React from "react";
import MapCluster from "./MapCluster";

const markerIcon = {
  className: "custom-marker",
  iconSize: [32, 32],
  html: true,
};

const clusterIcon = {
  className: "custom-marker-cluster",
  iconSize: 60,
};

const tile = {
  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
  maxZoom: 19,
  attribution: "© OpenStreetMap",
};

const config = {
  // Additional configuration options for the map can go here.
};

const data = [
  // Provide the array of data points for the map here.
];

const Chart = () => {
  return (
    <div>
      <MapCluster
        tile={tile}
        config={config}
        data={data}
        markerIcon={markerIcon}
        clusterIcon={clusterIcon}
        groupKey={"serviceLevel"}
        type={"circle"}
      />
    </div>
  );
};

export default Chart;

MapCluster Notes

• When using "default" for type, the component applies styles from Leaflet.markercluster.
• When using "circle" for type, the component applies Akvo-specific predefined styles.
• Ensure the data prop is formatted correctly to include the required latitude and longitude coordinates for each marker.
• Customize renderPopup to display additional information for markers as needed.

Fully Customized Map

If the MapView or MapCluster components do not meet your specific requirements, you can use this fully customizable map component to create a tailored solution.

Components

Container

The Container component serves as the base for rendering a map.

GeoJson

The GeoJson component allows you to render GeoJSON data as layers on the map.

LegendControl

The LegendControl component creates a legend control based on color ranges.

Marker

The Marker component is used to display individual points on the map.

It also supports all Marker options.

MarkerClusterGroup

The MarkerClusterGroup component groups multiple markers into clusters.

It supports all Leaflet.markercluster options.

TileLayer

The TileLayer component is used to display map tiles.

It supports all TileLayer options.

Utils

• getGeoJSONList: This utility function converts TopoJSON data to GeoJSON using the topojson-client library.

Example Usage

import { Map } from 'akvo-charts';

const { getGeoJSONList } = Map;

const DisplayMap = () => {
  const mapConfig = {
    config: {
      center: [-6.2, 106.816666],
      zoom: 8,
      height: "100vh",
      width: "100%",
    },
  };

  const iconCreateFn = (cluster) => (
    <div className="custom-cluster-icon">
      {cluster.getChildCount()}
    </div>
  );

  const geoProps = {
    style: {
      fillColor: "#f28c28",
      weight: 2,
      opacity: 1,
      color: "white",
      fillOpacity: 0.7,
    },
    onClick: (e) => console.log("Layer clicked!", e),
  };
  const data = [
    // Provide the array of data points for the map here.
  ];
  const geoData = {
  // Provide the object of geojson data for the map here.
  }

  return (
    <Map.Container {...mapConfig}>
      {getGeoJSONList(geoData).map((gd, gx) => (
        <Map.GeoJson key={gx} data={gd} {...geoProps} />
      ))}
      <Map.MarkerClusterGroup iconCreateFn={iconCreateFn}>
        {data
          ?.filter((d) => d?.point)
          ?.map((d, dx) => (
            <Map.Marker
              key={dx}
              latlng={d.point}
              icon={{
                className: 'custom-marker',
                iconSize: [32, 32],
                html: `<span style="background-color:${d.color}; border:2px solid #fff;" />`,
              }}
            >
              <ul className="w-full text-base space-y-1">
                <li>
                  <strong>School: </strong>
                  <span>{d.label}</span>
                </li>
                <li>
                  <strong>Service Level: </strong>
                  <span>{d.serviceLevel}</span>
                </li>
              </ul>
            </Map.Marker>
          ))}
      </Map.MarkerClusterGroup>
    </Map.Container>
  );
};

export default DisplayMap;

Map components Notes

• Customize iconCreateFn to define your cluster icons dynamically.
• Use getGeoJSONList to handle TopoJSON conversions and simplify rendering GeoJSON layers.
• Always define style properties for GeoJson to ensure proper rendering of layers.

Back to top