# Map

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

The following map shows labels for locale de

## Map

### 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 { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const position = { lat: 48.1351, lng: 11.582 };

const MapExample = () => (
    <div className='height-300'>
        <Map
            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
            center={position}
            zoom={10}
            hideMapSettings
        />
    </div>
);

export default MapExample;
```

#### Props: Map props

### Map props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| credentials | MapCredentials | — | HERE credentials used to initialize the map platform. |
| height | number | — | Height of the map container. |
| width | number | — | Width of the map container. |
| language | string | 'en' | Language used for HERE map labels and controls. |
| center | Position | — | Initial center position of the map. |
| zoom | number | — | Initial or controlled zoom level of the map. |
| boundingBox | BoundingBox | — | Bounding box that should be fitted by the map view. |
| disableMapEvents | boolean | — | Disables HERE map events entirely. |
| disableBehavior | boolean | false | Disables the default HERE map behavior such as pan and zoom interaction. |
| disableZoomMomentum | boolean | true | Disables HERE zoom momentum to reduce scroll inertia on zoom. |
| eventListenerMap | EventListenerMap | — | Event listeners attached to the HERE map instance. |
| hideMapSettings | boolean | — | Legacy prop for hiding map settings. |
| hideClusterSettings | boolean | false | Hides the cluster settings entry in the map settings UI. |
| hideMapLayerSettings | boolean | false | Hides the map layer settings entry in the map settings UI. |
| mapType | MapType | Map.TYPE_DEFAULT | Base map type to render. |
| mapLayer | MapLayer[] | [] | Active overlay layers such as traffic or incidents. |
| showCluster | boolean | true | Controls whether marker clustering is enabled. |
| showScaleBar | boolean | false | Shows the HERE scale bar. |
| onMapTypeChange | (type: MapType, previousType?: MapType) => void | — | Callback fired when the map type changes. |
| onMapLayerChange | (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void | — | Callback fired when the active map layers change. |
| onShowClusterChange | (show: boolean) => void | — | Callback fired when the cluster visibility changes. |
| onZoomIn | (zoom: number) => void | — | Callback fired when zooming in via the built-in zoom controls. |
| onZoomOut | (zoom: number) => void | — | Callback fired when zooming out via the built-in zoom controls. |
| onIncidentsChange | (incidentsResult: MapIncidents) => void | — | Callback used by incidents overlays to report fetched incidents. |
| mapSettingsTooltip | string \| React.ReactNode | — | Tooltip content for the map settings entry. |
| mapSettings | React.ReactNode | — | Custom settings UI rendered on top of the map. |
| zoomAnimation | boolean | false | Enables animation when zoom or center changes are applied programmatically. |
| maxViewportHistoryEntries | number | 5 | Maximum number of previous map viewports stored for viewport history. |
| enableWebGL | boolean | true | Enables the WebGL/HARP rendering engine where supported. |
| enableDevicePixelRatio | boolean | true | Uses window.devicePixelRatio for map rendering. |
| enableMarkerIconCache | boolean | true | Enables caching for generated marker icons. |
| enableFractionalZoom | boolean | false | Keeps HERE fractional zoom enabled for smoother trackpad and wheel zoom interaction. |
| disableMarkerPointerEventsWhileZooming | boolean | false | Temporarily disables marker pointer events during zoom interactions to reduce DOM hit-testing overhead. |
| pixelRatio | number | — | Fallback pixel ratio used when device pixel ratio support is disabled. |
| minZoom | number | — | Minimum allowed zoom level. |
| maxZoom | number | — | Maximum allowed zoom level. |
| children | React.ReactNode \| ((api: MapApi, incidents?: MapIncidents) => React.ReactNode) | — | Map content or a render function receiving the map API. |

## Map with ScaleBar

### Example: Example 2

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 { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const position = { lat: 48.1351, lng: 11.582 };

const MapWithScaleBarExample = () => (
    <div className='height-300'>
        <Map
            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
            center={position}
            zoom={10}
            hideMapSettings
            showScaleBar
        />
    </div>
);

export default MapWithScaleBarExample;
```

## Map localization

### Example: Example 3

Terms of use © 1987–2026 HERE

10 km

Ansicht auswählen
Kartenansicht
Satellit

Verkehrslage
Verkehrsstörungen anzeigen

#### React (tsx)

```tsx
import Map from '@rio-cloud/rio-uikit/Map';
import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const position = { lat: 48.1351, lng: 11.582 };

const MapLocalizationExample = () => (
    <div className='height-300'>
        <Map
            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
            language='de'
            center={position}
            zoom={10}
            hideMapSettings
        />
    </div>
);

export default MapLocalizationExample;
```