Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
Marker
Used to put markers on the map.
L.marker([50.5, 30.5]).addTo(map);
Creation
Factory | Description |
---|---|
L.marker(
|
Instantiates a Marker object given a geographical point and optionally an options object. |
Options
Option | Type | Default | Description |
---|---|---|---|
icon |
L.Icon |
* | Icon class to use for rendering the marker. See Icon documentation for details on how to customize the marker icon. Set to new L.Icon.Default() by default. |
clickable |
Boolean |
true |
If false , the marker will not emit mouse events and will act as a part of the underlying map. |
draggable |
Boolean |
false |
Whether the marker is draggable with mouse/touch or not. |
keyboard |
Boolean |
true |
Whether the marker can be tabbed to with a keyboard and clicked by pressing enter. |
title |
String |
'' |
Text for the browser tooltip that appear on marker hover (no tooltip by default). |
alt |
String |
'' |
Text for the alt attribute of the icon image (useful for accessibility). |
zIndexOffset |
Number |
0 |
By default, marker images zIndex is set automatically based on its latitude. Use this option if you want to put the marker on top of all others (or below), specifying a high value like 1000 (or high negative value, respectively). |
opacity |
Number |
1.0 |
The opacity of the marker. |
riseOnHover |
Boolean |
false |
If true , the marker will get on top of others when you hover the mouse over it. |
riseOffset |
Number |
250 |
The z-index offset used for the riseOnHover feature. |
Events
You can subscribe to the following events using these methods.
Event | Data | Description |
---|---|---|
click |
MouseEvent |
Fired when the user clicks (or taps) the marker. |
dblclick |
MouseEvent |
Fired when the user double-clicks (or double-taps) the marker. |
mousedown |
MouseEvent |
Fired when the user pushes the mouse button on the marker. |
mouseover |
MouseEvent |
Fired when the mouse enters the marker. |
mouseout |
MouseEvent |
Fired when the mouse leaves the marker. |
contextmenu |
MouseEvent
| Fired when the user right-clicks on the marker. |
dragstart |
Event |
Fired when the user starts dragging the marker. |
drag |
Event |
Fired repeatedly while the user drags the marker. |
dragend |
DragEndEvent |
Fired when the user stops dragging the marker. |
move |
Event |
Fired when the marker is moved via setLatLng. New coordinate include in event arguments. |
add |
Event |
Fired when the marker is added to the map. |
remove |
Event |
Fired when the marker is removed from the map. |
popupopen |
PopupEvent |
Fired when a popup bound to the marker is open. |
popupclose |
PopupEvent |
Fired when a popup bound to the marker is closed. |
Methods
Method | Returns | Description |
---|---|---|
addTo(
|
this |
Adds the marker to the map. |
getLatLng() |
LatLng |
Returns the current geographical position of the marker. |
setLatLng(
|
this |
Changes the marker position to the given point. |
setIcon(
|
this |
Changes the marker icon. |
setZIndexOffset(
|
this |
Changes the zIndex offset of the marker. |
setOpacity(
|
this |
Changes the opacity of the marker. |
update()
|
this |
Updates the marker position, useful if coordinates of its latLng object were changed directly. |
bindPopup(
|
this |
Binds a popup with a particular HTML content to a click on this marker. You can also open the bound popup with the Marker openPopup method. |
unbindPopup() |
this |
Unbinds the popup previously bound to the marker with bindPopup . |
openPopup() |
this |
Opens the popup previously bound by the bindPopup method. |
getPopup() |
Popup |
Returns the popup previously bound by the bindPopup method. |
closePopup() |
this |
Closes the bound popup of the marker if it's opened. |
togglePopup() |
this |
Toggles the popup previously bound by the bindPopup method. |
setPopupContent(
|
this |
Sets an HTML content of the popup of this marker. |
toGeoJSON() |
Object |
Returns a GeoJSON representation of the marker (GeoJSON Point Feature). |
Interaction handlers
Interaction handlers are properties of a marker instance that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging (see IHandler methods). Example:
marker.dragging.disable();
Property | Type | Description |
---|---|---|
dragging | IHandler |
Marker dragging handler (by both mouse and touch). |