Class: default

A custom MapLibre GL JS layer that renders Apache ECharts visualizations.

Remarks

This layer integrates ECharts by creating a dedicated canvas over the map, allowing for rich data visualizations using ECharts' powerful charting capabilities. It is optimized for lines and scatter series types to visualize flows, trajectories, and point distributions.

The layer automatically synchronizes the ECharts view with the map's panning and zooming.

Example

import EChartsLayer from '@naivemap/maplibre-gl-echarts-layer';

// 1. Define a standard ECharts option object.
const option = {
  series: [{
    type: 'scatter',
    name: 'Cities',
    data: [
      // Data format: [longitude, latitude]
      [-74.0060, 40.7128],
      [-0.1278, 51.5074],
      [139.6917, 35.6895]
    ],
    symbolSize: 10,
  }]
};

// 2. Create the layer instance
const layer = new EChartsLayer('echarts-layer', option);

// 3. Add the layer to the map
map.addLayer(layer);

Implements

• CustomLayerInterface

Constructors

Constructor

new default(id, ecOption): EChartsLayer

Parameters

Parameter	Type	Description
id	string	A unique layer id
ecOption	ECOption	The ECharts option object used to configure the visualization.

Returns

EChartsLayer

See

https://echarts.apache.org/en/option.html

Properties

id

id: string

A unique layer id.

Implementation of

CustomLayerInterface.id

Methods

setOption()

setOption(option, notMerge?): void

Updates the ECharts visualization with a new configuration. This is the primary method for dynamically changing the displayed data or styles.

Parameters

Parameter	Type	Description
option	ECOption	The new ECharts option object to apply.
notMerge?	boolean	If true, the new options will completely replace the existing ones. If false or undefined, the new options will be merged with the old ones. Defaults to false.

Returns

void

See

https://echarts.apache.org/en/api.html#echartsInstance.setOption