mirror of
https://github.com/visgl/react-map-gl.git
synced 2025-12-08 20:16:02 +00:00
115 lines
3.3 KiB
Markdown
115 lines
3.3 KiB
Markdown
# Marker
|
|
|
|
|
|
|
|
React component that wraps [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker).
|
|
|
|
```js
|
|
import * as React from 'react';
|
|
import Map, {Marker} from 'react-map-gl';
|
|
|
|
function App() {
|
|
return <Map
|
|
initialViewState={{
|
|
longitude: -100,
|
|
latitude: 40,
|
|
zoom: 3.5
|
|
}}
|
|
mapStyle="mapbox://styles/mapbox/streets-v9"
|
|
>
|
|
<Marker longitude={-100} latitude={40} anchor="bottom" >
|
|
<img src="./pin.png" />
|
|
</Marker>
|
|
</Map>;
|
|
}
|
|
```
|
|
|
|
If `Marker` is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.
|
|
|
|
## Properties
|
|
|
|
### Render options
|
|
|
|
#### anchor: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
|
|
|
Default: `'center'`
|
|
|
|
A string indicating the part of the Marker that should be positioned closest to the coordinate set via `longitude` and `latitude`.
|
|
|
|
#### color: string
|
|
|
|
Default: `'#3FB1CE'`
|
|
|
|
The color to use for the default marker if the component contains no content.
|
|
|
|
#### clickTolerance: number
|
|
|
|
Default: `null` (inherits [Map](/docs/api-reference/map.md)'s `clickTolerance`)
|
|
|
|
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag).
|
|
|
|
#### draggable: boolean
|
|
|
|
Default: `false`
|
|
|
|
If `true`, the marker is able to be dragged to a new position on the map.
|
|
|
|
#### latitude: number
|
|
|
|
Required. The latitude of the anchor location.
|
|
|
|
#### longitude: number
|
|
|
|
Required. The longitude of the anchor location.
|
|
|
|
#### offset: PointLike
|
|
|
|
Default: `null`
|
|
|
|
The offset in pixels as a [PointLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike) object to apply relative to the element's center. Negatives indicate left and up.
|
|
|
|
#### pitchAlignment: 'map' | 'viewport' | 'auto'
|
|
|
|
Default: `'auto'`
|
|
|
|
- `map` aligns the `Marker` to the plane of the map.
|
|
- `viewport` aligns the `Marker` to the plane of the viewport.
|
|
- `auto` automatically matches the value of `rotationAlignment`.
|
|
|
|
#### rotation: number
|
|
|
|
Default: `0`
|
|
|
|
The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
|
|
|
|
#### rotationAlignment: 'map' | 'viewport' | 'auto'
|
|
|
|
Default: `'auto'`
|
|
|
|
- `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
|
|
- `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
|
|
- `auto` is equivalent to `viewport`.
|
|
|
|
#### scale: number
|
|
|
|
Default: `1`
|
|
|
|
The scale to use for the default marker if the component contains no content.
|
|
The default scale (`1`) corresponds to a height of `41px` and a width of `27px`.
|
|
|
|
This prop is not reactive (only used when the marker is mounted).
|
|
|
|
### Callbacks
|
|
|
|
#### onDragStart: (evt: MarkerDragEvent) => void
|
|
|
|
Called when dragging starts, if `draggable` is `true`.
|
|
|
|
#### onDrag: (evt: MarkerDragEvent) => void
|
|
|
|
Called while dragging, if `draggable` is `true`.
|
|
|
|
#### onDragEnd: (evt: MarkerDragEvent) => void
|
|
|
|
Called when dragging ends, if `draggable` is `true`.
|