maplair/dist/esm/layer/ImageOverlay.js

JavaScript library for mobile-friendly interactive maps

import { falseFn, setOptions, splitWords } from "../core/Util.js";
import { create, setPosition, setTransform, toBack, toFront } from "../dom/DomUtil.js";
import { Bounds } from "../geometry/Bounds.js";
import { LatLngBounds } from "../geo/LatLngBounds.js";
import { Layer } from "./Layer.js";
//#region src/layer/ImageOverlay.js
var ImageOverlay = class ImageOverlay extends Layer {
	static {
		this.setDefaultOptions({
			opacity: 1,
			alt: "",
			interactive: false,
			crossOrigin: false,
			errorOverlayUrl: "",
			zIndex: 1,
			className: "",
			decoding: "auto"
		});
	}
	constructor(url, bounds, options) {
		super();
		this._url = url;
		this._bounds = new LatLngBounds(bounds);
		setOptions(this, options);
		this.callInitHooks(ImageOverlay);
	}
	onAdd() {
		if (!this._image) {
			this._initImage();
			if (this.options.opacity < 1) this._updateOpacity();
		}
		if (this.options.interactive) {
			this._image.classList.add("maplair-interactive");
			this.addInteractiveTarget(this._image);
		}
		this.getPane().appendChild(this._image);
		this._reset();
	}
	onRemove() {
		this._image.remove();
		if (this.options.interactive) this.removeInteractiveTarget(this._image);
	}
	setOpacity(opacity) {
		this.options.opacity = opacity;
		if (this._image) this._updateOpacity();
		return this;
	}
	setStyle(styleOpts) {
		if (styleOpts.opacity) this.setOpacity(styleOpts.opacity);
		return this;
	}
	bringToFront() {
		if (this._map) toFront(this._image);
		return this;
	}
	bringToBack() {
		if (this._map) toBack(this._image);
		return this;
	}
	setUrl(url) {
		this._url = url;
		if (this._image) this._image.src = url;
		return this;
	}
	setBounds(bounds) {
		this._bounds = new LatLngBounds(bounds);
		if (this._map) this._reset();
		return this;
	}
	getEvents() {
		const events = {
			zoom: this._reset,
			viewreset: this._reset
		};
		if (this._zoomAnimated) events.zoomanim = this._animateZoom;
		return events;
	}
	setZIndex(value) {
		this.options.zIndex = value;
		this._updateZIndex();
		return this;
	}
	getBounds() {
		return this._bounds;
	}
	getElement() {
		return this._image;
	}
	_initImage() {
		const wasElementSupplied = this._url.tagName === "IMG";
		const img = this._image = wasElementSupplied ? this._url : create("img");
		img.classList.add("maplair-image-layer");
		if (this._zoomAnimated) img.classList.add("maplair-zoom-animated");
		if (this.options.className) img.classList.add(...splitWords(this.options.className));
		img.onselectstart = falseFn;
		img.onpointermove = falseFn;
		img.onload = this.fire.bind(this, "load");
		img.onerror = this._overlayOnError.bind(this);
		if (this.options.crossOrigin || this.options.crossOrigin === "") img.crossOrigin = this.options.crossOrigin === true ? "" : this.options.crossOrigin;
		img.decoding = this.options.decoding;
		if (this.options.zIndex) this._updateZIndex();
		if (wasElementSupplied) {
			this._url = img.src;
			return;
		}
		img.src = this._url;
		img.alt = this.options.alt;
	}
	_animateZoom(e) {
		const scale = this._map.getZoomScale(e.zoom), offset = this._map._latLngBoundsToNewLayerBounds(this._bounds, e.zoom, e.center).min;
		setTransform(this._image, offset, scale);
	}
	_reset() {
		const image = this._image, bounds = new Bounds(this._map.latLngToLayerPoint(this._bounds.getNorthWest()), this._map.latLngToLayerPoint(this._bounds.getSouthEast())), size = bounds.getSize();
		setPosition(image, bounds.min);
		image.style.width = `${size.x}px`;
		image.style.height = `${size.y}px`;
	}
	_updateOpacity() {
		this._image.style.opacity = this.options.opacity;
	}
	_updateZIndex() {
		if (this._image && this.options.zIndex !== void 0 && this.options.zIndex !== null) this._image.style.zIndex = this.options.zIndex;
	}
	_overlayOnError() {
		this.fire("error");
		const errorUrl = this.options.errorOverlayUrl;
		if (errorUrl && this._url !== errorUrl) {
			this._url = errorUrl;
			this._image.src = errorUrl;
		}
	}
	getCenter() {
		return this._bounds.getCenter();
	}
};
//#endregion
export { ImageOverlay };

//# sourceMappingURL=ImageOverlay.js.map