import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import Basic from "examples/fixed-marker/basic.tsx";
import StartEnhancer from "examples/fixed-marker/start-enhancer.tsx";
import EndEnhancerColor from "examples/fixed-marker/end-enhancer-color.tsx";
import StartEnhancerLarge from "examples/fixed-marker/start-enhancer-large.tsx";
import Dragging from "examples/fixed-marker/dragging.tsx";
import XSmall from "examples/fixed-marker/x-small.tsx";
import ReactMapGL from "examples/fixed-marker/react-map-gl.tsx";
import ReactMapGLDragging from "examples/fixed-marker/react-map-gl-dragging.tsx";
import BadgeEnhancerText from "examples/fixed-marker/badge-enhancer-text.tsx";
import BadgeAndLabelEnhancers from "examples/fixed-marker/badge-and-label-enhancers.tsx";
import { FixedMarkerSizingTable } from "../../components/map-marker-sizing-table.jsx";

import Yard from "../../components/yard/index";
import fixedMarkerYardConfig from "../../components/yard/config/fixed-marker";

import * as FixedMarkerExports from "baseui/map-marker";

export default Layout;

# Fixed Marker

<Yard placeholderHeight={48} {...fixedMarkerYardConfig} />

A fixed map marker is used to mark a location on a map with content.

## When to use

Use a fixed marker when you are showcasing specific points or areas. Think of it like a pin pushed into a wallmap. The content won’t move around or adjust, it’s not travelling around, and it’s not attached to something dynamic.

Fixed markers are particularly helpful in draggable location setting situations, such as dragging around a marker to set your location.

For more information on the design principles behind the Base map markers, please visit the official [Base design website documentation](https://base.uber.com/map-usage-markers).

## Guidelines

### General

- A fixed marker pinhead may have up to 5 sizes: `xxSmall`, `xSmall`, `small`, `medium`, and `large`.
  - The `xxSmall` or `xSmall` pinhead sizes cannot contain any content.
- A fixed marker may have either no needle or a choice of 3 different sizes: `short`, `medium`, or `tall`.
- A fixed marker without a label can only have one icon. As such, do not use both a `startEnhancer` and an `endEnhancer` if there is no label.
- A fixed marker can have a kind property that changes the colors of PinHead, Needle and DragShadow.
- A fixed marker can have a badge enhancer of the following sizes: `xSmall`, `small`, `mediumText`, `mediumIcon`.
  - The `xSmall` cannot have any content.
  - The `small` can only have an icon as a content.
  - The `mediumText` can have a text content. It adds padding to the sides.
  - The `mediumIcon` can have an icon as a content. Displayed as a circle.
- A fixed marker can have a label enhancer that can be poistioned at the `top`, `bottom`, `left`, `right` of the marker.

### Start/End Enhancer sizing

- The size of an enhancer depends on the pinhead size you are using. Refer to the table below for the proper enhancer sizes.

<FixedMarkerSizingTable />

## Examples

<Example title="Basic usage with label" path="fixed-marker/basic.tsx">
  <Basic />
</Example>

A fixed map marker with only a label. Default size is medium.

<Example
  title="Start enhancer with label"
  path="fixed-marker/start-enhancer.tsx"
>
  <StartEnhancer />
</Example>

A fixed map marker with a start enhancer icon and a label. Icons can be passed to the leading or trailing end of the markers with `startEnhancer` and `endEnhancer`.

<Example
  title="End enhancer with custom color"
  path="fixed-marker/end-enhancer-color.tsx"
>
  <EndEnhancerColor />
</Example>

A fixed map marker with an end enhancer icon, a label, and custom styling.

<Example
  title="Large size with only an icon"
  path="fixed-marker/start-enhancer-large.tsx"
>
  <StartEnhancerLarge />
</Example>

A large fixed marker with a start enhancer. To only include a single icon without any other text, use `startEnhancer`. Because the pinhead is size large, make sure to pass the `size` parameter as prop to ensure the icon receives the proper size.

<Example title="Dragging state" path="fixed-marker/dragging.tsx">
  <Dragging />
</Example>

A fixed marker with the dragging decoration enabled.

<Example title="X small marker" path="fixed-marker/x-small.tsx">
  <XSmall />
</Example>

An extra small marker with a tall needle. The X small marker is the same anchor used by the [Floating Marker](../floating-marker).

<Example
  title="Marker with a badge enhancer with text"
  path="fixed-marker/badge-enhancer-text"
>
  <BadgeEnhancerText />
</Example>

A fixed map marker with a badge enhancer that contains text and has a green background color.

<Example
  title="Marker with a small badge enhancer and a label enhancer"
  path="fixed-marker/badge-and-label-enhancers"
>
  <BadgeAndLabelEnhancers />
</Example>

A fixed map marker with a small badge enhancer that contains an icon and a label enhancer placed at the bottom.

<Example title="Usage with react-map-gl" path="fixed-marker/react-map-gl.tsx">
  <ReactMapGL />
</Example>

A fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. In order to use a fixed map marker in react-map-gl, wrap the fixed marker with a [`<Marker/>`](https://visgl.github.io/react-map-gl/docs/api-reference/marker) component. In order to properly center the marker on the intended position, translate the marker using an override on the `Root`.

<Example
  title="Draggable marker with react-map-gl"
  path="fixed-marker/react-map-gl-dragging.tsx"
>
  <ReactMapGLDragging />
</Example>

A draggable fixed map marker rendered inside of a [react-map-gl](https://visgl.github.io/react-map-gl/) view. Everytime the marker is dragged, the `dragging` prop is updated and the marker position is updated.

<Exports
  component={FixedMarkerExports}
  title="Fixed Marker exports"
  path="baseui/map-marker"
/>