# Circle

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapCircle
*Captured:* 2026-04-27T14:58:55.503Z

## Circle

### Example: Example 1

Terms of use © 1987–2026 HERE

10 km

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

#### React (tsx)

```tsx
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 Circle from '@rio-cloud/rio-uikit/Circle';
import type { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const STROKE_COLOR = 'rgba(90, 72, 118, 1)';
const FILL_COLOR = 'rgba(90, 72, 118, 0.3)';

const CircleExample = () => {
    const position = { lat: 48.1351, lng: 11.582 };

    const eventListenerMap = {
        [EventUtils.TAP]: (event: MapEvent) => console.log(event),
    };

    return (
        <Map
            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
            center={position}
            zoom={10}
            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'
                        />,
                    ]}
                />
            }
        >
            <Circle
                position={position}
                radius={5_000}
                style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}
                precision={30}
                eventListenerMap={eventListenerMap}
            />
        </Map>
    );
};

export default CircleExample;
```