# Map

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

## 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 { useRef, useState } from 'react';

import Notification from '@rio-cloud/rio-uikit/Notification';
import Map from '@rio-cloud/rio-uikit/Map';
import ContextMenu, { isMapTarget } from '@rio-cloud/rio-uikit/ContextMenu';
import ContextMenuItem from '@rio-cloud/rio-uikit/ContextMenuItem';
import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
import Marker from '@rio-cloud/rio-uikit/Marker';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';
import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';
import MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';
import MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';
import Circle from '@rio-cloud/rio-uikit/Circle';
import type { MapApi, MapContextMenuEvent, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';

const formatCoordinates = (coordinates: Position) =>
    [
        Math.abs(Number(coordinates.lat.toFixed(4))) + (coordinates.lat > 0 ? 'N' : 'S'),
        Math.abs(Number(coordinates.lng.toFixed(4))) + (coordinates.lng > 0 ? 'E' : 'W'),
    ].join(' ');

const notifyCoordinates = (coordinates: Position) => Notification.info(JSON.stringify(coordinates));

type ContextMenuData = {
    target?: string;
    event?: MapContextMenuEvent;
    targetPosition?: Position;
};

const ContextMenuExample = () => {
    const munichCoord = { lat: 48.1351, lng: 11.582 };
    const markerPosition = { lat: 48.1351, lng: 11.382 };
    const circlePosition = { lat: 48.2351, lng: 11.482 };

    const [contextMenuData, setContextMenuData] = useState<ContextMenuData>({});

    const [mapCenter, setMapCenter] = useState<Position>(munichCoord);
    const [coordLabel, setCoordLabel] = useState<string>('');

    const [showSpinner, setShowSpinner] = useState(true);

    const mapApiRef = useRef<MapApi>();

    // The onOpen callback will receive the coordinates of the context menu unless the "targetPosition"
    // prop is defined whereas in that case the context menu coordinates are ignored and the provided
    // targetPosition is returned
    const handleOpenContextMenu = (contextMenuCoordinates: Position) => {
        setShowSpinner(true);

        // Resolve the coordinates to an address but for demo purpose we show the coordinates
        console.log(contextMenuCoordinates);
        setCoordLabel(formatCoordinates(contextMenuCoordinates));

        // remove the spinner after some time to showcase the sinner in the UI and to simulate an async event
        setTimeout(() => setShowSpinner(false), 1000);
    };

    const centerMap = (coordinates: Position /* , hereMap*/) => setMapCenter(coordinates);

    const markerEventListenerMap = {
        [EventUtils.TAP]: (event: MapEvent) => {
            // Note: if there is a "TAP" event defined make sure to block the event for right mouse button otherwise
            // the right click will also trigger the tap callback and may cause unwanted selection
            if (EventUtils.isRightClick(event)) {
                event.stopPropagation();
                return;
            }
            console.log(event);
        },
        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
            // "target" is used to decide what context menu items shall be shown
            // "event" is used to add the menu items to it
            // "targetPosition" is used to return a fixed position on context menu open or in the item callback
            setContextMenuData({ target: 'marker', event, targetPosition: markerPosition });
        },
    };

    const circleEventListenerMap = {
        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
            setContextMenuData({ target: 'circle', event, targetPosition: circlePosition });
        },
    };

    // Register a context menu event listener for the map itself in order to show
    // only map related context menu entries
    const mapEventListenerMap = {
        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
            if (isMapTarget(event, mapApiRef.current)) {
                setContextMenuData({ target: 'map', event, targetPosition: circlePosition });
            }
        },
    };

    // Define some context menu entries that are always available when opening
    const positionItem = (
        <ContextMenuItem
            key='1'
            className='text-color-darker cursor-default'
            labelClassName='text-medium'
            label={coordLabel}
            icon='rioglyph-map-marker'
            hasSpinner={showSpinner}
        />
    );

    const centerMapItem = (
        <ContextMenuItem key='2' icon='rioglyph-position' label='Center map here' callback={centerMap} />
    );

    let contextMenuItems = [];

    // Add context related menu items like when clicking on a map object.
    // This differentiation may vary for your use case. This is just for demo purposes.
    switch (contextMenuData.target) {
        case 'circle':
            contextMenuItems = [
                positionItem,
                centerMapItem,
                <ContextMenuItem key='removeCircle' label='Remove circle' disabled />,
            ];
            break;
        case 'marker':
            contextMenuItems = [
                positionItem,
                centerMapItem,
                <ContextMenuItem key='startRoute' label='<b>Start here</b>' callback={notifyCoordinates} />,
            ];
            break;
        default:
            contextMenuItems = [
                positionItem,
                centerMapItem,
                <ContextMenuItem
                    key='zoomHere'
                    label='Zoom to this location'
                    callback={() => {
                        if (mapApiRef.current?.utils) {
                            const zoom = mapApiRef.current.utils.getZoom() + 3;
                            mapApiRef.current.utils.setZoom(zoom >= 19 ? 19 : zoom, false);
                        }
                    }}
                />,
            ];
            break;
    }

    return (
        <div className='height-300'>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={mapCenter}
                zoom={10}
                eventListenerMap={mapEventListenerMap}
                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'
                            />,
                            <MapLayerSettings
                                key='mapLayerSettings'
                                layers={[
                                    <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,
                                    <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,
                                    <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,
                                    <MapLayerRoadRestrictionsItem
                                        key='mapLayerRoadRestrictionsItem'
                                        label='Road restrictions'
                                    />,
                                ]}
                                tooltip='Toggle various map overlays'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    return (
                        <>
                            <Marker
                                position={markerPosition}
                                icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
                                eventListenerMap={markerEventListenerMap}
                            />
                            <Circle
                                position={circlePosition}
                                radius={5000}
                                style={{ strokeColor: '#f0f' }}
                                precision={30}
                                eventListenerMap={circleEventListenerMap}
                            />
                            <ContextMenu
                                onOpen={handleOpenContextMenu}
                                menuItems={contextMenuItems}
                                contextMenuEvent={contextMenuData.event}
                                targetPosition={contextMenuData.targetPosition}
                            />
                        </>
                    );
                }}
            </Map>
        </div>
    );
};

export default ContextMenuExample;
```

#### Props: ContextMenu

### ContextMenu

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |
| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |

#### Props: ContextMenuItem

### ContextMenuItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label | String | — | The actual label text. |
| disabled | Boolean | — | Defines whether or not the item is disabled. |
| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |
| icon | String | — | The name of the icon added to the label. |
| callback | Function | — | Callback function that is called when clicking on the item. |
| labelClassName | String | — | Additional classes added to the label element. |
| className | String | — | Additional classes added to the wrapper element. |