# Marker

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
*Captured:* 2026-04-27T14:58:49.189Z

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–2026 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

#### 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

#### 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

#### 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

#### 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

#### 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

#### 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'. |