Markers and popups
Elements that can be added to the map. The items in this section exist outside of the map's
canvas element.
Marker
Creates a marker component
Example
Parameters
(Object?)
| options.element | DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker. |
|---|---|
| options.anchor
default: 'center'
|
A string indicating the part of the Marker that should be
positioned closest to the coordinate set via
Marker#setLngLat
.
Options are
'center'
,
'top'
,
'bottom'
,
'left'
,
'right'
,
'top-left'
,
'top-right'
,
'bottom-left'
, and
'bottom-right'
.
|
| options.offset | The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. |
| options.color
default: '#3FB1CE'
|
The color to use for the default marker if options.element is not provided. The default is light blue. |
| options.scale
default: 1
|
The scale to use for the default marker if options.element is
not provided. The default scale corresponds to a height of
41px
and a width of
27px
.
|
| options.draggable
default: false
|
A boolean indicating whether or not a marker is able to be dragged to a new position on the map. |
| options.clickTolerance
default: 0
|
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). The default is to inherit map's clickTolerance. |
| options.rotation
default: 0
|
The rotation angle of the marker in degrees, relative to its
respective
rotationAlignment
setting. A positive value will rotate the marker clockwise.
|
| options.pitchAlignment
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
.
|
| options.rotationAlignment
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
.
|
(MarkerOptions?)Methods
Get the marker's geographical location.
The longitude of the result may differ by a multiple of 360 degrees from the longitude previously
set by setLngLat because Marker wraps the anchor longitude across copies of the
world to keep
the marker on screen.
Returns
LngLat: A
LngLat
describing the marker's location.
Example
Related examples
Set the marker's geographical position and move it.
Parameters
Returns
Marker:
this
Example
Related examples
Sets the offset of the marker
Parameters
(PointLike)The
offset in pixels as a
PointLike
object to apply relative to the element's center. Negatives indicate left and up.
Returns
Marker:
this
Sets the pitchAlignment property of the marker.
Parameters
(string?)Sets
the
pitchAlignment
property of the marker. If alignment is 'auto', it will automatically match
rotationAlignment
.
Returns
Marker:
this
Parameters
((Popup | null)?)An
instance of the
Popup
class. If undefined or null, any popup
set on this
Marker
instance is unset.
Returns
Marker:
this
Example
Related examples
Sets the rotation property of the marker.
Parameters
(number)(default
0)The rotation angle of the marker (clockwise, in degrees), relative to its
respective
Marker#setRotationAlignment
setting.
Returns
Marker:
this
Events
Related examples
Popup
A popup component.
Example
Parameters
(Object?)
| options.closeButton
default: true
|
If
true
, a close button will appear in the
top right corner of the popup.
|
|---|---|
| options.closeOnClick
default: true
|
If
true
, the popup will closed when the
map is clicked.
|
| options.closeOnMove
default: false
|
If
true
, the popup will closed when the
map moves.
|
| options.focusAfterOpen
default: true
|
If
true
, the popup will try to focus the
first focusable element inside the popup.
|
| options.anchor | A string indicating the part of the Popup that should
be positioned closest to the coordinate set via
Popup#setLngLat
.
Options are
'center'
,
'top'
,
'bottom'
,
'left'
,
'right'
,
'top-left'
,
'top-right'
,
'bottom-left'
, and
'bottom-right'
. If unset the anchor will be
dynamically set to ensure the popup falls within the map container with a preference
for
'bottom'
.
|
| options.offset | A pixel offset applied to the popup's location specified as: |
| options.className | Space-separated CSS class names to add to popup container |
| options.maxWidth
default: '240px'
|
A string that sets the CSS property of the popup's maximum
width, eg
'300px'
.
To ensure the popup resizes to fit its content, set this property to
'none'
.
Available values can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
|
Methods
Returns the geographical location of the popup's anchor.
The longitude of the result may differ by a multiple of 360 degrees from the longitude previously
set by setLngLat because Popup wraps the anchor longitude across copies of the
world to keep
the popup on screen.
Returns
LngLat: The
geographical location of the popup's anchor.
Sets the popup's content to the element provided as a DOM node.
Parameters
Returns
Popup:
this
Example
Sets the popup's content to the HTML provided as a string.
This method does not perform HTML filtering or sanitization, and must be used only with trusted content. Consider Popup#setText if the content is an untrusted text string.
Parameters
Returns
Popup:
this
Example
Related examples
Sets the geographical location of the popup's anchor, and moves the popup to it. Replaces trackPointer() behavior.
Parameters
Returns
Popup:
this
Sets the popup's maximum width. This is setting the CSS property max-width.
Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
Parameters
Returns
Popup:
this
Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
Parameters
Returns
boolean:
if the class was removed return false, if class was added, then return true
Example
