maplair/src/layer/marker/DefaultIcon.js

JavaScript library for mobile-friendly interactive maps

import {Icon} from './Icon.js';
import * as DomUtil from '../../dom/DomUtil.js';

const URL_RE = /^url\((['"])?(.+)\1\)$/;
const MARKER_ICON_RE = /^(.*)marker-icon\.svg$/;

/*
 * @miniclass DefaultIcon (Icon)
 * @section
 *
 * A trivial subclass of `Icon`, represents the icon to use in `Marker`s when
 * no icon is specified. Points to the blue marker image distributed with Maplair
 * releases.
 *
 * In order to customize the default icon, just change the properties of `DefaultIcon.prototype.options`
 * (which is a set of `Icon options`).
 *
 * If you want to _completely_ replace the default icon, override the
 * `Marker.prototype.options.icon` with your own icon instead.
 */

export class DefaultIcon extends Icon {

	static {
		this.setDefaultOptions({
			iconUrl: 'marker-icon.svg',
			iconRetinaUrl: 'marker-icon.svg',
			shadowUrl: 'marker-shadow.svg',
			iconSize: [25, 41],
			iconAnchor: [12, 41],
			popupAnchor: [1, -34],
			tooltipAnchor: [16, -28],
			shadowSize: [41, 41]
		});
	}

	constructor(...args) {
		super(...args);
		this.callInitHooks(DefaultIcon);
	}

	_getIconUrl(name) {
		// only detect once
		if (!DefaultIcon.imagePath) {
			DefaultIcon.imagePath = this._detectIconPath();
		}

		const url = super._getIconUrl(name);
		if (!url) {
			return null;
		}

		// @option imagePath: String
		// `DefaultIcon` will try to auto-detect the location of the
		// blue icon images. If you are placing these images in a non-standard
		// way, set this option to point to the right path.
		return (this.options.imagePath ?? DefaultIcon.imagePath) + url;
	}

	_stripUrl(path) {	// separate function to use in tests
		const strip = function (str, re, idx) {
			const match = re.exec(str);
			return match && match[idx];
		};
		path = strip(path, URL_RE, 2);
		return path && strip(path, MARKER_ICON_RE, 1);
	}

	_detectIconPath() {
		const el = DomUtil.create('div',  'maplair-default-icon-path', document.body);
		const path = this._stripUrl(getComputedStyle(el).backgroundImage);

		document.body.removeChild(el);
		if (path) { return path; }
		const link = document.querySelector('link[href$="maplair.css"]');
		if (!link) { return ''; }
		return link.href.substring(0, link.href.length - 'maplair.css'.length - 1);
	}
}