@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mapSettings.md

@@ -0,0 +1,1040 @@
+# Map settings
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapSettings
+*Captured:* 2025-12-12T12:39:09.858Z
+
+## Map settings
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+20 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Map TypeDayDay
+Fleet style
+Satellite
+Terrain
+Night
+
+Map LayerPlease select...Incidents
+Traffic
+Road restrictions
+
+LanguageEnglishEnglish
+German
+Polish
+
+Zoom
+
+Min zoom
+
+Max zoom
+
+Map centerReset position
+
+ClusterShow cluster
+RenderingWebGL vector tiles
+Use device pixel ratio
+
+Map centerN48° 30.000′ E12° 6.000′
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+20 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Map TypeDayDay
+Fleet style
+Satellite
+Terrain
+Night
+
+Map LayerPlease select...Incidents
+Traffic
+Road restrictions
+
+LanguageEnglishEnglish
+German
+Polish
+
+Zoom
+
+Min zoom
+
+Max zoom
+
+Map centerReset position
+
+ClusterShow cluster
+RenderingWebGL vector tiles
+Use device pixel ratio
+
+Map centerN48° 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 'classnames';
+
+import Notification from '@rio-cloud/rio-uikit/Notification';
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 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 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 = 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;
+            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' />,
+                                ]}
+                            />
+                        }
+                    >
+                        {(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 }}
+                                    />
+                                    <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 }}
+                                        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–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Without cluster settings
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+Terrain
+
+Show traffic incidents
+
+Without cluster and map layer settings
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+Terrain
+
+Show traffic incidents
+
+Static map without interaction
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+Terrain
+
+Show traffic incidents
+
+#### Summary
+
+No settings
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Without cluster settings
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+Terrain
+
+Show traffic incidents
+
+Without cluster and map layer settings
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+Terrain
+
+Show traffic incidents
+
+Static map without interaction
+
+Terms of use© 1987–2025 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 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'
+                                    defaultTypeLabel='Default view'
+                                    truckTypeLabel='Truck view'
+                                    terrainTypeLabel='Terrain view'
+                                    satelliteTypeLabel='Satellite view'
+                                    nightTypeLabel='Night 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'
+                                    defaultTypeLabel='Default view'
+                                    truckTypeLabel='Truck view'
+                                    terrainTypeLabel='Terrain view'
+                                    satelliteTypeLabel='Satellite view'
+                                    nightTypeLabel='Night view'
+                                />,
+                            ]}
+                        />
+                    }
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SettingsExample;
+```