Maps - Kumo

<BubbleMap
  echarts={echarts}
  geoJson={geoJson}
  data={colos}
  lng="lon"
  lat="lat"
  name="city"
  value="requests"
/>

Installation

BubbleMap requires echarts as a peer dependency. Consumers provide the GeoJSON feature collection; the component does not fetch map data or use map tiles.

npm install echarts

Barrel

import { BubbleMap } from "@cloudflare/kumo";

Granular

import { BubbleMap } from "@cloudflare/kumo/components/chart";

Usage

import { BubbleMap, type MapGeoJson } from "@cloudflare/kumo";
import * as echarts from "echarts/core";
import { MapChart, ScatterChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([MapChart, ScatterChart, TooltipComponent, CanvasRenderer]);

// Load GeoJSON in your app and pass it to BubbleMap.
const geoJson = world as MapGeoJson;

const colos = [
  { iata: "SFO", city: "San Francisco", lat: 37.77, lon: -122.42, requests: 1200 },
  { iata: "LHR", city: "London", lat: 51.5, lon: -0.12, requests: 1500 },
];

export default function Example() {
  return (
    <BubbleMap
      echarts={echarts}
      geoJson={geoJson}
      data={colos}
      lng="lon"
      lat="lat"
      name="city"
      value="requests"
    />
  );
}

Examples

Bubble Map

Plot raw rows by longitude and latitude. The value accessor controls proportional bubble size.

<BubbleMap
  echarts={echarts}
  geoJson={geoJson}
  data={colos}
  lng="lon"
  lat="lat"
  name="city"
  value="requests"
  minRadius={8}
/>

Custom Tooltips

Provide tooltipFormatter when the default name/value tooltip is not enough. The formatter returns HTML rendered by ECharts, so escape user-provided values.

<BubbleMap
  echarts={echarts}
  geoJson={geoJson}
  data={colos}
  lng="lon"
  lat="lat"
  name="city"
  value="requests"
  tooltipFormatter={(row) =>
    "<strong>" + row.city + "</strong><br />" + row.requests.toLocaleString()
  }
/>

API Reference

Component "BubbleMap" not found in registry. Run pnpm build:ai-metadata to regenerate.