/*
MIT License
Copyright (c) 2023 Ricky Brundritt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function (exports) {
'use strict';
/** A framework for templatable SVG images. */
var SvgTemplateManager = /** @class */ (function () {
function SvgTemplateManager() {
}
/************************
* Public functions
***********************/
/**
* Adds an image template to the SvgTemplateManager.
* @param templateName The name of the template.
* @param template The SVG template to add. Supports `{color}`, `{secondaryColor}`, `{scale}`, and `{text}`
* @param override Specifies if it should override existing templates if one with the same name already exists.
*/
SvgTemplateManager.addTemplate = function (templateName, template, override) {
var imageTemplates = SvgTemplateManager._imageTemplates;
if (override || !imageTemplates[templateName.toLowerCase()]) {
imageTemplates[templateName.toLowerCase()] = template;
}
};
/**
* Inflates a template and converts it into an HTMLElement.
* @param templateName The name of the template to inflate.
* @param text Text to display in the template.
* @param color Primary color.
* @param secondaryColor Secondary colors.
* @param scale Scale of the template.
* @returns
*/
SvgTemplateManager.getElement = function (templateName, text, color, secondaryColor, scale) {
if (text === void 0) { text = ''; }
if (color === void 0) { color = '#1A73AA'; }
if (secondaryColor === void 0) { secondaryColor = 'white'; }
if (scale === void 0) { scale = 1; }
var htmlEle = document.createElement("div");
htmlEle.innerHTML = SvgTemplateManager._applyStyle(templateName, text, color, secondaryColor, scale);
return htmlEle;
};
/**
* Retrieves an SVG template by name.
* @param templateName The name of the template to retrieve.
* @param scale Optional. A value indicating how much to scale the image.
*/
SvgTemplateManager.getTemplate = function (templateName, scale) {
if (scale === void 0) { scale = 1; }
scale = Math.abs(scale || 1);
var imageTemplates = SvgTemplateManager._imageTemplates;
if (typeof templateName === "string" && imageTemplates[templateName.toLowerCase()]) {
var template = imageTemplates[templateName.toLowerCase()];
// Firefox/Edge don't support calc for inline SVG's. Need to manually calculate this.
var pattern = /calc\(([0-9.]+)[px]*\s*\*\s*\{scale\}\)/gi;
var t = template;
var match = pattern.exec(template);
while (match) {
t = t.replace(match[0], parseFloat(match[1]) * scale + "");
match = pattern.exec(template);
}
// Just for good measure incase the pattern doesn't match.
t = t.replace("{scale}", scale + "");
return t;
}
else {
throw new Error("Invalid templateName.");
}
};
/**
* Gets the name of all image templates loaded into the SvgTemplateManager
*/
SvgTemplateManager.getAllTemplateNames = function () {
return Object.keys(SvgTemplateManager._imageTemplates);
};
/**
* Fills in the placeholder values of a template with the given values
* @param templateName Name of the template to use.
* @param text Text to display in the template.
* @param color Primary color.
* @param secondaryColor Secondary colors.
* @param scale Scale of the template.
* @returns HTML string of the filled template.
*/
SvgTemplateManager._applyStyle = function (templateName, text, color, secondaryColor, scale) {
if (text === void 0) { text = ''; }
if (color === void 0) { color = '#1A73AA'; }
if (secondaryColor === void 0) { secondaryColor = 'white'; }
if (scale === void 0) { scale = 1; }
color = color || "#1A73AA";
secondaryColor = secondaryColor || "#fff";
var t = SvgTemplateManager.getTemplate(templateName, scale);
t = t.replace(/{color}/g, color).replace(/{secondaryColor}/g, secondaryColor).replace(/{text}/g, text ? text : '');
return t;
};
/**
* A list of built in image templates.
*/
SvgTemplateManager._imageTemplates = {
/**********************
* Marker templates
**********************/
"marker": '',
"marker-thick": '',
"marker-circle": '',
"pin": '',
"pin-round": '',
"marker-flat": '',
"marker-arrow": '',
"marker-ball-pin": '',
"marker-square": '',
"marker-square-cluster": '',
"marker-square-rounded": '',
"marker-square-rounded-cluster": '',
"flag": '',
"flag-triangle": '',
"rounded-square": '',
"rounded-square-thick": '',
"triangle": '',
"triangle-thick": '',
"hexagon": '',
"hexagon-thick": '',
"hexagon-rounded": '',
"hexagon-rounded-thick": '',
"triangle-arrow-up": '',
"triangle-arrow-left": '',
"arrow-up": '',
"arrow-up-thin": '',
"car": '',
/**********************
* Fill Patterns
**********************/
"checker": '',
"checker-rotated": '',
"zig-zag": '',
"zig-zag-vertical": '',
"circles-spaced": '',
"circles": '',
"diagonal-lines-up": '',
"diagonal-lines-down": '',
"diagonal-stripes-up": '',
"diagonal-stripes-down": '',
"grid-lines": '',
"rotated-grid-lines": '',
"rotated-grid-stripes": '',
"x-fill": '',
"dots": ''
};
return SvgTemplateManager;
}());
/**
* A class that manages the lifecycle of SVG's for a map instance.
*/
var SvgManager = /** @class */ (function () {
/************************
* Constructor
***********************/
/**
* A class that manages the lifecycle of SVG's for a map instance.
* @param map A maplibre-gl-js map instance.
*/
function SvgManager(map) {
//A list of all the image ids tand image source data.
this._images = {};
this._map = map;
}
/************************
* Public functions
***********************/
/**
* Adds an SVG image to the maps image sprite.
* @param id A unique ID to reference the image by. Use this to render this image in your layers. If the specified id matches the ID of a previously added image the new image will be ignored.
* @param svg An inline SVG string, or URL to an SVG image.
* @param maxWidth The maximum width to allow the image to be. If the image exceeds this width it will be scaled down to fit. Default: 100
* @param maxHeight The maximum height to allow the image to be. If the image exceeds this height it will be scaled down to fit. Default: 100
*/
SvgManager.prototype.add = function (id, svg, maxWidth, maxHeight) {
var _this = this;
if (maxWidth === void 0) { maxWidth = 100; }
if (maxHeight === void 0) { maxHeight = 100; }
return new Promise(function (resolve, reject) {
var images = _this._images;
var map = _this._map;
// Take no action if the new image uses the id of a previously added image.
if (images[id]) {
resolve();
return;
}
if (typeof svg === "string") {
var imageSrc_1;
// Assume an inline svg image string if icon doesn't start with "data:", but does include " 0 && maxHeight > 0 && (imageElm.width > maxWidth || imageElm.height > maxHeight)) {
var scale = Math.min(maxWidth / imageElm.width, maxHeight / imageElm.height);
if (scale < 1) {
imageElm.width = imageElm.width * scale;
imageElm.height = imageElm.height * scale;
}
}
map.addImage(id, imageElm);
images[id] = imageSrc_1;
resolve();
};
// Reject if the blob failed to load in the element.
imageElm.onerror = imageElm.onabort = function () {
reject("Failed to load \"".concat(id, "\" image."));
};
// Convert the blob to a data url then load it into an Image element.
imageElm.src = URL.createObjectURL(blob);
}).catch(function () {
reject("Failed to load \"".concat(id, "\" image."));
});
}
});
};
/**
* Removes all SVG images loaded into the maps sprite.
*/
SvgManager.prototype.clear = function () {
var self = this;
Object.keys(self._images).forEach(function (id) {
self._map.removeImage(id);
});
// Clear the list of user added image ids.
self._images = {};
};
/**
* Gets a list of all the image ids that have been added to the maps image sprite.
*/
SvgManager.prototype.getImageIds = function () {
return Object.keys(this._images);
};
/**
* Checks to see if an image is already loaded into the maps image sprite.
* @param id The id to check the map's image sprite for.
*/
SvgManager.prototype.hasImage = function (id) {
return this._images[id] ? true : false;
};
/**
* Creates and adds an image to the maps image sprite from an SVG template.
* Provide the name of the built-in or pre-loaded template to use, and a color to apply.
* Optionally, specify a secondary color if the template supports one.
* A scale can also be specified.
* This will allow the SVG to be scaled before being converted into an image and thus look much better when scaled up.
* Returns a promise.
* @param id A unique ID to reference the image by. Use this to render this image in your layers.
* @param templateName The name of an SVG template to generate the image from.
* @param color The primary color to apply to the template. Default `#1A73AA`
* @param secondaryColor The secondary color value to apply to the template. Default: `white`
* @param scale Specifies how much to scale the template. For best results, scale the icon to the maximum size you want to display it on the map, then use the symbol layers icon size option to scale down if needed. This will reduce blurriness due to scaling. Default: 1
* @param text Text to display in the template. Rarely used with symbols since symbol layers have its own text support.
*/
SvgManager.prototype.createFromTemplate = function (id, templateName, color, secondaryColor, scale, text) {
if (color === void 0) { color = '#1A73AA'; }
if (secondaryColor === void 0) { secondaryColor = 'white'; }
if (scale === void 0) { scale = 1; }
if (text === void 0) { text = ''; }
var html = SvgTemplateManager._applyStyle(templateName, text, color, secondaryColor, scale);
return this.add(id, html);
};
/**
* Removes an SVG image from the maps image sprite.
* @param id The ID of the image to remove from the maps image sprite.
*/
SvgManager.prototype.remove = function (id) {
this._map.removeImage(id);
delete this._images[id];
};
/**
* It's possible that the map's image sprite may be cleared by the user outside of this manager.
* Calling this method will reload all images in this manager.
*/
SvgManager.prototype.reload = function () {
var _this = this;
var self = this;
Object.keys(self._images).forEach(function (id) {
//Verify map doesn't already have the image in the sprite.
if (!self._map.hasImage(id)) {
//Load the image source into an image element.
var imageElm_1 = new Image();
imageElm_1.onload = function () {
//Add the image to the map's image sprite.
self._map.addImage(id, imageElm_1);
};
imageElm_1.src = _this._images[id];
}
});
};
return SvgManager;
}());
exports.SvgManager = SvgManager;
exports.SvgTemplateManager = SvgTemplateManager;
}(this.maplibregl = this.maplibregl || {}));