Bubble Map - Kumo Svelte

<script lang="ts">
  import * as echarts from 'echarts';
  import { BubbleMap, ChartPalette, type MapGeoJson } from 'kumo-svelte';

  const world: MapGeoJson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'world',
        properties: { name: 'World' },
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-170, -55],
              [170, -55],
              [170, 75],
              [-170, 75],
              [-170, -55]
            ]
          ]
        }
      }
    ]
  };

  const data = [
    { city: 'San Francisco', lat: 37.77, lon: -122.42, requests: 128000 },
    { city: 'London', lat: 51.5, lon: -0.12, requests: 96000 },
    { city: 'Singapore', lat: 1.35, lon: 103.82, requests: 72000 },
    { city: 'Sydney', lat: -33.86, lon: 151.21, requests: 48000 }
  ];
</script>

<div class="w-full min-w-[280px] max-w-2xl">
  <BubbleMap
    {echarts}
    geoJson={world}
    mapName="demo-world"
    {data}
    lng="lon"
    lat="lat"
    name="city"
    value="requests"
    bubbleColor={ChartPalette.categorical(0)}
    valueFormat={(value) => `${value.toLocaleString()} requests`}
    height={320}
  />
</div>

Installation

BubbleMap requires echarts as a peer dependency.

npm install echarts

import { BubbleMap } from "kumo-svelte";

Usage

Use geoJson to register the map base and accessors to read longitude, latitude, label, and value from each row.

<script lang="ts">
  import * as echarts from 'echarts';
  import { BubbleMap, ChartPalette, type MapGeoJson } from 'kumo-svelte';

  const world: MapGeoJson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'world',
        properties: { name: 'World' },
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-170, -55],
              [170, -55],
              [170, 75],
              [-170, 75],
              [-170, -55]
            ]
          ]
        }
      }
    ]
  };

  const data = [
    { city: 'San Francisco', lat: 37.77, lon: -122.42, requests: 128000 },
    { city: 'London', lat: 51.5, lon: -0.12, requests: 96000 },
    { city: 'Singapore', lat: 1.35, lon: 103.82, requests: 72000 },
    { city: 'Sydney', lat: -33.86, lon: 151.21, requests: 48000 }
  ];
</script>

<div class="w-full min-w-[280px] max-w-2xl">
  <BubbleMap
    {echarts}
    geoJson={world}
    mapName="demo-world"
    {data}
    lng="lon"
    lat="lat"
    name="city"
    value="requests"
    bubbleColor={ChartPalette.categorical(0)}
    valueFormat={(value) => `${value.toLocaleString()} requests`}
    height={320}
  />
</div>

API Reference

Prop	Type	Default	Description
echarts *	`any`	-	The ECharts core instance imported by the consumer.
geoJson *	`MapGeoJson`	-	GeoJSON FeatureCollection for the map base.
mapName	`string`	-	Stable ECharts map registry name. Invalid characters are replaced with dashes.
data *	`T[]`	-	Rows to plot as bubbles.
lng *	`MapAccessor<T, number>`	-	Longitude accessor: a row key or function.
lat *	`MapAccessor<T, number>`	-	Latitude accessor: a row key or function.
value *	`MapAccessor<T, number>`	-	Numeric value accessor used to size bubbles.
name	`MapAccessor<T, string>`	-	Optional label accessor used by the default tooltip.
minRadius	`number`	`6`	Smallest bubble radius in pixels.
maxRadius	`number`	`26`	Largest bubble radius in pixels.
bubbleSize	`(value: number) => number`	-	Explicit bubble radius function. Overrides minRadius/maxRadius scaling.
bubbleColor	`MapStyle<T, string>`	-	Bubble fill color as a constant or row function.
bubbleBorderColor	`MapStyle<T, string>`	`"transparent"`	Bubble border color as a constant or row function.
bubbleBorderWidth	`MapStyle<T, number>`	`0`	Bubble border width as a constant or row function.
center	`[number, number]`	-	Map center as [longitude, latitude]. Defaults to auto-fit.
zoom	`number`	`1.25`	Zoom level as a multiple of the auto-fit scale.
roam	`boolean`	`true`	Enables drag-to-pan and scroll-to-zoom.
showTooltip	`boolean`	`true`	Whether to show the default map tooltip.
valueFormat	`(value: number) => string`	-	Formats values in the default tooltip.
tooltipFormatter	`(row: T) => string`	-	Custom HTML tooltip formatter. Escape user-provided strings before returning.
onBubbleHover	`(row: T \| undefined) => void`	-	Callback fired as the pointer enters or leaves a bubble.
onBubbleClick	`(row: T) => void`	-	Callback fired when a bubble is clicked.
height	`number`	`400`	Chart height in pixels.
isDarkMode	`boolean`	-	When true, switches map and bubble palette choices for dark mode.