# Map settings

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

## Map settings

### Example: Example 1

Terms of use © 1987–2026 HERE

20 km

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Map Type Day Day
Fleet style
Satellite
Terrain
Night

Map Layer Please select... Incidents
Traffic
Road restrictions

Language English English
German
Polish

Zoom

Min zoom

Max zoom

Map center Reset position

Cluster Show cluster
Rendering WebGL vector tiles
Use device pixel ratio

Map center N48° 30.000′ E12° 6.000′

#### React (tsx)

```tsx
import type React from 'react';
import { useState, useRef, useMemo } from 'react';
import { isEqual, without } from 'es-toolkit/compat';

import classNames from '@rio-cloud/rio-uikit/classNames';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Map from '@rio-cloud/rio-uikit/Map';
import Polygon from '@rio-cloud/rio-uikit/Polygon';
import Route from '@rio-cloud/rio-uikit/Route';
import Circle from '@rio-cloud/rio-uikit/Circle';
import Marker from '@rio-cloud/rio-uikit/Marker';
import InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';
import MarkerLayer, { type SimpleClusterTheme } from '@rio-cloud/rio-uikit/MarkerLayer';
import EventUtils, { type EventListenerMap } from '@rio-cloud/rio-uikit/EventUtils';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapSettingsItem from '@rio-cloud/rio-uikit/MapSettingsItem';
import MapClusterSettings from '@rio-cloud/rio-uikit/MapClusterSettings';
import MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';
import MapAdditionalLayerSettings from '@rio-cloud/rio-uikit/MapAdditionalLayerSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';
import MapCustomerPoiSettingsItem from '@rio-cloud/rio-uikit/MapCustomerPoiSettingsItem';
import MapWorkshopPoiSettingsItem from '@rio-cloud/rio-uikit/MapWorkshopPoiSettingsItem';
import MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';
import MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';
import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';
import MapBoundingBoxButton from '@rio-cloud/rio-uikit/MapBoundingBoxButton';
import MapCenterMarkerButton from '@rio-cloud/rio-uikit/MapCenterMarkerButton';
import MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';
import MapPreviousViewportButton from '@rio-cloud/rio-uikit/MapPreviousViewportButton';
import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
import NumberControl from '@rio-cloud/rio-uikit/NumberControl';
import Position from '@rio-cloud/rio-uikit/Position';
import Button from '@rio-cloud/rio-uikit/Button';
import type {
    MapApi,
    MapEvent,
    MapIncidents,
    MapLayer,
    MapType,
    Position as MapPosition,
    IncidentDataPoint,
} from '@rio-cloud/rio-uikit/mapTypes';

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

import {
    markerPosition,
    polygonPoints,
    STROKE_COLOR,
    FILL_COLOR,
    routePoints,
    circlePosition,
    generateClusterData,
    type Asset,
} from './demoData';
import {
    DEFAULT_MAX_ZOOM,
    DEFAULT_MIN_ZOOM,
    MAP_LAYER_INCIDENTS,
} from '@rio-cloud/rio-uikit/components/map/components/constants';

const WORKSHOP_POIS = 'WORKSHOP_POIS';
const CUSTOMER_POIS = 'CUSTOMER_POIS';
const GEOFENCES = 'GEOFENCES';
const CHARGING_STATIONS = 'CHARGING_STATIONS';

const initialPosition = { lat: 48.5, lng: 12.1 };

const mapTypeOptions: SelectOption[] = [
    { id: Map.TYPE_DEFAULT, label: 'Day' },
    { id: Map.TYPE_FLEET_STYLE, label: 'Fleet style' },
    { id: Map.TYPE_SATELLITE, label: 'Satellite' },
    { id: Map.TYPE_TERRAIN, label: 'Terrain' },
    { id: Map.TYPE_NIGHT, label: 'Night' },
];

const mapLayerOptions: SelectOption[] = [
    { id: Map.LAYER_INCIDENTS, label: 'Incidents' },
    { id: Map.LAYER_TRAFFIC, label: 'Traffic' },
    { id: Map.LAYER_ROAD_RESTRICTIONS, label: 'Road restrictions' },
];

const languageOptions: SelectOption[] = [
    { id: 'en', label: 'English' },
    { id: 'de-DE', label: 'German' },
    { id: 'pl', label: 'Polish' },
];

const addOrRemove = (layers: string[], value: string) =>
    layers.includes(value) ? without(layers, value) : [...layers, value];

const FullSettingsExample = () => {
    const [mapType, setMapType] = useState<MapType | undefined>(Map.TYPE_DEFAULT);
    const [mapLayer, setMapLayer] = useState<MapLayer[]>([]);
    const [showCluster, setShowCluster] = useState(true);
    const [currentZoom, setCurrentZoom] = useState(9);
    const [center, setCenter] = useState(initialPosition);
    const [enableWebGL, setEnableWebGL] = useState(true);
    const [enableDevicePixelRatio, setEnableDevicePixelRatio] = useState(true);
    const [language, setLanguage] = useState('en');

    const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);
    const [maxZoom, setMaxZoom] = useState(DEFAULT_MAX_ZOOM);

    const [clusterData, setClusterData] = useState(generateClusterData(10));
    const [activePoiLayers, setActivePoiLayers] = useState<string[]>([]);
    const [activeTrafficLayers, setActiveTrafficLayers] = useState<string[]>([]);
    const [showCustomerPois, setShowCustomerPois] = useState(false);
    const [showWorkshopPois, setShowWorkshopPois] = useState(false);
    const [showGeofences, setShowGeofences] = useState(false);
    const [showChargingStations, setShowChargingStations] = useState(false);

    const [mapTypeOptionId, setMapTypeOptionId] = useState<MapType | undefined>(Map.TYPE_DEFAULT);
    const [mapLayerOptionIds, setMapLayerOptionIds] = useState<string[]>([]);
    const [showClusterOption, setShowClusterOption] = useState(true);

    const [incidents, setIncidents] = useState<MapIncidents>();

    const mapApiRef = useRef<MapApi>();

    const handleToggleCustomerPois = () => {
        setShowCustomerPois(!showCustomerPois);
        setActivePoiLayers(addOrRemove(activePoiLayers, CUSTOMER_POIS));
    };

    const handleToggleWorkshopPois = () => {
        setShowWorkshopPois(!showWorkshopPois);
        setActivePoiLayers(addOrRemove(activePoiLayers, WORKSHOP_POIS));
    };

    const handleToggleGeofences = () => {
        setShowGeofences(!showGeofences);
        setActivePoiLayers(addOrRemove(activePoiLayers, GEOFENCES));
    };

    const handleToggleChargingStations = () => {
        setShowChargingStations(!showChargingStations);
        setActivePoiLayers(addOrRemove(activePoiLayers, CHARGING_STATIONS));
    };

    const layers = [
        <MapSettingsDropdownHeader key='dividerPois' label='POIs & Layers' />,
        <MapSettingsChargingStationsItem
            key='chargingStations'
            isActive={showChargingStations}
            onToggle={handleToggleChargingStations}
            label='Charging stations'
        />,
        <MapSettingsGeofenceItem
            key='geofences'
            isActive={showGeofences}
            onToggle={handleToggleGeofences}
            label='Geofences'
        />,
        <MapWorkshopPoiSettingsItem
            key='mapWorkshopPoiSettingsItem'
            isActive={showWorkshopPois}
            onToggle={handleToggleWorkshopPois}
            label='Workshop POIs'
        />,
        <MapCustomerPoiSettingsItem
            key='mapCustomerPoiSettingsItem'
            isActive={showCustomerPois}
            onToggle={handleToggleCustomerPois}
            label='Custom POIs'
        />,
    ];

    const trafficLayers = [
        <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,
        <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,
        <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,
        <MapLayerRoadRestrictionsItem key='mapLayerRoadRestrictionsItem' label='Road restrictions' />,
    ];

    const handleToggleBoundingBox = () => Notification.info('MapBoundingBoxButton clicked');
    const handleToggleCenterMarker = () => {
        Notification.info('MapCenterMarkerButton clicked');
        setCenter(markerPosition);
    };

    // Update selects to reflect changes made in the map settings
    const handleMapTypeChanged = (baseLayer: MapType) => setMapTypeOptionId(baseLayer);
    const handleMapLayerChanged = (activeLayerIds: string[]) => setMapLayerOptionIds(activeLayerIds);
    const handleClusterChanged = (cluster: boolean) => setShowClusterOption(cluster);

    // Set the select value and update the map with the new setting
    const handleChangeMapType = (selectedMapType: SelectOption | undefined) => {
        setMapType(selectedMapType?.id as MapType);
        setMapTypeOptionId(selectedMapType?.id as MapType);
    };

    // Set the multiselect value and update the map with the new setting
    const handleChangeMapLayers = (selectedLayerIds: string[]) => {
        setMapLayer(selectedLayerIds as MapLayer[]);
        setMapLayerOptionIds(selectedLayerIds);
    };

    const handleChangeLanguage = (selectedLanguage: SelectOption | undefined) => {
        selectedLanguage && setLanguage(selectedLanguage.id);
    };

    // Set the checkbox value and update the map with the new setting
    const handleChangeCluster = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
        const checked = event.currentTarget.checked;
        setShowCluster(checked);
        setShowClusterOption(checked);
    };

    const handleToggleWebGL = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) =>
        setEnableWebGL(event.currentTarget.checked);

    const handleToggleDevicePixelRatio = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) =>
        setEnableDevicePixelRatio(event.currentTarget.checked);

    const handleZoomButtons = (value: number) => setCurrentZoom(value);
    const handleChangeMinZoom = (value: number | undefined) => value !== undefined && setMinZoom(value);
    const handleChangeMaxZoom = (value: number | undefined) => value !== undefined && setMaxZoom(value);
    const handleChangeZoom = (value: number | undefined) => value !== undefined && setCurrentZoom(value);

    const handleResetMapPosition = () => setCenter(initialPosition);

    const simpleTheme: SimpleClusterTheme = useMemo(
        () => ({
            getNoisePresentation: ({ name, type }: Asset) => <SingleMapMarker iconNames={[type]} name={name} />,
            getClusterPresentation: (assets: Asset[]) => (
                <ClusterMapMarker
                    count={assets.length}
                    warningCount={Math.floor((assets.length * 10) / 3)}
                    exceptionCount={Math.floor((assets.length * 10) / 5)}
                />
            ),
        }),
        []
    );

    const eventListenerMap: EventListenerMap = {
        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
            const target = event.currentTarget as H.Map;
            const api = mapApiRef.current;

            const lookAtData = target.getViewModel().getLookAtData();

            const updatedCenter = api?.utils?.getCenter();
            const newZoom = api?.utils?.getZoom();

            if (!updatedCenter || newZoom === undefined) {
                return;
            }

            console.log({ center, updatedCenter, currentZoom, newZoom, lookAtData });

            const isEqualPosition = isEqual(center.lat, updatedCenter?.lat) && isEqual(center.lng, updatedCenter?.lng);
            const isEqualZoom = isEqual(currentZoom, newZoom);

            if (!(isEqualPosition && isEqualZoom)) {
                const newCenter = { lat: updatedCenter?.lat, lng: updatedCenter?.lng };
                setCenter(newCenter);
                setCurrentZoom(newZoom);
            }
        },
    };

    return (
        <div className='display-flex-lg gap-15'>
            <div className='flex-1-1'>
                <Map
                    mapType={mapType}
                    mapLayer={mapLayer}
                    showCluster={showCluster}
                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                    eventListenerMap={eventListenerMap}
                    center={center}
                    showScaleBar
                    zoom={currentZoom}
                    onZoomIn={handleZoomButtons}
                    onZoomOut={handleZoomButtons}
                    minZoom={minZoom}
                    maxZoom={maxZoom}
                    height={500}
                    onMapTypeChange={handleMapTypeChanged}
                    onMapLayerChange={handleMapLayerChanged}
                    onShowClusterChange={handleClusterChanged}
                    onIncidentsChange={setIncidents}
                    enableWebGL={enableWebGL}
                    enableDevicePixelRatio={enableDevicePixelRatio}
                    zoomAnimation={false}
                    language={language}
                    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'
                                />,
                                <MapClusterSettings
                                    key='mapClusterSettings'
                                    tooltip='Enable or disable marker cluster'
                                    dropdownHeaderText='Vehicle cluster'
                                    clusterEnabledLabel='Enable cluster'
                                    clusterDisabledLabel='Disable cluster'
                                />,
                                <MapLayerSettings
                                    key='mapLayerSettingsTraffic'
                                    layers={trafficLayers}
                                    activeLayers={activeTrafficLayers}
                                    tooltip='Toggle various traffic overlays'
                                />,
                                <MapAdditionalLayerSettings
                                    key='mapLayerSettingsPoi'
                                    layers={layers}
                                    activeLayers={activePoiLayers}
                                    tooltip='Toggle various POI layers'
                                />,
                                <MapBoundingBoxButton
                                    key='mapBoundingBoxButton'
                                    onToggle={handleToggleBoundingBox}
                                    tooltip='Zoom to current Element'
                                />,
                                <MapCenterMarkerButton
                                    key='mapCenterMarkerButton'
                                    onToggle={handleToggleCenterMarker}
                                    tooltip='Center current Marker'
                                />,
                                <MapLockMarkerButton key='mapLockMarkerButton' />,
                                <MapPreviousViewportButton
                                    key='mapPreviousViewportButton'
                                    tooltip='Back to previous map position'
                                />,
                            ]}
                        />
                    }
                >
                    {(api: MapApi) => {
                        mapApiRef.current = api;
                        console.log('render example map elements');

                        // if needed, render cluster or marker layer here
                        return (
                            <>
                                <Marker
                                    position={markerPosition}
                                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
                                />
                                <Polygon
                                    points={polygonPoints}
                                    style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR } as H.map.SpatialStyle}
                                />
                                <Route
                                    hasArrows
                                    positions={routePoints}
                                    startIcon={
                                        <SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />
                                    }
                                    endIcon={
                                        <SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />
                                    }
                                />
                                <Circle
                                    position={circlePosition}
                                    radius={5000}
                                    style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR } as H.map.SpatialStyle}
                                    precision={30}
                                />
                                <Marker
                                    position={{ lat: 48.56, lng: 11.38 }}
                                    icon={
                                        <SingleMapMarker
                                            iconNames={['truck']}
                                            markerColor='bg-map-marker-asset'
                                            active
                                        />
                                    }
                                />
                                <Marker
                                    position={{ lat: 48.56, lng: 11.48 }}
                                    icon={
                                        <SingleMapMarker
                                            iconNames={['factory']}
                                            markerColor='bg-map-marker-poi'
                                            active
                                        />
                                    }
                                />
                                <Marker
                                    position={{ lat: 48.56, lng: 11.58 }}
                                    icon={
                                        <SingleMapMarker
                                            iconNames={['geofence']}
                                            markerColor='bg-map-marker-geofence'
                                            active
                                        />
                                    }
                                />
                                <Marker
                                    position={{ lat: 48.56, lng: 11.68 }}
                                    icon={
                                        <SingleMapMarker
                                            iconNames={['route']}
                                            markerColor='bg-map-marker-route'
                                            active
                                        />
                                    }
                                />
                                <Marker
                                    position={{ lat: 48.45, lng: 11.38 }}
                                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
                                />
                                <Marker
                                    position={{ lat: 48.45, lng: 11.48 }}
                                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />}
                                />
                                <Marker
                                    position={{ lat: 48.45, lng: 11.58 }}
                                    icon={
                                        <SingleMapMarker
                                            iconNames={['geofence']}
                                            markerColor='bg-map-marker-geofence'
                                        />
                                    }
                                />
                                <Marker
                                    position={{ lat: 48.45, lng: 11.68 }}
                                    icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' />}
                                />
                                <MarkerLayer data={clusterData} simpleTheme={simpleTheme} eps={500} />
                            </>
                        );
                    }}
                </Map>

                <div className='from-group display-flex gap-15 flex-wrap margin-top-15'>
                    <div className='min-width-150'>
                        <label className='margin-0'>Map Type</label>
                        <Select
                            placeholder='Please select...'
                            options={mapTypeOptions}
                            value={mapTypeOptionId ? [mapTypeOptionId] : []}
                            onChange={handleChangeMapType}
                        />
                    </div>
                    <div className='min-width-200'>
                        <label className='margin-0'>Map Layer</label>
                        <Multiselect
                            placeholder='Please select...'
                            options={mapLayerOptions}
                            value={mapLayerOptionIds}
                            onChange={handleChangeMapLayers}
                        />
                    </div>
                    <div className='min-width-150'>
                        <label className='margin-0'>Language</label>
                        <Select options={languageOptions} value={[language]} onChange={handleChangeLanguage} />
                    </div>
                    <div className='width-100'>
                        <label className='margin-0'>Zoom</label>
                        <NumberControl min={1} max={19} value={currentZoom} step={1} onChange={handleChangeZoom} />
                    </div>
                    <div className='width-100'>
                        <label className='margin-0'>Min zoom</label>
                        <NumberControl min={1} max={19} value={minZoom} step={1} onChange={handleChangeMinZoom} />
                    </div>
                    <div className='width-100'>
                        <label className='margin-0'>Max zoom</label>
                        <NumberControl min={1} max={20} value={maxZoom} step={1} onChange={handleChangeMaxZoom} />
                    </div>
                    <div className='min-width-100'>
                        <label className='margin-0'>Map center</label>
                        <div>
                            <Button onClick={handleResetMapPosition}>Reset position</Button>
                        </div>
                    </div>
                    <div className='min-width-100'>
                        <label className='margin-0'>Cluster</label>
                        <Checkbox
                            checked={showClusterOption}
                            onClick={handleChangeCluster}
                            className='checkbox padding-y-5'
                        >
                            Show cluster
                        </Checkbox>
                    </div>
                    <div className='min-width-200'>
                        <label className='margin-0'>Rendering</label>
                        <div className='display-flex gap-20'>
                            <Checkbox
                                checked={enableWebGL}
                                onClick={handleToggleWebGL}
                                className='checkbox padding-y-5'
                            >
                                WebGL vector tiles
                            </Checkbox>
                        </div>
                        <div className='display-flex gap-20'>
                            <Checkbox
                                checked={enableDevicePixelRatio}
                                onClick={handleToggleDevicePixelRatio}
                                className='checkbox padding-y-5'
                            >
                                Use device pixel ratio
                            </Checkbox>
                        </div>
                    </div>
                    <div className='min-width-200'>
                        <label className='margin-0'>Map center</label>
                        <div>
                            <Position latitude={center.lat} longitude={center.lng} />
                        </div>
                    </div>
                </div>
            </div>

            {mapLayerOptionIds.includes(MAP_LAYER_INCIDENTS) && (
                <IncidentsList
                    mapLayer={mapLayerOptionIds}
                    incidents={incidents}
                    api={mapApiRef.current}
                    onIncidentSelect={(pos: MapPosition) => {
                        // at zoom level 16 the incident cluster is dissolved
                        setCurrentZoom(16);
                        setCenter(pos);
                    }}
                    onPositionChange={(pos: MapPosition, zoom: number) => {
                        setCenter(pos);
                        setCurrentZoom(zoom);
                    }}
                />
            )}
        </div>
    );
};

type IncidentItemProps = {
    incident: IncidentDataPoint;
    api?: MapApi;
    onClick: (position: MapPosition) => void;
};

const IncidentItem = (props: IncidentItemProps) => {
    const { api, incident, onClick } = props;
    const { id, description, position, tooltipContent } = incident;

    const [showInfo, setShowInfo] = useState(false);

    const handleGoToDataPoint = () => onClick(position);

    return (
        <div
            key={id}
            className='list-group-item cursor-pointer hover-bg-lightest'
            onClick={handleGoToDataPoint}
            onMouseEnter={() => setShowInfo(true)}
            onMouseLeave={() => setShowInfo(false)}
        >
            <div className='line-height-125rel margin-bottom-5'>{description.value}</div>
            <div className='text-size-12 text-dark text-italic text-color-dark'>{JSON.stringify(position)}</div>
            {showInfo && (
                <InfoBubble api={api} position={position} content={tooltipContent} markerOffset={{ x: 0, y: -31 }} />
            )}
        </div>
    );
};

type IncidentsListProps = {
    mapLayer: string[];
    incidents?: MapIncidents | undefined;
    api?: MapApi;
    onIncidentSelect: (position: MapPosition) => void;
    onPositionChange: (position: MapPosition, zoom: number) => void;
};

const IncidentsList = (props: IncidentsListProps) => {
    const { mapLayer, incidents, api, onIncidentSelect, onPositionChange } = props;

    const [previousPosition, setPreviousPosition] = useState<MapPosition | undefined>();
    const [previousZoom, setPreviousZoom] = useState<number | undefined>();

    const handleGoBack = () => {
        if (previousPosition && previousZoom) {
            onPositionChange(previousPosition, previousZoom);
            setPreviousPosition(undefined);
        }
    };

    const handleGoToDataPoint = (pos: MapPosition) => {
        // mapApiRef.current?.map.setCenter(pos, true);
        // mapApiRef.current?.map.setZoom(16, true);

        setPreviousPosition(api?.map?.getCenter());
        setPreviousZoom(api?.map?.getZoom());

        onIncidentSelect(pos);
    };

    return (
        <div className='max-width-300-lg min-width-300-lg'>
            <div className='display-flex justify-content-between align-items-end'>
                <label>Incidents</label>
                {previousPosition ? (
                    <div className='btn btn-link btn-link-inline margin-bottom-5' onClick={handleGoBack}>
                        <span className='rioglyph rioglyph-arrow-left' />
                        <span>Previous position</span>
                    </div>
                ) : (
                    <div />
                )}
            </div>
            <div className='list-group border rounded max-height-500 overflow-auto'>
                {mapLayer.includes(MAP_LAYER_INCIDENTS) && !incidents && (
                    <div className='list-group-item text-color-dark text-italic'>
                        Too many incidents. Please zoom in.
                    </div>
                )}
                {incidents?.results.length === 0 && (
                    <div className='list-group-item text-color-dark text-italic'>No incidents found.</div>
                )}
                {incidents?.results?.map(incident => (
                    <IncidentItem key={incident.id} api={api} incident={incident} onClick={handleGoToDataPoint} />
                ))}
            </div>
        </div>
    );
};

type MapSettingsChargingStationsItemProps = {
    isActive: boolean;
    label?: string | JSX.Element;
    onToggle: () => void;
};

export const MapSettingsChargingStationsItem = (props: MapSettingsChargingStationsItemProps) => {
    const { isActive = false, label, onToggle = () => {} } = props;

    const iconClasses = classNames(
        'display-flex',
        'justify-content-center',
        'align-items-center',
        'rioglyph rioglyph-filling-e-station',
        'height-40 width-40',
        'text-size-200pct',
        isActive ? 'text-color-highlight' : 'text-color-gray'
    );

    const icon = <span className={iconClasses} />;

    return (
        <MapSettingsItem
            className='MapSettingsChargingStations text-size-15'
            onClick={onToggle}
            isActive={isActive}
            activeIcon={icon}
            inactiveIcon={icon}
            label={label}
        />
    );
};

type MapSettingsGeofenceItemProps = {
    isActive: boolean;
    label?: string | JSX.Element;
    onToggle: () => void;
};

export const MapSettingsGeofenceItem = (props: MapSettingsGeofenceItemProps) => {
    const { isActive = false, label, onToggle = () => {} } = props;

    const iconClasses = classNames(
        'display-flex',
        'justify-content-center',
        'align-items-center',
        'rioglyph rioglyph-geofence',
        'height-40 width-40',
        'text-size-200pct',
        isActive ? 'text-color-highlight' : 'text-color-gray'
    );

    const icon = <span className={iconClasses} />;

    return (
        <MapSettingsItem
            className='MapSettingsGeofences text-size-15'
            onClick={onToggle}
            isActive={isActive}
            activeIcon={icon}
            inactiveIcon={icon}
            label={label}
        />
    );
};

export default FullSettingsExample;
```

