@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/mapMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#components/mapMarker
-*Captured:* 2026-01-07T12:12:13.667Z
+*Captured:* 2026-02-03T14:05:19.976Z
 
 Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
 
@@ -85,356 +85,350 @@ const MarkerExample = () => {
                 />
             }
         >
-            <>
-                {/* Default marker - active */}
-                <Marker
-                    position={{ lat: 48.16, lng: 11.38 }}
-                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.16, lng: 11.48 }}
-                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.16, lng: 11.58 }}
-                    icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.16, lng: 11.68 }}
-                    icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.16, lng: 11.78 }}
-                    icon={
-                        <SingleMapMarker
-                            iconNames={['road-restrictions']}
-                            markerColor='bg-map-marker-restrictions'
-                            active
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-
-                {/* Default marker */}
-                <Marker
-                    position={{ lat: 48.06, lng: 11.38 }}
-                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.06, lng: 11.48 }}
-                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.06, lng: 11.58 }}
-                    icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.06, lng: 11.68 }}
-                    icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.06, lng: 11.78 }}
-                    icon={
-                        <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-
-                {/* anchorOnly marker */}
-                <Marker
-                    position={{ lat: 48.0, lng: 11.38 }}
-                    icon={
-                        <SingleMapMarker
-                            iconNames={['truck']}
-                            markerColor='bg-map-marker-asset'
-                            anchorSize='lg'
-                            markerOnHover
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.0, lng: 11.48 }}
-                    icon={
-                        <SingleMapMarker
-                            iconNames={['factory']}
-                            markerColor='bg-map-marker-poi'
-                            anchorSize='lg'
-                            markerOnHover
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.0, lng: 11.58 }}
-                    icon={
-                        <SingleMapMarker
-                            iconNames={['geofence']}
-                            markerColor='bg-map-marker-geofence'
-                            anchorSize='lg'
-                            markerOnHover
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.0, lng: 11.68 }}
-                    icon={
-                        <SingleMapMarker
-                            iconNames={['route']}
-                            markerColor='bg-map-marker-route'
-                            anchorSize='lg'
-                            markerOnHover
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
+            {/* Default marker - active */}
+            <Marker
+                position={{ lat: 48.16, lng: 11.38 }}
+                icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.16, lng: 11.48 }}
+                icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.16, lng: 11.58 }}
+                icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.16, lng: 11.68 }}
+                icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.16, lng: 11.78 }}
+                icon={
+                    <SingleMapMarker
+                        iconNames={['road-restrictions']}
+                        markerColor='bg-map-marker-restrictions'
+                        active
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* Default marker */}
+            <Marker
+                position={{ lat: 48.06, lng: 11.38 }}
+                icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.06, lng: 11.48 }}
+                icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.06, lng: 11.58 }}
+                icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.06, lng: 11.68 }}
+                icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.06, lng: 11.78 }}
+                icon={<SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' />}
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* anchorOnly marker */}
+            <Marker
+                position={{ lat: 48.0, lng: 11.38 }}
+                icon={
+                    <SingleMapMarker
+                        iconNames={['truck']}
+                        markerColor='bg-map-marker-asset'
+                        anchorSize='lg'
+                        markerOnHover
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.0, lng: 11.48 }}
+                icon={
+                    <SingleMapMarker
+                        iconNames={['factory']}
+                        markerColor='bg-map-marker-poi'
+                        anchorSize='lg'
+                        markerOnHover
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.0, lng: 11.58 }}
+                icon={
+                    <SingleMapMarker
+                        iconNames={['geofence']}
+                        markerColor='bg-map-marker-geofence'
+                        anchorSize='lg'
+                        markerOnHover
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.0, lng: 11.68 }}
+                icon={
+                    <SingleMapMarker
+                        iconNames={['route']}
+                        markerColor='bg-map-marker-route'
+                        anchorSize='lg'
+                        markerOnHover
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
 
-                <Marker
-                    position={{ lat: 48.0, lng: 11.745 }}
-                    icon={
-                        <SingleMapMarker
-                            markerColor='bg-map-marker-route'
-                            anchorSize='lg'
-                            anchorOnly
-                            name='Hidden marker text'
-                            cursor='cursor-grab'
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
+            <Marker
+                position={{ lat: 48.0, lng: 11.745 }}
+                icon={
+                    <SingleMapMarker
+                        markerColor='bg-map-marker-route'
+                        anchorSize='lg'
+                        anchorOnly
+                        name='Hidden marker text'
+                        cursor='cursor-grab'
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
 
-                <Marker
-                    position={{ lat: 48.0, lng: 11.81 }}
-                    icon={
-                        <SingleMapMarker
-                            name={
-                                <div className='display-flex align-items-center gap-10 padding-x-15 padding-y-5'>
-                                    <span className='text-size-20 rioglyph rioglyph-drivercard-in' />
-                                    <div className='line-height-16'>
-                                        <div className='text-medium'>Fahrerkarte gesteckt</div>
-                                        <div className='text-anchorSize-12'>14.07.2023, 08:26</div>
-                                    </div>
+            <Marker
+                position={{ lat: 48.0, lng: 11.81 }}
+                icon={
+                    <SingleMapMarker
+                        name={
+                            <div className='display-flex align-items-center gap-10 padding-x-15 padding-y-5'>
+                                <span className='text-size-20 rioglyph rioglyph-drivercard-in' />
+                                <div className='line-height-16'>
+                                    <div className='text-medium'>Fahrerkarte gesteckt</div>
+                                    <div className='text-anchorSize-12'>14.07.2023, 08:26</div>
                                 </div>
-                            }
-                            markerColor='bg-map-marker-route'
-                            markerOnHover
-                            anchorSize='lg'
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-
-                <Marker
-                    position={{ lat: 48, lng: 11.88 }}
-                    eventListenerMap={eventListenerMap}
-                    icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorIconName='heart' anchorSize='lg' />}
-                />
-                <Marker
-                    position={{ lat: 48, lng: 11.92 }}
-                    icon={
-                        <SingleMapMarker
-                            markerColor='bg-map-marker-success'
-                            anchorIconName='flag'
-                            clickable={false}
-                            anchorSize='lg'
-                        />
-                    }
-                />
-
-                <Marker
-                    position={{ lat: 48, lng: 11.98 }}
-                    icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorSize='lg' clickable={false} />}
-                />
-
-                <Marker
-                    position={{ lat: 48, lng: 12.08 }}
-                    icon={
-                        <SingleMapMarker
-                            markerColor='bg-map-marker-poi'
-                            name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}
-                            markerOnHover
-                        />
-                    }
-                />
-
-                {/* Status colored markers */}
-                <Marker
-                    position={{ lat: 47.92, lng: 11.38 }}
-                    icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.92, lng: 11.48 }}
-                    icon={<SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.92, lng: 11.58 }}
-                    icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.92, lng: 11.68 }}
-                    icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' />}
-                    eventListenerMap={eventListenerMap}
-                />
-
-                {/* Status colored markers - active */}
-                <Marker
-                    position={{ lat: 47.85, lng: 11.38 }}
-                    icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.85, lng: 11.48 }}
-                    icon={
-                        <SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' active />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.85, lng: 11.58 }}
-                    icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.85, lng: 11.68 }}
-                    icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' active />}
-                    eventListenerMap={eventListenerMap}
-                />
-
-                {/* One number only marker */}
-                <Marker
-                    position={{ lat: 47.92, lng: 11.78 }}
-                    icon={<SingleMapMarker markerColor='bg-map-marker-asset' name='1' />}
-                    eventListenerMap={eventListenerMap}
-                />
-
-                <Marker
-                    position={{ lat: 47.85, lng: 11.78 }}
-                    icon={<SingleMapMarker markerColor='bg-map-marker-asset' active name='1' />}
-                    eventListenerMap={eventListenerMap}
-                />
-
-                {/* Custom text marker */}
-                <TextMarker
-                    position={{ lat: 48.205, lng: 11.88 }}
-                    text='This is a TextMarker'
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 48.14, lng: 11.88 }}
-                    icon={
-                        <span className='bg-white rounded border max-width-200 shadow-default user-select-none cursor-default'>
-                            <div className='border border-bottom-only padding-10 text-color-info'>
-                                <span className='rioglyph rioglyph-info-sign margin-right-3' />
-                                <span className='text-medium'>This is a custom Marker</span>
-                            </div>
-                            <div className='padding-10'>
-                                This kind of marker is useful when displaying additional information on the map
                             </div>
-                        </span>
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
+                        }
+                        markerColor='bg-map-marker-route'
+                        markerOnHover
+                        anchorSize='lg'
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+
+            <Marker
+                position={{ lat: 48, lng: 11.88 }}
+                eventListenerMap={eventListenerMap}
+                icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorIconName='heart' anchorSize='lg' />}
+            />
+            <Marker
+                position={{ lat: 48, lng: 11.92 }}
+                icon={
+                    <SingleMapMarker
+                        markerColor='bg-map-marker-success'
+                        anchorIconName='flag'
+                        clickable={false}
+                        anchorSize='lg'
+                    />
+                }
+            />
 
