@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/mapSettings.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#components/mapSettings
-*Captured:* 2026-01-07T12:12:12.746Z
+*Captured:* 2026-02-03T14:05:22.576Z
 
 ## Map settings
 
@@ -99,7 +99,6 @@ 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';
@@ -108,7 +107,7 @@ 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 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';
@@ -187,7 +186,7 @@ const languageOptions: SelectOption[] = [
 ];
 
 const addOrRemove = (layers: string[], value: string) =>
-    layers.includes(value) ? without(layers, [value]) : [...layers, value];
+    layers.includes(value) ? without(layers, value) : [...layers, value];
 
 const FullSettingsExample = () => {
     const [mapType, setMapType] = useState<MapType | undefined>(Map.TYPE_DEFAULT);
@@ -320,7 +319,7 @@ const FullSettingsExample = () => {
 
     const handleResetMapPosition = () => setCenter(initialPosition);
 
-    const simpleTheme = useMemo(
+    const simpleTheme: SimpleClusterTheme = useMemo(
         () => ({
             getNoisePresentation: ({ name, type }: Asset) => <SingleMapMarker iconNames={[type]} name={name} />,
             getClusterPresentation: (assets: Asset[]) => (
@@ -336,7 +335,7 @@ const FullSettingsExample = () => {
 
     const eventListenerMap: EventListenerMap = {
         [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
-            const target = event.currentTarget;
+            const target = event.currentTarget as H.Map;
             const api = mapApiRef.current;
 
             const lookAtData = target.getViewModel().getLookAtData();
@@ -362,283 +361,273 @@ const FullSettingsExample = () => {
     };
 
     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 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 } 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 className='min-width-100'>
-                            <label className='margin-0'>Cluster</label>
+                    </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={showClusterOption}
-                                onClick={handleChangeCluster}
+                                checked={enableWebGL}
+                                onClick={handleToggleWebGL}
                                 className='checkbox padding-y-5'
                             >
-                                Show cluster
+                                WebGL vector tiles
                             </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 className='display-flex gap-20'>
+                            <Checkbox
+                                checked={enableDevicePixelRatio}
+                                onClick={handleToggleDevicePixelRatio}
+                                className='checkbox padding-y-5'
+                            >
+                                Use device pixel ratio
+                            </Checkbox>
                         </div>
-                        <div className='min-width-200'>
-                            <label className='margin-0'>Map center</label>
-                            <div>
-                                <Position latitude={center.lat} longitude={center.lng} />
-                            </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>
-
-                {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>
-        </>
+
+            {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>
     );
 };
 
@@ -698,8 +687,8 @@ const IncidentsList = (props: IncidentsListProps) => {
         // mapApiRef.current?.map.setCenter(pos, true);
         // mapApiRef.current?.map.setZoom(16, true);
 
-        setPreviousPosition(api?.map.getCenter());
-        setPreviousZoom(api?.map.getZoom());
+        setPreviousPosition(api?.map?.getCenter());
+        setPreviousZoom(api?.map?.getZoom());
 
         onIncidentSelect(pos);
     };