## Settings examples

### Example: Example 2

No settings

Terms of use © 1987–2026 HERE

10 km

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Without cluster settings

Terms of use © 1987–2026 HERE

10 km

Choose view
Map view
Satellite
Terrain

Show traffic incidents

Without cluster and custom map layer settings

Terms of use © 1987–2026 HERE

10 km

Choose view
Map view
Satellite
Terrain

Show traffic incidents

Static map without interaction

Terms of use © 1987–2026 HERE

10 km

Choose view
Map view
Satellite
Terrain

Show traffic incidents

#### React (tsx)

```tsx
import Map from '@rio-cloud/rio-uikit/Map';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';
import MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';
import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';

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

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

    const layers = [
        <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,
        <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,
        <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,
        <MapLayerRoadRestrictionsItem key='mapLayerRoadRestrictionsItem' label='Road restrictions' />,
    ];

    return (
        <div className='display-grid grid-cols-2 gap-15'>
            <div>
                <label>No settings</label>
                <Map
                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                    center={position}
                    zoom={10}
                    height={200}
                    mapSettings={<MapSettings />}
                />
            </div>
            <div>
                <label>Without cluster settings</label>
                <Map
                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                    center={position}
                    zoom={10}
                    height={200}
                    mapType={Map.TYPE_TERRAIN}
                    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={layers}
                                    tooltip='Toggle various map overlays'
                                />,
                            ]}
                        />
                    }
                />
            </div>
            <div>
                <label>Without cluster and custom map layer settings</label>
                <Map
                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                    center={position}
                    zoom={10}
                    height={200}
                    mapType={Map.TYPE_FLEET_STYLE}
                    mapSettings={
                        <MapSettings
                            options={[
                                <MapTypeSettings
                                    key='mapTypeSettings'
                                    tooltip='Change map type'
                                    dropdownHeaderText='Map views'
                                    visibleMapTypes={[Map.TYPE_DEFAULT, Map.TYPE_FLEET_STYLE, Map.TYPE_SATELLITE]}
                                    defaultTypeLabel='Default view'
                                    truckTypeLabel='Truck view'
                                    satelliteTypeLabel='Satellite view'
                                />,
                            ]}
                        />
                    }
                />
            </div>
            <div>
                <label>Static map without interaction</label>
                <Map
                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                    center={position}
                    zoom={10}
                    height={200}
                    disableBehavior
                    mapType={Map.TYPE_SATELLITE}
                    enableWebGL={false}
                    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'
                                />,
                            ]}
                        />
                    }
                />
            </div>
        </div>
    );
};

export default SettingsExample;
```