markers

DG.Marker

DG.Marker is used to display clickable/draggable icons on the map.

DG.marker([54.98, 82.89]).addTo(map);

Creation

Factory	Description
DG.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. Set to new DG.Icon.Default() by default.
interactive	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.
pane	String	'markerPane'	Map pane where the markers icon will be added.

Events

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.
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).

Events inherited from Layer

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

Popup events inherited from Layer

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

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.
bindLabel(<String> content, <Label options> options?)	this	{/* TODO: translate */}
unbindLabel()	this	{/* TODO: translate */}
showLabel()	this	{/* TODO: translate */}
hideLabel()	this	{/* TODO: translate */}

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

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).

DG.Icon

Represents an icon to provide when creating a marker.

var myIcon = DG.icon({
    iconUrl: 'my-icon.png',
    iconRetinaUrl: 'my-icon@2x.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowRetinaUrl: 'my-icon-shadow@2x.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94],
});

DG.marker([50.505, 30.57], { icon: myIcon }).addTo(map);

Creation

Factory	Description
DG.icon( <Icon options> options)	Creates an icon instance with the given options.

Options

Option	Type	Default	Description
iconUrl	String	null	(required) The URL to the icon image (absolute or relative to your script path).
iconRetinaUrl	String	null	The URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices.
iconSize	Point	null	Size of the icon image in pixels.
iconAnchor	Point	null	The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
popupAnchor	Point	null	The coordinates of the point from which popups will "open", relative to the icon anchor.
shadowUrl	String	null	The URL to the icon shadow image. If not specified, no shadow image will be created.
shadowRetinaUrl	String	null
shadowSize	Point	null	Size of the shadow image in pixels.
shadowAnchor	Point	null	The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
className	String	''	A custom class name to assign to both icon and shadow images. Empty by default.

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Method	Returns	Description
createIcon(<HTMLElement> oldIcon?)	HTMLElement	Called internally when the icon has to be shown, returns a <img> HTML element styled according to the options.
createShadow(<HTMLElement> oldIcon?)	HTMLElement	As createIcon, but for the shadow beneath it.

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.DivIcon

Represents a lightweight icon for markers that uses a simple <div> element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.

// you can set .my-div-icon styles in CSS
var myIcon = DG.divIcon({ className: 'my-div-icon' });

DG.marker([50.505, 30.57], { icon: myIcon }).addTo(map);

Creation

Factory	Description
DG.DivIcon( <DivIcon options> options )	Creates a DivIcon instance with the given options.

Options

Option	Type	Default	Description
html	String	''	Custom HTML code to put inside the div element, empty by default.
bgPos	Point	[0, 0]	Optional relative position of the background, in pixels

Options inherited from Icon

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Methods inherited from Icon

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented