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
unbindLabel() this
showLabel() this
hideLabel() this

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