Skip to main content
MapPolygon(props: MapPolygonProps): Component;
​
coordinates
{ latitude: number; longitude: number }[]
required
An array of coordinate points that define the polygon’s vertices. The polygon is automatically closed.
​
fill
Component
Fill color for the polygon interior. 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 polygon outline. Pass a Color value.
​
lineWidth
number
Width of the stroke outline in points.

​
Support

​
Usage

​
Basic polygon

Map({ latitude: 37.7749, longitude: -122.4194, distance: 10000 }, [
    MapPolygon({
        coordinates: [
            { latitude: 37.79, longitude: -122.43 },
            { latitude: 37.79, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.43 }
        ]
    })
])

​
Styled zone overlay

Map({ latitude: 37.7749, longitude: -122.4194, distance: 10000 }, [
    MapPolygon({
        coordinates: [
            { latitude: 37.79, longitude: -122.43 },
            { latitude: 37.79, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.43 }
        ],
        fill: Color("green"),
        fillOpacity: 0.2,
        stroke: Color("green"),
        lineWidth: 2
    })
])

​
Multiple zones

Map({ latitude: 37.7749, longitude: -122.4194, distance: 15000 }, [
    MapPolygon({
        coordinates: [
            { latitude: 37.79, longitude: -122.43 },
            { latitude: 37.79, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.40 },
            { latitude: 37.76, longitude: -122.43 }
        ],
        fill: Color("blue"),
        fillOpacity: 0.15,
        stroke: Color("blue"),
        lineWidth: 1
    }),
    MapPolygon({
        coordinates: [
            { latitude: 37.80, longitude: -122.28 },
            { latitude: 37.80, longitude: -122.25 },
            { latitude: 37.78, longitude: -122.25 },
            { latitude: 37.78, longitude: -122.28 }
        ],
        fill: Color("red"),
        fillOpacity: 0.15,
        stroke: Color("red"),
        lineWidth: 1
    })
])

​
See Also