# Polygon

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapPolygon
*Captured:* 2026-04-27T14:59:09.453Z

Polygons and isolines support click and hover interactions. A typical hover effect can be created by changing the outline via strokeColor and lineWidth in the hoverStyle.

## Polygon

### Example: Last map interaction

Terms of use © 1987–2026 HERE

200 m

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Last map interaction
{
"clicked": "none",
"eventType": "none"
}

#### React (tsx)

```tsx
import { useRef, useState } from 'react';

import Map from '@rio-cloud/rio-uikit/Map';
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
import Polygon, { colorMapMarker } from '@rio-cloud/rio-uikit/Polygon';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import Marker from '@rio-cloud/rio-uikit/Marker';
import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';

const STROKE_COLOR = colorMapMarker['color-map-marker-geofence'].stroke;
const FILL_COLOR = colorMapMarker['color-map-marker-geofence'].fill;

export default () => {
    const mapApiRef = useRef<MapApi>();
    const [eventData, setEventData] = useState<PolygonEventDebugData>();

    const position = { lat: 48.18009710294023, lng: 11.595117182551355 };

    const points = [
        {
            lat: 48.18209710294023,
            lng: 11.595137182551355,
            address: 'A',
        },
        {
            lat: 48.18119573935276,
            lng: 11.597476068812341,
            address: 'B',
        },
        {
            lat: 48.177132252764345,
            lng: 11.593699518519372,
            address: 'C',
        },
        {
            lat: 48.178162462939774,
            lng: 11.591360632258386,
            address: 'D',
        },
    ];

    const createTapHandler = (clicked: string) => (event: MapEvent) =>
        setEventData(getPolygonEventDebugData(clicked, event, mapApiRef.current));

    return (
        <>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={position}
                zoom={15}
                height={300}
                mapSettings={
                    <MapSettings
                        options={[
                            <MapTypeSettings
                                key='mapTypeSettings'
                                tooltip='Change map type'
                                dropdownHeaderText='Map views'
                                defaultTypeLabel='Default view'
                                truckTypeLabel='Truck view'
                                terrainTypeLabel='Terrain view'
                                satelliteTypeLabel='Satellite view'
                                nightTypeLabel='Night view'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    const polygonStyle = { strokeColor: STROKE_COLOR, fillColor: FILL_COLOR } as H.map.SpatialStyle;

                    return (
                        <>
                            <Polygon
                                points={points}
                                style={polygonStyle}
                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('polygon') }}
                            />
                            <Marker
                                position={{ lat: 48.18, lng: 11.5951 }}
                                icon={
                                    <SingleMapMarker
                                        name='Gefoence'
                                        iconNames={['geofence']}
                                        markerColor='bg-map-marker-geofence'
                                    />
                                }
                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('marker') }}
                            />
                        </>
                    );
                }}
            </Map>
            <PolygonEventDebug eventData={eventData} />
        </>
    );
};
```

#### Props: Polygon

### Polygon

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |

## Clickable polygons and isolines

### Example: geofence

Terms of use © 1987–2026 HERE

200 m

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Active polygon: geofence
Last map interaction
{
"clicked": "none",
"eventType": "none"
}

#### React (tsx)

