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