Marker

L.Marker is used to display interactive/draggable icons on the map. Extends Layer.

Usage example

L.marker([50.5, 30.5]).addTo(map);

Creation

Factory Description
L.marker(<LatLng> latlng, <Marker options> options?) Instantiates a Marker object given a geographical point and optionally an options object.

Options

Option Type Default Description
icon Icon * Icon class to use for rendering the marker. See Icon documentation for details on how to customize the marker icon. If not specified, a new L.Icon.Default is used.
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.
pane String 'markerPane' Map pane where the markers icon will be added.
Option Type Default Description
interactive Boolean true If false, the layer will not emit mouse events and will act as a part of the underlying map.

Events

Event Data Description
move Event Fired when the marker is moved via setLatLng or by dragging. Old and new coordinates are included in event arguments as oldLatLng, latlng.

Dragging events

Event Data Description
dragstart Event Fired when the user starts dragging the marker.
movestart Event Fired when the marker starts moving (because of dragging).
drag Event Fired repeatedly while the user drags the marker.
dragend DragEndEvent Fired when the user stops dragging the marker.
moveend Event Fired when the marker stops moving (because of dragging).
Event Data Description
click MouseEvent Fired when the user clicks (or taps) the layer.
dblclick MouseEvent Fired when the user double-clicks (or double-taps) the layer.
mousedown MouseEvent Fired when the user pushes the mouse button on the layer.
mouseover MouseEvent Fired when the mouse enters the layer.
mouseout MouseEvent Fired when the mouse leaves the layer.
contextmenu MouseEvent Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).
Event Data Description
add Event Fired after the layer is added to a map
remove Event Fired after the layer is removed from a map
Event Data Description
popupopen PopupEvent Fired when a popup bound to this layer is opened
popupclose PopupEvent Fired when a popup bound to this layer is closed
Event Data Description
tooltipopen TooltipEvent Fired when a tooltip bound to this layer is opened.
tooltipclose TooltipEvent Fired when a tooltip bound to this layer is closed.

Methods

In addition to shared layer methods like addTo() and remove() and popup methods like bindPopup() you can also use the following methods:
Method Returns Description
getLatLng() LatLng

Returns the current geographical position of the marker.

setLatLng(<LatLng> latlng) this

Changes the marker position to the given point.

setZIndexOffset(<Number> offset) this

Changes the zIndex offset of the marker.

setIcon(<Icon> icon) this

Changes the marker icon.

setOpacity(<Number> opacity) this

Changes the opacity of the marker.

Method Returns Description
bindPopup(<String|HTMLElement|Function|Popup> content, <Popup options> options?) this

Binds a popup to the layer with the passed content and sets up the neccessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement.

unbindPopup() this

Removes the popup previously bound with bindPopup.

openPopup(<LatLng> latlng?) this

Opens the bound popup at the specificed latlng or at the default popup anchor if no latlng is passed.

closePopup() this

Closes the popup bound to this layer if it is open.

togglePopup() this

Opens or closes the popup bound to this layer depending on its current state.

isPopupOpen() boolean

Returns true if the popup bound to this layer is currently open.

setPopupContent(<String|HTMLElement|Popup> content) this

Sets the content of the popup bound to this layer.

getPopup() Popup

Returns the popup bound to this layer.

Method Returns Description
bindTooltip(<String|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

Binds a tooltip to the layer with the passed content and sets up the neccessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement.

unbindTooltip() this

Removes the tooltip previously bound with bindTooltip.

openTooltip(<LatLng> latlng?) this

Opens the bound tooltip at the specificed latlng or at the default tooltip anchor if no latlng is passed.

closeTooltip() this

Closes the tooltip bound to this layer if it is open.

toggleTooltip() this

Opens or closes the tooltip bound to this layer depending on its current state.

isTooltipOpen() boolean

Returns true if the tooltip bound to this layer is currently open.

setTooltipContent(<String|HTMLElement|Tooltip> content) this

Sets the content of the tooltip bound to this layer.

getTooltip() Tooltip

Returns the tooltip bound to this layer.

Method Returns Description
addTo(<Map> map) this

Adds the layer to the given map

remove() this

Removes the layer from the map it is currently active on.

removeFrom(<Map> map) this

Removes the layer from the given map

getPane(<String> name?) HTMLElement

Returns the HTMLElement representing the named pane on the map. If name is omitted, returns the pane for this layer.

Method Returns Description
on(<String> type, <Function> fn, <Object> context?) this

Adds a listener function (fn) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick').

on(<Object> eventMap) this

Adds a set of type/listener pairs, e.g. {click: onClick, mousemove: onMouseMove}

off(<String> type, <Function> fn?, <Object> context?) this

Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on, you must pass the same context to off in order to remove the listener.

off(<Object> eventMap) this

Removes a set of type/listener pairs.

off() this

Removes all listeners to all events on the object.

fire(<String> type, <Object> data?, <Boolean> propagate?) this

Fires an event of the specified type. You can optionally provide an data object — the first argument of the listener function will contain its properties. The event might can optionally be propagated to event parents.

listens(<String> type) Boolean

Returns true if a particular event type has any listeners attached to it.

once() this

Behaves as on(…), except the listener will only get fired once and then removed.

addEventParent(<Evented> obj) this

Adds an event parent - an Evented that will receive propagated events

removeEventParent(<Evented> obj) this

Removes an event parent, so it will stop receiving propagated events

addEventListener() this

Alias to on(…)

removeEventListener() this

Alias to off(…)

clearAllEventListeners() this

Alias to off()

addOneTimeEventListener() this

Alias to once(…)

fireEvent() this

Alias to fire(…)

hasEventListeners() Boolean

Alias to listens(…)

Properties

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 Handler methods). Example:
marker.dragging.disable();
Property Type Description
dragging Handler Marker dragging handler (by both mouse and touch).
v1.1.0
Props Wrld.Prop
Themes Wrld.themes
Heatmaps Wrld.Heatmap
Events Event objects
Services (Optional) WrldPoiApi