-                {/* Status color marker with text */}
-                <Marker
-                    position={{ lat: 47.77, lng: 11.38 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            iconNames={['truck-breakdown']}
-                            markerColor='bg-map-marker-warning'
-                            moving
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.77, lng: 11.58 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            iconNames={['truck-breakdown']}
-                            markerColor='bg-map-marker-danger'
-                            moving
-                            pinging
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.71, lng: 11.38 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            iconNames={['truck-breakdown']}
-                            markerColor='bg-map-marker-warning'
-                            moving
-                            active
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.71, lng: 11.58 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            iconNames={['truck-breakdown']}
-                            markerColor='bg-map-marker-danger'
-                            moving
-                            active
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
+            <Marker
+                position={{ lat: 48, lng: 11.98 }}
+                icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorSize='lg' clickable={false} />}
+            />
 
-                {/* Asset marker with text */}
-                <Marker
-                    position={{ lat: 47.77, lng: 11.8 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            warningCount={1}
-                            exceptionCount={2}
-                            iconNames={['truck']}
-                            moving
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-                <Marker
-                    position={{ lat: 47.71, lng: 11.8 }}
-                    icon={
-                        <SingleMapMarker
-                            bearing={60}
-                            name='Vehicle'
-                            warningCount={1}
-                            exceptionCount={2}
-                            iconNames={['truck']}
-                            moving
-                            active
-                        />
-                    }
-                    eventListenerMap={eventListenerMap}
-                />
-            </>
+            <Marker
+                position={{ lat: 48, lng: 12.08 }}
+                icon={
+                    <SingleMapMarker
+                        markerColor='bg-map-marker-poi'
+                        name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}
+                        markerOnHover
+                    />
+                }
+            />
+
+            {/* Status colored markers */}
+            <Marker
+                position={{ lat: 47.92, lng: 11.38 }}
+                icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.92, lng: 11.48 }}
+                icon={<SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.92, lng: 11.58 }}
+                icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.92, lng: 11.68 }}
+                icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' />}
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* Status colored markers - active */}
+            <Marker
+                position={{ lat: 47.85, lng: 11.38 }}
+                icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.85, lng: 11.48 }}
+                icon={<SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.85, lng: 11.58 }}
+                icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' active />}
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.85, lng: 11.68 }}
+                icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' active />}
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* One number only marker */}
+            <Marker
+                position={{ lat: 47.92, lng: 11.78 }}
+                icon={<SingleMapMarker markerColor='bg-map-marker-asset' name='1' />}
+                eventListenerMap={eventListenerMap}
+            />
+
+            <Marker
+                position={{ lat: 47.85, lng: 11.78 }}
+                icon={<SingleMapMarker markerColor='bg-map-marker-asset' active name='1' />}
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* Custom text marker */}
+            <TextMarker
+                position={{ lat: 48.205, lng: 11.88 }}
+                text='This is a TextMarker'
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 48.14, lng: 11.88 }}
+                icon={
+                    <span className='bg-white rounded border max-width-200 shadow-default user-select-none cursor-default'>
+                        <div className='border border-bottom-only padding-10 text-color-info'>
+                            <span className='rioglyph rioglyph-info-sign margin-right-3' />
+                            <span className='text-medium'>This is a custom Marker</span>
+                        </div>
+                        <div className='padding-10'>
+                            This kind of marker is useful when displaying additional information on the map
+                        </div>
+                    </span>
+                }
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* Status color marker with text */}
+            <Marker
+                position={{ lat: 47.77, lng: 11.38 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-warning'
+                        moving
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.77, lng: 11.58 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-danger'
+                        moving
+                        pinging
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.71, lng: 11.38 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-warning'
+                        moving
+                        active
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.71, lng: 11.58 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-danger'
+                        moving
+                        active
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+
+            {/* Asset marker with text */}
+            <Marker
+                position={{ lat: 47.77, lng: 11.8 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        iconNames={['truck']}
+                        moving
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
+            <Marker
+                position={{ lat: 47.71, lng: 11.8 }}
+                icon={
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        iconNames={['truck']}
+                        moving
+                        active
+                    />
+                }
+                eventListenerMap={eventListenerMap}
+            />
         </Map>
     );
 };