# MapLayerGroup

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

## MapLayerGroup

### 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 MapLayerGroup from '@rio-cloud/rio-uikit/MapLayerGroup';
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 { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import type { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';

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

    const markerIconTruck = <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />;
    const markerIconBus = <SingleMapMarker iconNames={['bus']} markerColor='bg-map-marker-asset' />;
    const markerIconVan = <SingleMapMarker iconNames={['van']} markerColor='bg-map-marker-asset' />;
    const markerIconTrailer = <SingleMapMarker iconNames={['trailer']} markerColor='bg-map-marker-asset' />;

    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}
        >
            <MapLayerGroup minZoom={9}>
                <Marker
                    position={{ lat: 48.1351, lng: 11.382 }}
                    icon={markerIconTruck}
                    eventListenerMap={eventListenerMap}
                />
                <Marker
                    position={{ lat: 48.1351, lng: 11.482 }}
                    icon={markerIconBus}
                    eventListenerMap={eventListenerMap}
                />
                <Marker
                    position={{ lat: 48.1351, lng: 11.582 }}
                    icon={markerIconVan}
                    eventListenerMap={eventListenerMap}
                />
                <Marker
                    position={{ lat: 48.1351, lng: 11.682 }}
                    icon={markerIconTrailer}
                    eventListenerMap={eventListenerMap}
                />
            </MapLayerGroup>
        </Map>
    );
};

export default MapLayerGroupExample;
```