```tsx
import { useRef, useState } from 'react';

import Map from '@rio-cloud/rio-uikit/Map';
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
import Polygon, { colorMapMarker, colorMapWarmup } from '@rio-cloud/rio-uikit/Polygon';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import Notification from '@rio-cloud/rio-uikit/Notification';
import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';

const geofencePoints = [
    { lat: 48.1842, lng: 11.5923 },
    { lat: 48.1824, lng: 11.5981 },
    { lat: 48.1778, lng: 11.5968 },
    { lat: 48.1786, lng: 11.5904 },
];

const isolinePoints = [
    { lat: 48.1862, lng: 11.6017 },
    { lat: 48.1836, lng: 11.6072 },
    { lat: 48.1798, lng: 11.6064 },
    { lat: 48.1774, lng: 11.6019 },
    { lat: 48.1805, lng: 11.5984 },
    { lat: 48.1844, lng: 11.5989 },
];

const position = { lat: 48.18009710294023, lng: 11.599117182551355 };

type PolygonId = 'geofence' | 'isoline';

export default () => {
    const mapApiRef = useRef<MapApi>();
    const [activePolygonId, setActivePolygonId] = useState<PolygonId>('geofence');
    const [eventData, setEventData] = useState<PolygonEventDebugData>();

    const createTapHandler = (polygonId: PolygonId) => (event: MapEvent) => {
        event.stopPropagation();
        setActivePolygonId(polygonId);
        setEventData(getPolygonEventDebugData(polygonId, event, mapApiRef.current));
        Notification.info(`${polygonId === 'geofence' ? 'Geofence' : 'Isoline'} clicked`);
    };

    return (
        <>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={position}
                zoom={15}
                height={320}
                mapSettings={
                    <MapSettings
                        options={[
                            <MapTypeSettings
                                key='mapTypeSettings'
                                tooltip='Change map type'
                                dropdownHeaderText='Map views'
                                defaultTypeLabel='Default view'
                                truckTypeLabel='Truck view'
                                terrainTypeLabel='Terrain view'
                                satelliteTypeLabel='Satellite view'
                                nightTypeLabel='Night view'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    return (
                        <>
                            <Polygon
                                points={geofencePoints}
                                style={{
                                    strokeColor:
                                        activePolygonId === 'geofence'
                                            ? colorMapWarmup['color-warmup-salmon'].stroke
                                            : colorMapMarker['color-map-marker-geofence'].stroke,
                                    fillColor: colorMapMarker['color-map-marker-geofence'].fill,
                                    lineWidth: activePolygonId === 'geofence' ? 4 : 2,
                                }}
                                hoverStyle={{
                                    strokeColor: colorMapWarmup['color-warmup-cherokee'].stroke,
                                    lineWidth: 5,
                                }}
                                eventListenerMap={{
                                    [EventUtils.TAP]: createTapHandler('geofence'),
                                }}
                            />
                            <Polygon
                                points={isolinePoints}
                                style={{
                                    strokeColor:
                                        activePolygonId === 'isoline'
                                            ? colorMapWarmup['color-warmup-cherokee'].stroke
                                            : colorMapWarmup['color-warmup-salmon'].stroke,
                                    fillColor: 'rgba(255, 255, 255, 0)',
                                    lineWidth: activePolygonId === 'isoline' ? 4 : 3,
                                    lineDash: [4, 2],
                                }}
                                hoverStyle={{
                                    strokeColor: colorMapMarker['color-map-marker-poi'].stroke,
                                    lineWidth: 4,
                                }}
                                eventListenerMap={{
                                    [EventUtils.TAP]: createTapHandler('isoline'),
                                }}
                            />
                        </>
                    );
                }}
            </Map>
            <div className='margin-top-15'>
                Active polygon: <strong>{activePolygonId}</strong>
            </div>
            <PolygonEventDebug eventData={eventData} />
        </>
    );
};
```

#### Props: Polygon

### Polygon

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |

### Example: Last map interaction

Color color-warmup-salmon Coldplay
color-coldplay-wine
color-coldplay-aubergine
color-coldplay-kashmir
color-coldplay-fountain
color-coldplay-turquoise
color-coldplay-bermuda
color-coldplay-moos
color-coldplay-primrose
color-coldplay-khaki
Warmup
color-warmup-crimson
color-warmup-victoria
color-warmup-cadillac
color-warmup-raspberry
color-warmup-cerise
color-warmup-charm
color-warmup-salmon
color-warmup-cherokee
color-warmup-corn
Gray
gray-darkest
gray-darker
gray-dark
gray
gray-light
gray-lighter
gray-lightest
gray-decent
Brand
brand-primary
brand-secondary
brand-info
brand-success
brand-warning
brand-danger
Status
color-status-available
color-status-driving
color-status-resting
color-status-working
Map Marker
color-map-marker-text
color-map-marker-active
color-map-marker-asset
color-map-marker-poi
color-map-marker-geofence
color-map-marker-route
color-map-marker-info
color-map-marker-success
color-map-marker-warning
color-map-marker-danger
Rating
color-rating-1
color-rating-2
color-rating-3
color-rating-4
color-rating-5
Highlight
color-highlight-darkest
color-highlight-darker
color-highlight-dark
color-highlight
color-highlight-light
color-highlight-lighter
color-highlight-lightest
color-highlight-decent

Terms of use © 1987–2026 HERE

50 km

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Last map interaction
{
"clicked": "none",
"eventType": "none"
}

#### React (tsx)

