Search, filter, and timeline controls

The controls module connects your existing HTML to a globe. It does not inject markup or impose a design system. Every function returns an unbind function.

import { searchAndFly, thresholdFilter } from "canvas-globe/controls";

const stopSearch = searchAndFly(globe, document.querySelector("#place-search"));
const stopFilter = thresholdFilter(globe, document.querySelector("#minimum"), {
  field: "count",
});

// Call during component cleanup.
stopSearch();
stopFilter();

searchAndFly

searchAndFly(globe, input, options) moves the camera when a visitor enters a matching marker, country, or city.

Resolution order:

1. Current globe markers
2. Bundled countries
3. The core city gazetteer
4. Your gazetteer option
5. Your synchronous or asynchronous source function

import { placeSource } from "canvas-globe/places";

const unbind = searchAndFly(globe, input, {
  source: placeSource({ limit: 8 }),
  zoom: 3,
  onMatch: (place) => console.log(place.label),
});

Slow responses to older queries are ignored, so an earlier request cannot move the camera after the visitor has typed something else.

timelineBrush

timelineBrush(globe, slider, options) shows markers whose date is at or before the selected time.

timelineBrush(globe, slider, {
  field: "launchedAt",
  onChange: (visibleMarkers, date) => updateLabel(date),
});

thresholdFilter

thresholdFilter(globe, slider, options) keeps markers at or above a numeric cutoff.

thresholdFilter(globe, slider, {
  field: "revenue",
  onChange: (visibleMarkers, minimum) => updateCount(visibleMarkers.length),
});

crossfilter

crossfilter(globe, container, options) filters markers from controls inside a container. Use it for region, customer type, product, status, or another marker field.

crossfilter(globe, document.querySelector("#regions"), {
  attribute: "region",
  active: "is-active",
});

The controls module is about 2 KB gzipped and has no framework dependency.

Review pricing and production licensing.