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.
Usage example
var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow.
Creation
Factory | Description |
---|---|
L.divIcon( |
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 |
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. |
Option | Type | Default | Description |
---|---|---|---|
pane |
String
| 'overlayPane' |
By default the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. |
Events
Event | Data | Description |
---|---|---|
popupopen
| ||
popupclose
|
Event | Data | Description |
---|---|---|
tooltipopen
| ||
tooltipclose
|
Methods
Method | Returns | Description |
---|---|---|
createIcon( |
HTMLElement |
Called internally when the icon has to be shown, returns a |
createShadow( |
HTMLElement |
As |
Method | Returns | Description |
---|---|---|
bindPopup( |
this |
Binds a popup to the layer with the passed |
unbindPopup() |
this |
Removes the popup previously bound with |
openPopup( |
this |
Opens the bound popup at the specificed |
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 |
setPopupContent( |
this |
Sets the content of the popup bound to this layer. |
getPopup() |
Popup |
Returns the popup bound to this layer. |
Method | Returns | Description |
---|---|---|
bindTooltip( |
this |
Binds a tooltip to the layer with the passed |
unbindTooltip() |
this |
Removes the tooltip previously bound with |
openTooltip( |
this |
Opens the bound tooltip at the specificed |
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 |
setTooltipContent( |
this |
Sets the content of the tooltip bound to this layer. |
getTooltip() |
Tooltip |
Returns the tooltip bound to this layer. |
Method | Returns | Description |
---|---|---|
addTo( |
this |
Adds the layer to the given map |
remove() |
this |
Removes the layer from the map it is currently active on. |
removeFrom( |
this |
Removes the layer from the given map |
getPane( |
HTMLElement |
Returns the |
Method | Returns | Description |
---|---|---|
on( |
this |
Adds a listener function ( |
on( |
this |
Adds a set of type/listener pairs, e.g. |
off( |
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 |
off( |
this |
Removes a set of type/listener pairs. |
off() |
this |
Removes all listeners to all events on the object. |
fire( |
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( |
Boolean |
Returns |
once(…) |
this |
Behaves as |
addEventParent( |
this |
Adds an event parent - an |
removeEventParent( |
this |
Removes an event parent, so it will stop receiving propagated events |
addEventListener(…) |
this |
Alias to |
removeEventListener(…) |
this |
Alias to |
clearAllEventListeners(…) |
this |
Alias to |
addOneTimeEventListener(…) |
this |
Alias to |
fireEvent(…) |
this |
Alias to |
hasEventListeners(…) |
Boolean |
Alias to |