Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
DivIcon
Represents a lightweight icon for markers that uses a simple div
element instead of an image.
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'
class and is styled as a little white square with a shadow.
Creation
Factory | Description |
---|---|
L.divIcon(
|
Creates a div icon instance with the given options. |
Options
Option | Type | Description |
---|---|---|
iconSize |
Point |
Size of the icon in pixels. Can be also set through CSS. |
iconAnchor |
Point |
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. |
className |
String
| A custom class name to assign to the icon. 'leaflet-div-icon' by default. |
html |
String
| A custom HTML code to put inside the div element, empty by default. |