Shapes

Draw polygons and circles on the map for boundaries, zones, and service areas.

Use MapPolygon to draw filled areas defined by a list of coordinates, and MapCircle to draw a circle with a given center and radius. Both support hover and click interactions and reactive style updates.

Example

The blue rectangle outlines a central Beijing area, the red polygon marks the Forbidden City, and the green circle shows a 500 m radius around Tiananmen. Hover or click each shape to identify it.

"use client";

import { useState } from "react";
import { Map, MapPolygon, MapCircle, MapControls } from "@/components/ui/map";

// Approximate boundary of the 2nd Ring Road area in Beijing
const beijingCityCenter: [number, number][] = [
  [116.3522, 39.9612],
  [116.4290, 39.9612],
  [116.4290, 39.8972],
  [116.3522, 39.8972],
];

// Forbidden City (approx)
const forbiddenCity: [number, number][] = [
  [116.3867, 39.9169],
  [116.4026, 39.9169],
  [116.4026, 39.9040],
  [116.3867, 39.9040],
];

export function PolygonExample() {
  const [activeArea, setActiveArea] = useState<string | null>(null);

  return (
    <div className="h-[400px] w-full">
      <Map center={[116.3900, 39.9100]} zoom={12.5}>
        <MapPolygon
          coordinates={beijingCityCenter}
          fillColor="#3b82f6"
          fillOpacity={0.15}
          strokeColor="#3b82f6"
          strokeWidth={2}
          onClick={() => setActiveArea("city-center")}
          onMouseEnter={() => setActiveArea("city-center")}
          onMouseLeave={() => setActiveArea(null)}
        />
        <MapPolygon
          coordinates={forbiddenCity}
          fillColor="#ef4444"
          fillOpacity={activeArea === "forbidden-city" ? 0.5 : 0.25}
          strokeColor="#ef4444"
          strokeWidth={2}
          onClick={() => setActiveArea("forbidden-city")}
          onMouseEnter={() => setActiveArea("forbidden-city")}
          onMouseLeave={() => setActiveArea(null)}
        />
        {/* 500m service radius around Tiananmen */}
        <MapCircle
          center={[116.3973, 39.9086]}
          radius={500}
          fillColor="#22c55e"
          fillOpacity={0.15}
          strokeColor="#22c55e"
          strokeWidth={2}
          onClick={() => setActiveArea("tiananmen")}
          onMouseEnter={() => setActiveArea("tiananmen")}
          onMouseLeave={() => setActiveArea(null)}
        />
        <MapControls />
        {activeArea && (
          <div className="absolute top-3 left-3 z-10 rounded-md bg-background/90 backdrop-blur border px-3 py-2 text-sm">
            {activeArea === "city-center" && "2nd Ring Road Area"}
            {activeArea === "forbidden-city" && "Forbidden City"}
            {activeArea === "tiananmen" && "Tiananmen — 500m radius"}
          </div>
        )}
      </Map>
    </div>
  );
}

MapPolygon

Draws a filled polygon on the map. Must be used inside Map. Requires at least 3 coordinate pairs.

Prop	Type	Default	Description
`coordinates`	`[number, number][]`	`—`	Array of [longitude, latitude] pairs defining the polygon (min 3 points).
`fillColor`	`string`	`"#3b82f6"`	Fill color (CSS color value).
`fillOpacity`	`number`	`0.3`	Fill opacity (0 to 1).
`strokeColor`	`string`	`"#3b82f6"`	Stroke/border color.
`strokeWidth`	`number`	`2`	Stroke width in pixels.
`strokeOpacity`	`number`	`0.8`	Stroke opacity (0 to 1).
`onClick`	`() => void`	`—`	Callback when the polygon is clicked.
`onMouseEnter`	`() => void`	`—`	Callback when the mouse enters the polygon.
`onMouseLeave`	`() => void`	`—`	Callback when the mouse leaves the polygon.

MapCircle

Draws a circle with a given center and radius. Must be used inside Map. Useful for service radius, geofencing, and proximity visualization.

Prop	Type	Default	Description
`center`	`[number, number]`	`—`	Circle center [longitude, latitude] in GCJ-02.
`radius`	`number`	`—`	Radius in meters.
`fillColor`	`string`	`"#3b82f6"`	Fill color.
`fillOpacity`	`number`	`0.2`	Fill opacity (0 to 1).
`strokeColor`	`string`	`"#3b82f6"`	Stroke color.
`strokeWidth`	`number`	`2`	Stroke width in pixels.
`strokeOpacity`	`number`	`0.8`	Stroke opacity (0 to 1).
`onClick`	`() => void`	`—`	Callback when the circle is clicked.
`onMouseEnter`	`() => void`	`—`	Callback when the mouse enters the circle.
`onMouseLeave`	`() => void`	`—`	Callback when the mouse leaves the circle.

PreviousClusters NextHeatmap