```tsx
import { useRef, useState } from 'react';

import Map from '@rio-cloud/rio-uikit/Map';
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import type { MapApi, MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import Marker from '@rio-cloud/rio-uikit/Marker';
import Polygon, {
    colorMapColdplay,
    colorMapWarmup,
    colorMapGray,
    colorMapBrand,
    colorMapStatus,
    colorMapMarker,
    colorMapRating,
    colorMapHighlight,
} from '@rio-cloud/rio-uikit/Polygon';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import { PolygonEventDebug, getPolygonEventDebugData, type PolygonEventDebugData } from './PolygonEventDebug';

type HeaderOption = {
    id: string;
    label: string;
    header: true;
};

type ColorOption = {
    id: string;
    label: string;
    colors: {
        stroke: string;
        fill: string;
    };
};

type ColorSelectOption = HeaderOption | ColorOption;

type ColorOptions = ColorSelectOption[];

const colorOptions: ColorOptions = [
    { id: 'coldplayHeader', label: 'Coldplay', header: true },
    ...Object.entries(colorMapColdplay).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'warmupHeader', label: 'Warmup', header: true },
    ...Object.entries(colorMapWarmup).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'grayHeader', label: 'Gray', header: true },
    ...Object.entries(colorMapGray).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'brandHeader', label: 'Brand', header: true },
    ...Object.entries(colorMapBrand).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'statusHeader', label: 'Status', header: true },
    ...Object.entries(colorMapStatus).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'markerHeader', label: 'Map Marker', header: true },
    ...Object.entries(colorMapMarker).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'ratingHeader', label: 'Rating', header: true },
    ...Object.entries(colorMapRating).map(([key, value]) => ({ id: key, label: key, colors: value })),

    { id: 'highlightHeader', label: 'Highlight', header: true },
    ...Object.entries(colorMapHighlight).map(([key, value]) => ({ id: key, label: key, colors: value })),
];

export default () => {
    const mapApiRef = useRef<MapApi>();
    const [eventData, setEventData] = useState<PolygonEventDebugData>();

    const [currentColor, setCurrentColor] = useState('color-warmup-salmon');

    const position = { lat: 48.18009710294023, lng: 11.595117182551355 };

    const points = isoline.points;

    const createTapHandler = (clicked: string) => (event: MapEvent) =>
        setEventData(getPolygonEventDebugData(clicked, event, mapApiRef.current));

    const handleSelectedColor = (item: SelectOption | undefined) => setCurrentColor(item?.id || '');

    const currentOption = colorOptions.find(colorOption => colorOption.id === currentColor) as ColorOption;

    return (
        <div>
            <div className='form-group'>
                <label htmlFor='1'>Color</label>
                <Select id='1' options={colorOptions} value={[currentColor]} onChange={handleSelectedColor} />
            </div>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={position}
                zoom={8}
                height={400}
                mapSettings={
                    <MapSettings
                        options={[
                            <MapTypeSettings
                                key='mapTypeSettings'
                                tooltip='Change map type'
                                dropdownHeaderText='Map views'
                                defaultTypeLabel='Default view'
                                truckTypeLabel='Truck view'
                                terrainTypeLabel='Terrain view'
                                satelliteTypeLabel='Satellite view'
                                nightTypeLabel='Night view'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    const polygonStyle = {
                        strokeColor: currentOption?.colors.stroke,
                        fillColor: currentOption?.colors.fill,
                    } as H.map.SpatialStyle;

                    return (
                        <>
                            <Polygon
                                points={points}
                                style={polygonStyle}
                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('isoline polygon') }}
                            />
                            <Marker
                                position={{ lat: 48.18, lng: 11.5951 }}
                                icon={
                                    <SingleMapMarker
                                        markerColor='bg-map-marker-poi'
                                        anchorSize='lg'
                                        clickable={false}
                                    />
                                }
                                eventListenerMap={{ [EventUtils.TAP]: createTapHandler('poi marker') }}
                            />
                        </>
                    );
                }}
            </Map>
            <PolygonEventDebug eventData={eventData} />
        </div>
    );
};

const isoline = {
    id: 'SRP_shape_1',
    type: 'POLYGON',
    strokeColor: 'rgba(90, 72, 118, 1)',
    fillColor: 'rgba(90, 72, 118, 0.3)',
    points: [
        {
            lat: 48.438721,
            lng: 10.717163,
        },
        {
            lat: 48.460693,
            lng: 10.733643,
        },
        {
            lat: 48.482666,
            lng: 10.799561,
        },
        {
            lat: 48.592529,
            lng: 10.909424,
        },
        {
            lat: 48.603516,
            lng: 10.942383,
        },
        {
            lat: 48.603516,
            lng: 11.030273,
        },
        {
            lat: 48.614502,
            lng: 11.063232,
        },
        {
            lat: 48.68042,
            lng: 11.085205,
        },
        {
            lat: 48.691406,
            lng: 11.118164,
        },
        {
            lat: 48.691406,
            lng: 11.162109,
        },
        {
            lat: 48.68042,
            lng: 11.195068,
        },
        {
            lat: 48.658447,
            lng: 11.217041,
        },
        {
            lat: 48.647461,
            lng: 11.25,
        },
        {
            lat: 48.647461,
            lng: 11.293945,
        },
        {
            lat: 48.636475,
            lng: 11.326904,
        },
        {
            lat: 48.614502,
            lng: 11.348877,
        },
        {
            lat: 48.614502,
            lng: 11.37085,
        },
        {
            lat: 48.68042,
            lng: 11.392822,
        },
        {
            lat: 48.724365,
            lng: 11.436768,
        },
        {
            lat: 48.735352,
            lng: 11.469727,
        },
        {
            lat: 48.724365,
            lng: 11.502686,
        },
        {
            lat: 48.702393,
            lng: 11.524658,
        },
        {
            lat: 48.702393,
            lng: 11.546631,
        },
        {
            lat: 48.724365,
            lng: 11.568604,
        },
        {
            lat: 48.735352,
            lng: 11.601563,
        },
        {
            lat: 48.735352,
            lng: 11.645508,
        },
        {
            lat: 48.724365,
            lng: 11.678467,
        },
        {
            lat: 48.702393,
            lng: 11.700439,
        },
        {
            lat: 48.691406,
            lng: 11.733398,
        },
        {
            lat: 48.691406,
            lng: 11.777344,
        },
        {
            lat: 48.68042,
            lng: 11.810303,
        },
        {
            lat: 48.614502,
            lng: 11.876221,
        },
        {
            lat: 48.614502,
            lng: 11.898193,
        },
        {
            lat: 48.636475,
            lng: 11.920166,
        },
        {
            lat: 48.647461,
            lng: 11.953125,
        },
        {
            lat: 48.636475,
            lng: 11.986084,
        },
        {
            lat: 48.614502,
            lng: 12.008057,
        },
        {
            lat: 48.603516,
            lng: 12.041016,
        },
        {
            lat: 48.603516,
            lng: 12.084961,
        },
        {
            lat: 48.592529,
            lng: 12.11792,
        },
        {
            lat: 48.548584,
            lng: 12.161865,
        },
        {
            lat: 48.515625,
            lng: 12.172852,
        },
        {
            lat: 48.482666,
            lng: 12.161865,
        },
        {
            lat: 48.460693,
            lng: 12.139893,
        },
        {
            lat: 48.427734,
            lng: 12.128906,
        },
        {
            lat: 48.394775,
            lng: 12.139893,
        },
        {
            lat: 48.383789,
            lng: 12.172852,
        },
        {
            lat: 48.383789,
            lng: 12.216797,
        },
        {
            lat: 48.372803,
            lng: 12.249756,
        },
        {
            lat: 48.35083,
            lng: 12.249756,
        },
        {
            lat: 48.328857,
            lng: 12.183838,
        },
        {
            lat: 48.306885,
            lng: 12.183838,
        },
        {
            lat: 48.284912,
            lng: 12.249756,
        },
        {
            lat: 48.251953,
            lng: 12.260742,
        },
        {
            lat: 48.164063,
            lng: 12.260742,
        },
        {
            lat: 48.131104,
            lng: 12.249756,
        },
        {
            lat: 48.109131,
            lng: 12.227783,
        },
        {
            lat: 48.087158,
            lng: 12.227783,
        },
        {
            lat: 48.065186,
            lng: 12.249756,
        },
        {
            lat: 48.043213,
            lng: 12.249756,
        },
        {
            lat: 48.02124,
            lng: 12.227783,
        },
        {
            lat: 47.955322,
            lng: 12.205811,
        },
        {
            lat: 47.93335,
            lng: 12.139893,
        },
        {
            lat: 47.911377,
            lng: 12.11792,
        },
        {
            lat: 47.889404,
            lng: 12.052002,
        },
        {
            lat: 47.823486,
            lng: 12.030029,
        },
        {
            lat: 47.823486,
            lng: 12.008057,
        },
        {
            lat: 47.845459,
            lng: 11.986084,
        },
        {
            lat: 47.856445,
            lng: 11.953125,
        },
        {
            lat: 47.856445,
            lng: 11.90918,
        },
        {
            lat: 47.845459,
            lng: 11.876221,
        },
        {
            lat: 47.823486,
            lng: 11.854248,
        },
        {
            lat: 47.8125,
            lng: 11.821289,
        },
        {
            lat: 47.823486,
            lng: 11.78833,
        },
        {
            lat: 47.845459,
            lng: 11.766357,
        },
        {
            lat: 47.845459,
            lng: 11.744385,
        },
        {
            lat: 47.779541,
            lng: 11.722412,
        },
        {
            lat: 47.779541,
            lng: 11.700439,
        },
        {
            lat: 47.801514,
            lng: 11.678467,
        },
        {
            lat: 47.8125,
            lng: 11.645508,
        },
        {
            lat: 47.801514,
            lng: 11.612549,
        },
        {
            lat: 47.735596,
            lng: 11.546631,
        },
        {
            lat: 47.724609,
            lng: 11.513672,
        },
        {
            lat: 47.724609,
            lng: 11.337891,
        },
        {
            lat: 47.735596,
            lng: 11.304932,
        },
        {
            lat: 47.757568,
            lng: 11.282959,
        },
        {
            lat: 47.768555,
            lng: 11.25,
        },
        {
            lat: 47.757568,
            lng: 11.217041,
        },
        {
            lat: 47.735596,
            lng: 11.195068,
        },
        {
            lat: 47.724609,
            lng: 11.162109,
        },
        {
            lat: 47.735596,
            lng: 11.12915,
        },
        {
            lat: 47.757568,
            lng: 11.107178,
        },
        {
            lat: 47.779541,
            lng: 11.04126,
        },
        {
            lat: 47.845459,
            lng: 11.019287,
        },
        {
            lat: 47.856445,
            lng: 10.986328,
        },
        {
            lat: 47.856445,
            lng: 10.942383,
        },
        {
            lat: 47.867432,
            lng: 10.909424,
        },
        {
            lat: 47.900391,
            lng: 10.898438,
        },
        {
            lat: 47.944336,
            lng: 10.898438,
        },
        {
            lat: 47.977295,
            lng: 10.887451,
        },
        {
            lat: 47.988281,
            lng: 10.854492,
        },
        {
            lat: 47.988281,
            lng: 10.766602,
        },
        {
            lat: 47.999268,
            lng: 10.733643,
        },
        {
            lat: 48.032227,
            lng: 10.722656,
        },
        {
            lat: 48.065186,
            lng: 10.733643,
        },
        {
            lat: 48.087158,
            lng: 10.799561,
        },
        {
            lat: 48.109131,
            lng: 10.799561,
        },
        {
            lat: 48.131104,
            lng: 10.733643,
        },
        {
            lat: 48.164063,
            lng: 10.722656,
        },
        {
            lat: 48.208008,
            lng: 10.722656,
        },
        {
            lat: 48.240967,
            lng: 10.733643,
        },
        {
            lat: 48.262939,
            lng: 10.755615,
        },
        {
            lat: 48.284912,
            lng: 10.755615,
        },
        {
            lat: 48.306885,
            lng: 10.733643,
        },
        {
            lat: 48.372803,
            lng: 10.71167,
        },
        {
            lat: 48.394775,
            lng: 10.689697,
        },
        {
            lat: 48.416748,
            lng: 10.684204,
        },
        {
            lat: 48.438721,
            lng: 10.717163,
        },
    ],
};
```

#### Props: Polygon

### Polygon

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| points | PolygonPoints | — | Ordered geographic positions that define the polygon geometry. |
| style | PolygonStyle | H.map.SpatialStyle.DEFAULT_STYLE | Visual style applied to the polygon. |
| hoverStyle | PolygonStyle | — | Style overrides applied while the polygon is hovered. |
| eventListenerMap | EventListenerMap | — | Event handlers attached to the polygon. |
| cursor | CSSProperties['cursor'] | — | Cursor shown while hovering the polygon. If omitted, clickable polygons automatically use pointer. |