@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mapMarker.md

@@ -0,0 +1,1814 @@
+# Marker
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapMarker
+*Captured:* 2025-12-12T12:39:12.134Z
+
+Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
+
+## Marker
+
+> Note: The map zoom level does not affect the size of Markers.
+
+**Sharing icon between Markers**
+
+It's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the 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 Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import TextMarker from '@rio-cloud/rio-uikit/TextMarker';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import type { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';
+
+const MarkerExample = () => {
+    const position = { lat: 47.96, lng: 11.7 };
+
+    const eventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => console.log(event),
+    };
+
+    return (
+        <Map
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            center={position}
+            zoom={10}
+            height={620}
+            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'
+                        />,
+                    ]}
+                />
+            }
+        >
+            <>
+                {/* 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.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>
+                                </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}
+                />
+
+                {/* 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>
+    );
+};
+
+export default MarkerExample;
+```
+
+## SingleMapMarker
+
+### Example: Example 2
+
+Vehicle
+
+Vehicle
+2
+1
+
+Vehicle
+2
+1
+
+The hover state is triggered on mouse hover or by adding the class hover
+
+#### Summary
+
+Vehicle
+
+Vehicle
+2
+1
+
+Vehicle
+2
+1
+
+The hover state is triggered on mouse hover or by adding the class hover
+
+#### React (tsx)
+
+```tsx
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+export default () => (
+    <div>
+        <div className='bg-light padding-top-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker name='Vehicle' iconNames={['truck']} />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        iconNames={['truck']}
+                    />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        moving
+                        iconNames={['truck']}
+                    />
+                </div>
+            </div>
+        </div>
+        <p className='margin-bottom-0'>
+            The hover state is triggered on mouse hover or by adding the class <code className='code'>hover</code>
+        </p>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                            <div class="rio-map-bubble exception">2</div>
+                            <div class="rio-map-bubble warning">1</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single moving cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state rio-map-direction">
+                                <span class="rioglyph rioglyph-direction" style="transform: rotate(60deg);">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                            <div class="rio-map-bubble exception">2</div>
+                            <div class="rio-map-bubble warning">1</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p class="margin-bottom-0">The hover state is triggered on mouse hover or by adding the class <code class="code">hover</code>
+    </p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| bearing | Number | 0 | Defines the rotation of the arrow in deg. |
+| name | String / Node | — | Text for the Marker. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |
+| moving | Boolean | false | Defines whether the direction icon is displayed or not |
+| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |
+| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |
+| iconNames | Array of Strings | — | List of rioglyph icon names |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |
+| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |
+| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |
+| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |
+
+### Example: Example 3
+
+Vehicle
+2
+1
+
+Vehicle
+
+Vehicle
+
+Vehicle
+2
+1
+
+To activate the active state of any marker you have to add the class active
+
+#### Summary
+
+Vehicle
+2
+1
+
+Vehicle
+
+Vehicle
+
+Vehicle
+2
+1
+
+To activate the active state of any marker you have to add the class active
+
+#### React (tsx)
+
+```tsx
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+export default () => (
+    <div>
+        <div className='bg-light padding-top-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        bearing={135}
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        active
+                        moving
+                        iconNames={['truck', 'heart']}
+                    />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker name='Vehicle' iconNames={['truck']} stateIconName='parking' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker name='Vehicle' iconNames={['truck']} active />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        name='Vehicle'
+                        warningCount={1}
+                        exceptionCount={2}
+                        iconNames={['truck']}
+                        stateIconName='plugged-on'
+                    />
+                </div>
+            </div>
+        </div>
+        <p className='margin-bottom-0'>
+            To activate the active state of any marker you have to add the class <code className='code'>active</code>
+        </p>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single moving active cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state rio-map-direction">
+                                <span class="rioglyph rioglyph-direction" style="transform: rotate(135deg);">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-heart">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                            <div class="rio-map-bubble exception">2</div>
+                            <div class="rio-map-bubble warning">1</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state ">
+                                <span class="rioglyph rioglyph-parking">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state ">
+                                <span class="rioglyph rioglyph-plugged-on">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                            <div class="rio-map-bubble exception">2</div>
+                            <div class="rio-map-bubble warning">1</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p class="margin-bottom-0">To activate the active state of any marker you have to add the class <code class="code">active</code>
+    </p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| bearing | Number | 0 | Defines the rotation of the arrow in deg. |
+| name | String / Node | — | Text for the Marker. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |
+| moving | Boolean | false | Defines whether the direction icon is displayed or not |
+| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |
+| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |
+| iconNames | Array of Strings | — | List of rioglyph icon names |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |
+| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |
+| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |
+| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |
+
+### Example: Example 4
+
+236km
+
+Vehicle
+
+POI
+
+Geofence
+
+Max height 2.5m
+
+236km
+
+#### Summary
+
+236km
+
+Vehicle
+
+POI
+
+Geofence
+
+Max height 2.5m
+
+236km
+
+#### React (tsx)
+
+```tsx
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+export default () => (
+    <div>
+        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['route']} name='236km' markerColor='bg-map-marker-route' />
+                </div>
+            </div>
+        </div>
+        <div className='bg-light map-details-view'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' fixed />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' fixed />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' fixed />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' fixed />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' fixed />
+                </div>
+            </div>
+        </div>
+
+        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' name='Vehicle' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' name='POI' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' name='Geofence' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        iconNames={['road-restrictions']}
+                        markerColor='bg-map-marker-restrictions'
+                        name='Max height 2.5m'
+                    />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['route']} name='236km' markerColor='bg-map-marker-route' />
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-25 map-details-view padding-bottom-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-poi" style="color: var(--color-map-marker-poi);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-factory">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-geofence" style="color: var(--color-map-marker-geofence);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-geofence">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-restrictions" style="color: var(--color-map-marker-restrictions);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-road-restrictions">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-route" style="color: var(--color-map-marker-route);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-route">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">236km</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bg-light map-details-view">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single fixed cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-poi" style="color: var(--color-map-marker-poi);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single fixed cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-factory">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-geofence" style="color: var(--color-map-marker-geofence);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single fixed cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-geofence">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-restrictions" style="color: var(--color-map-marker-restrictions);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single fixed cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-road-restrictions">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-route" style="color: var(--color-map-marker-route);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single fixed cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-route">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bg-light padding-top-25 map-details-view padding-bottom-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-poi" style="color: var(--color-map-marker-poi);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-factory">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">POI</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-geofence" style="color: var(--color-map-marker-geofence);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-geofence">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Geofence</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-restrictions" style="color: var(--color-map-marker-restrictions);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-road-restrictions">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Max height 2.5m</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-route" style="color: var(--color-map-marker-route);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-route">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">236km</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| bearing | Number | 0 | Defines the rotation of the arrow in deg. |
+| name | String / Node | — | Text for the Marker. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |
+| moving | Boolean | false | Defines whether the direction icon is displayed or not |
+| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |
+| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |
+| iconNames | Array of Strings | — | List of rioglyph icon names |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |
+| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |
+| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |
+| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |
+
+### Example: Example 5
+
+Vehicle
+
+Vehicle
+
+#### Summary
+
+Vehicle
+
+Vehicle
+
+#### React (tsx)
+
+```tsx
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+export default () => (
+    <div>
+        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-info' active />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-success' active />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-warning' active />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' active />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        name='Vehicle'
+                        iconNames={['truck']}
+                        stateIconName='parking'
+                        markerColor='bg-map-marker-warning'
+                    />
+                </div>
+            </div>
+        </div>
+        <div className='bg-light map-details-view'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-info' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-success' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-warning' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        name='Vehicle'
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-warning'
+                        stateIconName='antenna'
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-25 map-details-view padding-bottom-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-info" style="color: var(--color-map-marker-info);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-success" style="color: var(--color-map-marker-success);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-warning" style="color: var(--color-map-marker-warning);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-danger" style="color: var(--color-map-marker-danger);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck-breakdown">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-warning" style="color: var(--color-map-marker-warning);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state ">
+                                <span class="rioglyph rioglyph-parking">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bg-light map-details-view">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-info" style="color: var(--color-map-marker-info);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-success" style="color: var(--color-map-marker-success);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-warning" style="color: var(--color-map-marker-warning);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-danger" style="color: var(--color-map-marker-danger);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck-breakdown">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-warning" style="color: var(--color-map-marker-warning);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state ">
+                                <span class="rioglyph rioglyph-antenna">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck-breakdown">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| bearing | Number | 0 | Defines the rotation of the arrow in deg. |
+| name | String / Node | — | Text for the Marker. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |
+| moving | Boolean | false | Defines whether the direction icon is displayed or not |
+| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |
+| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |
+| iconNames | Array of Strings | — | List of rioglyph icon names |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |
+| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |
+| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |
+| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |
+
+### Example: Example 6
+
+Vehicle
+
+Vehicle
+
+The animation plays automatically when using the SingleMapMarker prop pinging
+
+#### Summary
+
+Vehicle
+
+Vehicle
+
+The animation plays automatically when using the SingleMapMarker prop pinging
+
+#### React (tsx)
+
+```tsx
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+
+export default () => (
+    <div>
+        <div className='bg-light padding-top-25'>
+            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck']}
+                        markerColor='bg-map-marker-warning'
+                        pinging
+                    />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        bearing={60}
+                        name='Vehicle'
+                        iconNames={['truck']}
+                        markerColor='bg-map-marker-danger'
+                        moving
+                        pinging
+                    />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' pinging />
+                </div>
+                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>
+                    <SingleMapMarker
+                        iconNames={['truck-breakdown']}
+                        markerColor='bg-map-marker-danger'
+                        active
+                        pinging
+                    />
+                </div>
+            </div>
+        </div>
+        <p className='margin-bottom-0'>
+            The animation plays automatically when using the SingleMapMarker prop <code className='code'>pinging</code>
+        </p>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-warning" style="color: var(--color-map-marker-warning);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single pinging cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-danger" style="color: var(--color-map-marker-danger);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single moving pinging cursor-pointer">
+                            <div class="rio-map-icon rio-map-marker-state rio-map-direction">
+                                <span class="rioglyph rioglyph-direction" style="transform: rotate(60deg);">
+                                </span>
+                            </div>
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                            <div class="rio-map-name">Vehicle</div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-danger" style="color: var(--color-map-marker-danger);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single pinging cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck-breakdown">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-bottom-center" data-marker-type="single-map-marker-danger" style="color: var(--color-map-marker-danger);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-single active pinging cursor-pointer">
+                            <div class="rio-map-icon">
+                                <span class="rioglyph rioglyph-truck-breakdown">
+                                </span>
+                            </div>
+                        </div>
+                        <div class="rio-map-anchor-arrow">
+                        </div>
+                        <div class="rio-map-anchor cursor-pointer">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <p class="margin-bottom-0">The animation plays automatically when using the SingleMapMarker prop <code class="code">pinging</code>
+    </p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| bearing | Number | 0 | Defines the rotation of the arrow in deg. |
+| name | String / Node | — | Text for the Marker. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| fixed | Boolean | false | Defines if marker is fixed and has no centering point. |
+| moving | Boolean | false | Defines whether the direction icon is displayed or not |
+| pinging | Boolean | false | Defines if marker is rendered with a pinging animation. |
+| positionIconName | String | — | Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown |
+| iconNames | Array of Strings | — | List of rioglyph icon names |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'. |
+| anchorSize | String | 'md' | Used to control the marker's size. Possible values are: md and lg. |
+| cursor | String | 'cursor-pointer' | Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed. |
+| markerOnHover | Boolean | false | Whether the marker is only visible on hover. |
+
+## ClusterMapMarker
+
+### Example: Example 7
+
+100
+
+10
+25
+
+100
+
+10
+25
+
+100
+
+100
+
+100
+
+#### Summary
+
+100
+
+10
+25
+
+100
+
+10
+25
+
+100
+
+100
+
+100
+
+#### React (tsx)
+
+```tsx
+import ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';
+
+export default () => {
+    const markerWrapperClasses =
+        'margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center';
+    return (
+        <div>
+            <div className='bg-light padding-top-15 padding-bottom-25'>
+                <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>
+                    <div className={markerWrapperClasses}>
+                        <ClusterMapMarker count={100} warningCount={25} exceptionCount={10} />
+                    </div>
+                    <div className={markerWrapperClasses}>
+                        <ClusterMapMarker count={100} warningCount={25} exceptionCount={10} active />
+                    </div>
+                    <div className={markerWrapperClasses}>
+                        <ClusterMapMarker
+                            count={100}
+                            warningCount={0}
+                            exceptionCount={0}
+                            markerColor='bg-map-marker-poi'
+                        />
+                    </div>
+                    <div className={markerWrapperClasses}>
+                        <ClusterMapMarker
+                            count={100}
+                            warningCount={0}
+                            exceptionCount={0}
+                            markerColor='bg-map-marker-geofence'
+                        />
+                    </div>
+                    <div className={markerWrapperClasses}>
+                        <ClusterMapMarker
+                            count={100}
+                            warningCount={0}
+                            exceptionCount={0}
+                            iconName='geofence'
+                            markerColor='bg-map-marker-geofence'
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="bg-light padding-top-15 padding-bottom-25">
+        <div class="margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls">
+            <div class="margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-center-center" data-marker-type="cluster-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-cluster">
+                            <div class="rio-map-cluster-circle cursor-pointer">
+                                <div class="rio-map-cluster-content">
+                                    <div class="rio-map-count">100</div>
+                                </div>
+                            </div>
+                            <div class="rio-map-bubble exception">10</div>
+                            <div class="rio-map-bubble warning">25</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="active rio-map-marker rio-map-marker-center-center" data-marker-type="cluster-map-marker-asset" style="color: var(--color-map-marker-asset);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-cluster">
+                            <div class="rio-map-cluster-circle active cursor-pointer">
+                                <div class="rio-map-cluster-content">
+                                    <div class="rio-map-count">100</div>
+                                </div>
+                            </div>
+                            <div class="rio-map-bubble exception">10</div>
+                            <div class="rio-map-bubble warning">25</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-center-center" data-marker-type="cluster-map-marker-poi" style="color: var(--color-map-marker-poi);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-cluster">
+                            <div class="rio-map-cluster-circle cursor-pointer">
+                                <div class="rio-map-cluster-content">
+                                    <div class="rio-map-count">100</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-center-center" data-marker-type="cluster-map-marker-geofence" style="color: var(--color-map-marker-geofence);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-cluster">
+                            <div class="rio-map-cluster-circle cursor-pointer">
+                                <div class="rio-map-cluster-content">
+                                    <div class="rio-map-count">100</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center">
+                <div class="rio-map-marker rio-map-marker-center-center" data-marker-type="cluster-map-marker-geofence" style="color: var(--color-map-marker-geofence);">
+                    <div class="rio-map-marker-translate">
+                        <div class="rio-map-cluster">
+                            <div class="rio-map-cluster-circle cursor-pointer">
+                                <div class="rio-map-cluster-content">
+                                    <span class="rio-map-icon">
+                                        <span class="rioglyph rioglyph-geofence">
+                                        </span>
+                                    </span>
+                                    <div class="rio-map-count">100</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| count | Number | — | Number displayed in the center. |
+| warningCount | Number | 0 | Displayed in the orange badge if more than 0. |
+| exceptionCount | Number | 0 | Displayed in the red badge if more than 0. |
+| active | Boolean | false | Defines if marker is selected or not. |
+| clickable | Boolean | true | Defines if marker is clickable or not. |
+| markerColor | String | 'bg-map-marker-asset' | Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'. |