@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mapContext.md

@@ -0,0 +1,284 @@
+# Map
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapContext
+*Captured:* 2025-12-12T12:39:15.120Z
+
+## Map
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import Map from '@rio-cloud/rio-uikit/Map';
+import ContextMenu, { isMapTarget } from '@rio-cloud/rio-uikit/ContextMenu';
+import ContextMenuItem from '@rio-cloud/rio-uikit/ContextMenuItem';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';
+import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';
+import MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';
+import MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';
+import Circle from '@rio-cloud/rio-uikit/Circle';
+import type { MapApi, MapContextMenuEvent, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';
+
+const formatCoordinates = (coordinates: Position) => {
+    return [
+        Math.abs(Number(coordinates.lat.toFixed(4))) + (coordinates.lat > 0 ? 'N' : 'S'),
+        Math.abs(Number(coordinates.lng.toFixed(4))) + (coordinates.lng > 0 ? 'E' : 'W'),
+    ].join(' ');
+};
+
+const notifyCoordinates = (coordinates: Position) => Notification.info(JSON.stringify(coordinates));
+
+type ContextMenuData = {
+    target?: string;
+    event?: MapContextMenuEvent;
+    targetPosition?: Position;
+};
+
+const ContextMenuExample = () => {
+    const munichCoord = { lat: 48.1351, lng: 11.582 };
+    const markerPosition = { lat: 48.1351, lng: 11.382 };
+    const circlePosition = { lat: 48.2351, lng: 11.482 };
+
+    const [contextMenuData, setContextMenuData] = useState<ContextMenuData>({});
+
+    const [mapCenter, setMapCenter] = useState<Position>(munichCoord);
+    const [coordLabel, setCoordLabel] = useState<string>('');
+
+    const [showSpinner, setShowSpinner] = useState(true);
+
+    const mapApiRef = useRef<MapApi>();
+
+    // The onOpen callback will receive the coordinates of the context menu unless the "targetPosition"
+    // prop is defined whereas in that case the context menu coordinates are ignored and the provided
+    // targetPosition is returned
+    const handleOpenContextMenu = (contextMenuCoordinates: Position) => {
+        setShowSpinner(true);
+
+        // Resolve the coordinates to an address but for demo purpose we show the coordinates
+        console.log(contextMenuCoordinates);
+        setCoordLabel(formatCoordinates(contextMenuCoordinates));
+
+        // remove the spinner after some time to showcase the sinner in the UI and to simulate an async event
+        setTimeout(() => setShowSpinner(false), 1000);
+    };
+
+    const centerMap = (coordinates: Position /* , hereMap*/) => setMapCenter(coordinates);
+
+    const markerEventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            // Note: if there is a "TAP" event defined make sure to block the event for right mouse button otherwise
+            // the right click will also trigger the tap callback and may cause unwanted selection
+            if (EventUtils.isRightClick(event)) {
+                event.stopPropagation();
+                return;
+            }
+            console.log(event);
+        },
+        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
+            // "target" is used to decide what context menu items shall be shown
+            // "event" is used to add the menu items to it
+            // "targetPosition" is used to return a fixed position on context menu open or in the item callback
+            setContextMenuData({ target: 'marker', event, targetPosition: markerPosition });
+        },
+    };
+
+    const circleEventListenerMap = {
+        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
+            setContextMenuData({ target: 'circle', event, targetPosition: circlePosition });
+        },
+    };
+
+    // Register a context menu event listener for the map itself in order to show
+    // only map related context menu entries
+    const mapEventListenerMap = {
+        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {
+            if (isMapTarget(event, mapApiRef.current)) {
+                setContextMenuData({ target: 'map', event, targetPosition: circlePosition });
+            }
+        },
+    };
+
+    // Define some context menu entries that are always available when opening
+    const positionItem = (
+        <ContextMenuItem
+            key='1'
+            className='text-color-darker cursor-default'
+            labelClassName='text-medium'
+            label={coordLabel}
+            icon='rioglyph-map-marker'
+            hasSpinner={showSpinner}
+        />
+    );
+
+    const centerMapItem = (
+        <ContextMenuItem key='2' icon='rioglyph-position' label='Center map here' callback={centerMap} />
+    );
+
+    let contextMenuItems = [];
+
+    // Add context related menu items like when clicking on a map object.
+    // This differentiation may vary for your use case. This is just for demo purposes.
+    switch (contextMenuData.target) {
+        case 'circle':
+            contextMenuItems = [
+                positionItem,
+                centerMapItem,
+                <ContextMenuItem key='removeCircle' label='Remove circle' disabled />,
+            ];
+            break;
+        case 'marker':
+            contextMenuItems = [
+                positionItem,
+                centerMapItem,
+                <ContextMenuItem key='startRoute' label='<b>Start here</b>' callback={notifyCoordinates} />,
+            ];
+            break;
+        default:
+            contextMenuItems = [
+                positionItem,
+                centerMapItem,
+                <ContextMenuItem
+                    key='zoomHere'
+                    label='Zoom to this location'
+                    callback={() => {
+                        if (mapApiRef.current?.utils) {
+                            const zoom = mapApiRef.current.utils.getZoom() + 3;
+                            mapApiRef.current.utils.setZoom(zoom >= 19 ? 19 : zoom, false);
+                        }
+                    }}
+                />,
+            ];
+            break;
+    }
+
+    return (
+        <div className='height-300'>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={mapCenter}
+                zoom={10}
+                eventListenerMap={mapEventListenerMap}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                            <MapLayerSettings
+                                key='mapLayerSettings'
+                                layers={[
+                                    <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,
+                                    <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,
+                                    <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,
+                                    <MapLayerRoadRestrictionsItem
+                                        key='mapLayerRoadRestrictionsItem'
+                                        label='Road restrictions'
+                                    />,
+                                ]}
+                                tooltip='Toggle various map overlays'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
+
+                    return (
+                        <>
+                            <Marker
+                                position={markerPosition}
+                                icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
+                                eventListenerMap={markerEventListenerMap}
+                            />
+                            <Circle
+                                position={circlePosition}
+                                radius={5000}
+                                style={{ strokeColor: '#f0f' }}
+                                precision={30}
+                                eventListenerMap={circleEventListenerMap}
+                            />
+                            <ContextMenu
+                                onOpen={handleOpenContextMenu}
+                                menuItems={contextMenuItems}
+                                contextMenuEvent={contextMenuData.event}
+                                targetPosition={contextMenuData.targetPosition}
+                            />
+                        </>
+                    );
+                }}
+            </Map>
+        </div>
+    );
+};
+
+export default ContextMenuExample;
+```
+
+#### Props: ContextMenu
+
+### ContextMenu
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onOpen | Function | — | Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 } |
+| children | List of ContextMenuItem | — | The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it. |
+
+#### Props: ContextMenuItem
+
+### ContextMenuItem
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| label | String | — | The actual label text. |
+| disabled | Boolean | — | Defines whether or not the item is disabled. |
+| hasSpinner | Boolean | — | Defines whether or not a spinner is rendered instead of the label. |
+| icon | String | — | The name of the icon added to the label. |
+| callback | Function | — | Callback function that is called when clicking on the item. |
+| labelClassName | String | — | Additional classes added to the label element. |
+| className | String | — | Additional classes added to the wrapper element. |

package/dist/docs/components/mapDraggableMarker.md

@@ -0,0 +1,150 @@
+# Draggable marker
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapDraggableMarker
+*Captured:* 2025-12-12T12:39:05.357Z
+
+## Draggable marker
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Marker position{"lat":48.16,"lng":11.38}
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Marker position{"lat":48.16,"lng":11.38}
+
+#### React (tsx)
+
+```tsx
+// See https://www.here.com/docs/bundle/draggable-marker/page/README.html
+
+import { useState, useRef } from 'react';
+
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+
+const initialMapPosition = { lat: 48.03, lng: 11.7 };
+
+const MarkerExample = () => {
+    const mapApiRef = useRef<MapApi>();
+
+    const [markerPosition, setMarkerPosition] = useState<Position>({ lat: 48.16, lng: 11.38 });
+
+    const mapEventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            const pointer = event.currentPointer;
+            setMarkerPosition(mapApiRef.current?.map.screenToGeo(pointer.viewportX, pointer.viewportY));
+        },
+    };
+
+    const markerEventListenerMap = {
+        [EventUtils.DRAG_START]: (event: MapEvent) => {
+            // disable the default draggability of the underlying map
+            // and calculate the offset between mouse and target's position
+            // when starting to drag a marker object:
+            const target = event.target;
+            const pointer = event.currentPointer;
+
+            if (target.draggable) {
+                const targetPosition = mapApiRef.current?.map.geoToScreen(target.getGeometry());
+                target.offset = new H.math.Point(
+                    pointer.viewportX - targetPosition.x,
+                    pointer.viewportY - targetPosition.y
+                );
+                mapApiRef.current?.behavior.disable();
+            }
+        },
+        [EventUtils.DRAG_END]: (event: MapEvent) => {
+            // re-enable the default draggability of the underlying map
+            // when dragging has completed
+            const target = event.target;
+            if (target.draggable) {
+                mapApiRef.current?.behavior.enable();
+            }
+
+            // Update final map marker position
+            const pointer = event.currentPointer;
+            setMarkerPosition(
+                mapApiRef.current?.map.screenToGeo(
+                    pointer.viewportX - target.offset.x,
+                    pointer.viewportY - target.offset.y
+                )
+            );
+        },
+        [EventUtils.DRAG]: (event: MapEvent) => {
+            // Listen to the drag event and move the position of the marker
+            // as necessary
+            const target = event.target;
+            const pointer = event.currentPointer;
+            if (target.draggable) {
+                target.setGeometry(
+                    mapApiRef.current?.map.screenToGeo(
+                        pointer.viewportX - target.offset.x,
+                        pointer.viewportY - target.offset.y
+                    )
+                );
+            }
+        },
+    };
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={initialMapPosition}
+                zoom={10}
+                height={550}
+                eventListenerMap={mapEventListenerMap}
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
+
+                    return (
+                        <Marker
+                            position={markerPosition}
+                            icon={<SingleMapMarker iconNames={['pushpin']} markerColor='bg-map-marker-poi' />}
+                            eventListenerMap={markerEventListenerMap}
+                            draggable
+                        />
+                    );
+                }}
+            </Map>
+            <div className='margin-top-15'>
+                <label>Marker position</label>
+                <div>{JSON.stringify(markerPosition)}</div>
+            </div>
+        </>
+    );
+};
+
+export default MarkerExample;
+```

package/dist/docs/components/mapGettingStarted.md

@@ -0,0 +1,39 @@
+# components/mapGettingStarted
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapGettingStarted
+*Captured:* 2025-12-12T12:39:03.564Z
+
+HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
+
+## Prerequisites
+
+> Note: HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!Please make sure you get your own "dev" and "prod" credentials!
+
+## HERE Maps credentials
+
+Please note that the usage of HERE Maps is not free. If you have any questions regarding license costs, please contact us.
+
+In case you want to use HERE Maps in production, please contact finance@rio.cloud.
+
+**Add HERE Maps dependencies**
+
+**Map Imports**
+
+As the UIKIT Map component relies on the map scripts from Here, we need to add them to the index.html as shown below.
+
+```html
+<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-harp.js" type="text/javascript"></script>
+<script src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js" type="text/javascript"></script>
+
+<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
+```
+
+Map API VersionBy default, the map imports use the map version 3.1. However, this version is not a fixed version as it will be resolved to an internal version by Here. This means version 3.1 is treated as an evergreen version.If you encounter any instability or even bugs with the map itself, it is recommended to set the version fixed in the imports and check for a newer version on demand.More details can be found on the Here Developer PlatformFor example<script src="https://js.api.here.com/v3/3.1.11.2/mapsjs-core.js"></script>

package/dist/docs/components/mapInfoBubble.md

@@ -0,0 +1,135 @@
+# InfoBubble
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapInfoBubble
+*Captured:* 2025-12-12T12:39:12.574Z
+
+## InfoBubble
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
+
+Verkehrslage
+Verkehrsstörungen anzeigen
+
+Toggle info
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
+
+Verkehrslage
+Verkehrsstörungen anzeigen
+
+Toggle info
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import Map from '@rio-cloud/rio-uikit/Map';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import Button from '@rio-cloud/rio-uikit/Button';
+import InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';
+import type { MapApi } from '@rio-cloud/rio-uikit/mapTypes';
+
+const mapCenter = { lat: 48.1351, lng: 11.582 };
+const position = { lat: 48.02, lng: 11.6 };
+
+const InfoBubbleContent = () => (
+    <div className='width-200 user-select-none'>
+        <div className='margin-top--15 margin-left--15 margin-right--25 padding-15 bg-lightest rounded-top'>
+            <div className='text-bold'>Public toilet</div>
+            <div className='text-color-dark line-height-18 text-size-12 margin-top-5'>
+                Toilet handle in public toilet is broken and can't flush the toilet
+            </div>
+        </div>
+        <div className='margin-bottom--15 margin-left--15 margin-right--25 padding-15 shadow-default rounded-top'>
+            <div className='line-height-20 text-size-12'>
+                <div className='display-flex justify-content-between'>
+                    <div className='text-color-dark'>Operator</div>
+                    <div>Mr. Handyman</div>
+                </div>
+                <div className='display-flex justify-content-between'>
+                    <div className='text-color-dark'>Contact</div>
+                    <div>089 / 123 45 67 89</div>
+                </div>
+            </div>
+            <div className='text-center text-size-12 margin-top-5 margin-bottom--5'>
+                <a href='https://rio.cloud' target='_blank' rel='noreferrer'>
+                    Visit website
+                </a>
+            </div>
+        </div>
+    </div>
+);
+
+export default () => {
+    const [showInfo, setShowInfo] = useState(false);
+
+    const mapApiRef = useRef<MapApi>();
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={mapCenter}
+                zoom={10}
+                height={400}
+                language='de'
+                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'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
+
+                    return null;
+                }}
+            </Map>
+            {showInfo && (
+                <InfoBubble
+                    api={mapApiRef.current}
+                    position={position}
+                    content={<InfoBubbleContent />}
+                    onClose={() => setShowInfo(false)}
+                />
+            )}
+            <div className='margin-top-20'>
+                <Button onClick={() => setShowInfo(!showInfo)}>Toggle info</Button>
+            </div>
+        </>
+    );
+};
+```