Skip to main content
MapCircle(props: MapCircleProps): Component;
​
latitude
number
required
Center latitude of the circle.
​
longitude
number
required
Center longitude of the circle.
​
radius
number
Radius of the circle in meters.
​
fill
Component
Fill color for the circle. Pass a Color value, e.g. Color("blue").
​
fillOpacity
number
Opacity of the fill color, from 0 (transparent) to 1 (opaque).
​
stroke
Component
Stroke color for the circle outline. Pass a Color value.
​
lineWidth
number
Width of the stroke outline in points.

​
Support

​
Usage

​
Basic circle

Map({ latitude: 37.7749, longitude: -122.4194, distance: 10000 }, [
    MapCircle({ latitude: 37.7749, longitude: -122.4194, radius: 2000 })
])

​
Styled circle

Map({ latitude: 37.7749, longitude: -122.4194, distance: 10000 }, [
    MapCircle({
        latitude: 37.7749,
        longitude: -122.4194,
        radius: 1500,
        fill: Color("blue"),
        fillOpacity: 0.2,
        stroke: Color("blue"),
        lineWidth: 2
    })
])

​
Multiple radius rings

Map({ latitude: 37.7749, longitude: -122.4194, distance: 20000 }, [
    MapCircle({
        latitude: 37.7749, longitude: -122.4194,
        radius: 1000, fill: Color("red"), fillOpacity: 0.3
    }),
    MapCircle({
        latitude: 37.7749, longitude: -122.4194,
        radius: 3000, fill: Color("orange"), fillOpacity: 0.2
    }),
    MapCircle({
        latitude: 37.7749, longitude: -122.4194,
        radius: 5000, fill: Color("yellow"), fillOpacity: 0.1
    }),
    Marker({ latitude: 37.7749, longitude: -122.4194, title: "Center" })
])

​
See Also