json-maps

Component Slots

Replace the default marker, popup, tooltip, and layer tooltip components with your own.

Usage

import { MapRenderer, type MarkerComponentProps } from "json-maps";

function CustomMarker({ marker, color }: MarkerComponentProps) {
  return (
    <div style={{
      width: 32,
      height: 32,
      borderRadius: "50%",
      background: color,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: "white",
      fontSize: 14,
      fontWeight: "bold",
    }}>
      {marker.label?.[0] ?? "·"}
    </div>
  );
}

<MapRenderer
  spec={spec}
  components={{ Marker: CustomMarker }}
/>

Available Slots

Pass any combination of custom components via the components prop:

components?: {
  Marker?: React.ComponentType<MarkerComponentProps>;
  Popup?: React.ComponentType<PopupComponentProps>;
  Tooltip?: React.ComponentType<TooltipComponentProps>;
  LayerTooltip?: React.ComponentType<LayerTooltipComponentProps>;
}

Any slot you don't provide uses the built-in default.

Marker

Renders the visual element for each marker on the map. This is also how you use custom icon libraries — the default marker uses 21 built-in icons, but a custom Marker component can render any icon.

interface MarkerComponentProps {
  id: string;           // marker key from spec
  marker: MarkerSpec;   // full marker spec (includes icon, label, etc.)
  color: string;        // resolved color (defaults applied)
}

Example: Using a custom icon library

import { HeroIcon } from "@heroicons/react/24/solid";

function CustomMarker({ marker, color }: MarkerComponentProps) {
  return (
    <div style={{ background: color, borderRadius: "50%", padding: 6 }}>
      <HeroIcon name={marker.icon} className="w-4 h-4 text-white" />
    </div>
  );
}

<MapRenderer spec={spec} components={{ Marker: CustomMarker }} />

Popup

Renders the popup content shown when a marker is clicked.

interface PopupComponentProps {
  id: string;
  marker: MarkerSpec;
}

Return null if the marker has no popup.

Tooltip

Renders the hover tooltip for markers.

interface TooltipComponentProps {
  id: string;
  text: string;   // the tooltip string from the marker spec
}

Layer Tooltip

Renders the hover tooltip for GeoJSON features and route layers.

interface LayerTooltipComponentProps {
  properties: Record<string, unknown>;  // feature properties
  columns: string[];                     // which properties to display
}

Defaults

The built-in defaults are exported so you can extend them:

import {
  DefaultMarker,
  DefaultPopup,
  DefaultTooltip,
  DefaultLayerTooltip,
} from "json-maps";