Choropleth

First, make sure you have the base map component installed:

npx shadcn@latest add https://www.terrae.dev/map.json

Then install the choropleth component:

npx shadcn@latest add https://www.terrae.dev/choropleth.json

The colorScale prop defines how values map to colors. You can use linear interpolation for smooth gradients or step for discrete color bands.

const colorScale = {
  stops: [
    { value: 0, color: "#f7fbff" },
    { value: 100, color: "#6baed6" },
    { value: 500, color: "#08519c" },
  ],
  interpolation: "linear",
}

Enable hover highlighting with hoverEnabled and handle clicks with onClick. Click on a province to see details in a popup.

World countries colored by population using Tailwind CSS blue gradient colors. The popup also uses Tailwind gradient styling.

Enable animated neon gradient fill with neonAnimated. The fill color smoothly transitions through the specified colors in a continuous loop. Customize the colors with neonColors and the animation duration with neonDuration.