Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
You are viewing an older version of Mapbox.js. Check out v3.3.1 for the latest.
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). |