maplair/dist/esm/layer/marker/Icon.js

JavaScript library for mobile-friendly interactive maps

import { setOptions } from "../../core/Util.js";
import { Class } from "../../core/Class.js";
import { Point } from "../../geometry/Point.js";
import Browser_default from "../../core/Browser.js";
//#region src/layer/marker/Icon.js
var Icon = class Icon extends Class {
	static {
		this.setDefaultOptions({
			popupAnchor: [0, 0],
			tooltipAnchor: [0, 0],
			crossOrigin: false
		});
	}
	constructor(options) {
		super();
		setOptions(this, options);
		this.callInitHooks(Icon);
	}
	createIcon(oldIcon) {
		return this._createIcon("icon", oldIcon);
	}
	createShadow(oldIcon) {
		return this._createIcon("shadow", oldIcon);
	}
	_createIcon(name, oldIcon) {
		const src = this._getIconUrl(name);
		if (!src) {
			if (name === "icon") throw new Error("iconUrl not set in Icon options (see the docs).");
			return null;
		}
		const img = this._createImg(src, oldIcon && oldIcon.tagName === "IMG" ? oldIcon : null);
		this._setIconStyles(img, name);
		if (this.options.crossOrigin || this.options.crossOrigin === "") img.crossOrigin = this.options.crossOrigin === true ? "" : this.options.crossOrigin;
		return img;
	}
	_setIconStyles(img, name) {
		const options = this.options;
		let sizeOption = options[`${name}Size`];
		if (typeof sizeOption === "number") sizeOption = [sizeOption, sizeOption];
		const size = Point.validate(sizeOption) && new Point(sizeOption);
		const anchorPosition = name === "shadow" && options.shadowAnchor || options.iconAnchor || size && size.divideBy(2, true);
		const anchor = Point.validate(anchorPosition) && new Point(anchorPosition);
		img.className = `maplair-marker-${name} ${options.className || ""}`;
		if (anchor) {
			img.style.marginLeft = `${-anchor.x}px`;
			img.style.marginTop = `${-anchor.y}px`;
		}
		if (size) {
			img.style.width = `${size.x}px`;
			img.style.height = `${size.y}px`;
		}
	}
	_createImg(src, el) {
		el ??= document.createElement("img");
		el.src = src;
		return el;
	}
	_getIconUrl(name) {
		return Browser_default.retina && this.options[`${name}RetinaUrl`] || this.options[`${name}Url`];
	}
};
//#endregion
export { Icon };

//# sourceMappingURL=Icon.js.map