L.ImageOverlay

ImageOverlay

Used to load and display a single image over specific bounds of the map. Extends Layer.

Usage example

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

Creation

Factory	Description
`L.imageOverlay(<String> imageUrl, <LatLngBounds> bounds, <ImageOverlay options> options?)`	Instantiates an image overlay object given the URL of the image and the geographical bounds it is tied to.

Options

Option	Type	Default	Description
`opacity`	`Number`	`1.0`	The opacity of the image overlay.
`alt`	`String`	`''`	Text for the `alt` attribute of the image (useful for accessibility).
`interactive`	`Boolean`	`false`	If `true`, the image overlay will emit mouse events when clicked or hovered.
`attribution`	`String`	`null`	An optional string containing HTML to be shown on the `Attribution control`
`crossOrigin`	`Boolean`	`false`	If true, the image will have its crossOrigin attribute set to ''. This is needed if you want to access image pixel data.

▶ Options inherited from Layer

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

▶ Mouse events inherited from Interactive layer

Event	Data	Description
`click`	`MouseEvent`	Fired when the user clicks (or taps) the layer.
`dblclick`	`MouseEvent`	Fired when the user double-clicks (or double-taps) the layer.
`mousedown`	`MouseEvent`	Fired when the user pushes the mouse button on the layer.
`mouseover`	`MouseEvent`	Fired when the mouse enters the layer.
`mouseout`	`MouseEvent`	Fired when the mouse leaves the layer.
`contextmenu`	`MouseEvent`	Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press).

▶ 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

▶ Tooltip events inherited from Layer

Event	Data	Description
`tooltipopen`	`TooltipEvent`	Fired when a tooltip bound to this layer is opened.
`tooltipclose`	`TooltipEvent`	Fired when a tooltip bound to this layer is closed.

Methods

Method	Returns	Description
`setOpacity(<Number> opacity)`	`this`	Sets the opacity of the overlay.
`bringToFront()`	`this`	Brings the layer to the top of all overlays.
`bringToBack()`	`this`	Brings the layer to the bottom of all overlays.
`setUrl(<String> url)`	`this`	Changes the URL of the image.

▶ Popup methods inherited from Layer

Method	Returns	Description
`bindPopup(<String\|HTMLElement\|Function\|Popup> content, <Popup options> options?)`	`this`	Binds a popup to the layer with the passed `content` and sets up the neccessary event listeners. If a `Function` is passed it will receive the layer as the first argument and should return a `String` or `HTMLElement`.
`unbindPopup()`	`this`	Removes the popup previously bound with `bindPopup`.
`openPopup(<LatLng> latlng?)`	`this`	Opens the bound popup at the specificed `latlng` or at the default popup anchor if no `latlng` is passed.
`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 `true` if the popup bound to this layer is currently open.
`setPopupContent(<String\|HTMLElement\|Popup> content)`	`this`	Sets the content of the popup bound to this layer.
`getPopup()`	`Popup`	Returns the popup bound to this layer.

▶ Tooltip methods inherited from Layer

Method	Returns	Description
`bindTooltip(<String\|HTMLElement\|Function\|Tooltip> content, <Tooltip options> options?)`	`this`	Binds a tooltip to the layer with the passed `content` and sets up the neccessary event listeners. If a `Function` is passed it will receive the layer as the first argument and should return a `String` or `HTMLElement`.
`unbindTooltip()`	`this`	Removes the tooltip previously bound with `bindTooltip`.
`openTooltip(<LatLng> latlng?)`	`this`	Opens the bound tooltip at the specificed `latlng` or at the default tooltip anchor if no `latlng` is passed.
`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 `true` if the tooltip bound to this layer is currently open.
`setTooltipContent(<String\|HTMLElement\|Tooltip> content)`	`this`	Sets the content of the tooltip bound to this layer.
`getTooltip()`	`Tooltip`	Returns the tooltip bound to this layer.

▶ Methods inherited from Layer

Method	Returns	Description
`addTo(<Map> map)`	`this`	Adds the layer to the given map
`remove()`	`this`	Removes the layer from the map it is currently active on.
`removeFrom(<Map> map)`	`this`	Removes the layer from the given map
`getPane(<String> name?)`	`HTMLElement`	Returns the `HTMLElement` representing the named pane on the map. If `name` is omitted, returns the pane for this layer.

▶ Methods inherited from Evented

Method	Returns	Description
`on(<String> type, <Function> fn, <Object> context?)`	`this`	Adds a listener function (`fn`) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. `'click dblclick'`).
`on(<Object> eventMap)`	`this`	Adds a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}`
`off(<String> type, <Function> fn?, <Object> context?)`	`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 `on`, you must pass the same context to `off` in order to remove the listener.
`off(<Object> eventMap)`	`this`	Removes a set of type/listener pairs.
`off()`	`this`	Removes all listeners to all events on the object.
`fire(<String> type, <Object> data?, <Boolean> propagate?)`	`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(<String> type)`	`Boolean`	Returns `true` if a particular event type has any listeners attached to it.
`once(…)`	`this`	Behaves as `on(…)`, except the listener will only get fired once and then removed.
`addEventParent(<Evented> obj)`	`this`	Adds an event parent - an `Evented` that will receive propagated events
`removeEventParent(<Evented> obj)`	`this`	Removes an event parent, so it will stop receiving propagated events
`addEventListener(…)`	`this`	Alias to `on(…)`
`removeEventListener(…)`	`this`	Alias to `off(…)`
`clearAllEventListeners(…)`	`this`	Alias to `off()`
`addOneTimeEventListener(…)`	`this`	Alias to `once(…)`
`fireEvent(…)`	`this`	Alias to `fire(…)`
`hasEventListeners(…)`	`Boolean`	Alias to `listens(…)`