@nextgis/ngw-map 1.17.0 → 1.18.1

package/lib/ngw-map.esm-browser.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-map; version: 1.17.0; author: NextGIS */
+/** Bundle of @nextgis/ngw-map; version: 1.18.1; author: NextGIS */
 var events = {exports: {}};
 
 var R = typeof Reflect === 'object' ? Reflect : null;
@@ -1166,12 +1166,6 @@ function fixUrlStr(url) {
     return url.replace(/([^:]\/)\/+/g, '$1');
 }
 
-function isExpression(value) {
-    if (Array.isArray(value)) {
-        return true;
-    }
-    return false;
-}
 function isPropertiesPaint(paint) {
     if (Array.isArray(paint)) {
         return true;
@@ -1191,41 +1185,622 @@ function isPaintCallback(paint) {
     return false;
 }
 
-function get(feature, args) {
-    const field = args[0];
-    return feature.properties && feature.properties[field];
+const tryConvert = (converter, arg, data) => {
+    try {
+        const result = converter(arg, data);
+        if (result !== undefined) {
+            return result;
+        }
+    }
+    catch {
+        // ignore errors
+    }
+    return undefined;
+};
+
+function fallback(cb) {
+    return (args, data) => {
+        for (const arg of args) {
+            const result = tryConvert(cb, arg, data);
+            if (result !== undefined) {
+                return result;
+            }
+        }
+        throw new Error(`Received a mismatched type`);
+    };
 }
-function match(feature, args) {
-    const [lookup, ...cases] = args;
-    let property = lookup;
-    if (Array.isArray(lookup)) {
-        property = featureExpression(feature, lookup);
+
+const array = (args) => {
+    const [firstArg, secondArg, thirdArg] = args;
+    let requiredType = undefined;
+    let requiredLength = undefined;
+    let value;
+    if (typeof firstArg === 'string' &&
+        ['string', 'number', 'boolean'].includes(firstArg)) {
+        requiredType = firstArg;
+        if (typeof secondArg === 'number') {
+            requiredLength = secondArg;
+            value = thirdArg;
+        }
+        else {
+            value = secondArg;
+        }
+    }
+    else if (Array.isArray(firstArg)) {
+        value = firstArg;
+    }
+    if (!Array.isArray(value)) {
+        throw new Error('Expected an array');
+    }
+    if (requiredType && !value.every((item) => typeof item === requiredType)) {
+        throw new Error(`Expected all items in array to be of type ${requiredType}`);
+    }
+    if (requiredLength && value.length !== requiredLength) {
+        throw new Error(`Expected array of length ${requiredLength}`);
+    }
+    return value;
+};
+const typeExpressions = {
+    array,
+    boolean: fallback((arg) => (typeof arg === 'boolean' ? arg : undefined)),
+    literal: ([arg]) => arg,
+    number: fallback((arg) => (typeof arg === 'number' ? arg : undefined)),
+    object: fallback((arg) => arg !== null && typeof arg === 'object' && !Array.isArray(arg)
+        ? arg
+        : undefined),
+    string: fallback((arg) => (typeof arg === 'string' ? arg : undefined)),
+    'to-boolean': fallback(Boolean),
+    'to-number': fallback(Number),
+    'to-string': fallback(String),
+    typeof: ([arg]) => typeof arg,
+};
+
+const mathExpressions = {
+    '+': (args) => args.reduce((a, b) => a + b, 0),
+    '-': (args) => args.reduce((a, b) => a - b),
+    '*': (args) => args.reduce((a, b) => a * b, 1),
+    '/': (args) => args.reduce((a, b) => a / b),
+    '%': (args) => args[0] % args[1],
+    '^': (args) => Math.pow(args[0], args[1]),
+    abs: (args) => Math.abs(args[0]),
+    acos: (args) => Math.acos(args[0]),
+    asin: (args) => Math.asin(args[0]),
+    atan: (args) => Math.atan(args[0]),
+    ceil: (args) => Math.ceil(args[0]),
+    cos: (args) => Math.cos(args[0]),
+    e: () => Math.E,
+    floor: (args) => Math.floor(args[0]),
+    ln: (args) => Math.log(args[0]),
+    ln2: () => Math.LN2,
+    log10: (args) => Math.log10(args[0]),
+    log2: (args) => Math.log2(args[0]),
+    max: (args) => Math.max(...args),
+    min: (args) => Math.min(...args),
+    pi: () => Math.PI,
+    round: (args) => Math.round(args[0]),
+    sin: (args) => Math.sin(args[0]),
+    sqrt: (args) => Math.sqrt(args[0]),
+    tan: (args) => Math.tan(args[0]),
+};
+
+function get([key, objExp], data) {
+    const target = objExp || data;
+    if (target && typeof target === 'object' && key in target) {
+        return target[key];
+    }
+    return null;
+}
+function has([key, objExp], data) {
+    const target = objExp || data;
+    return !!(target && typeof target === 'object' && key in target);
+}
+function at([index, array]) {
+    return array[index];
+}
+function inFunc([keyword, input]) {
+    if (typeof input === 'string') {
+        return input.includes(String(keyword));
     }
+    else if (Array.isArray(input)) {
+        return input.includes(keyword);
+    }
+    throw new Error(`Invalid input type for 'in'. Expected string or array, got ${typeof input}.`);
+}
+const length = ([item]) => {
+    if (typeof item === 'string' || Array.isArray(item)) {
+        return item.length;
+    }
+    return undefined;
+};
+function indexOf([keyword, input, startIndex]) {
+    if (typeof input === 'string') {
+        return input.indexOf(String(keyword), startIndex);
+    }
+    else if (Array.isArray(input)) {
+        return input.indexOf(keyword, startIndex);
+    }
+    throw new Error(`Invalid input type for 'index-of'. Expected string or array, got ${typeof input}.`);
+}
+function slice(args) {
+    const [input, startIndex, endIndex] = args;
+    if (typeof input === 'string') {
+        return input.slice(startIndex, endIndex);
+    }
+    else if (Array.isArray(input)) {
+        return input.slice(startIndex, endIndex);
+    }
+    throw new Error(`Invalid input type for 'slice'. Expected string or array, got ${typeof input}.`);
+}
+const lookupExpressions = {
+    get,
+    length,
+    at,
+    has,
+    in: inFunc,
+    'index-of': indexOf,
+    slice,
+};
+
+const stringExpressions = {
+    concat: (args) => args.reduce((a, b) => String(a) + String(b), ''),
+    downcase: (args) => String(args[0]).toLowerCase(),
+    upcase: (args) => String(args[0]).toUpperCase(),
+};
+
+function not([expr]) {
+    return !expr;
+}
+const checkCompareValues = ([a, b]) => {
+    if (typeof a !== typeof b) {
+        throw new Error('Values have different types.');
+    }
+};
+function notEqual([a, b]) {
+    checkCompareValues([a, b]);
+    return a !== b;
+}
+function lessThan([left, right]) {
+    checkCompareValues([left, right]);
+    return left < right;
+}
+function lessThanOrEqual([left, right]) {
+    checkCompareValues([left, right]);
+    return left <= right;
+}
+function equal([left, right]) {
+    checkCompareValues([left, right]);
+    return left === right;
+}
+function greaterThan([left, right]) {
+    checkCompareValues([left, right]);
+    return left > right;
+}
+function greaterThanOrEqual([left, right]) {
+    checkCompareValues([left, right]);
+    return left >= right;
+}
+function all(args) {
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (!arg) {
+            return false;
+        }
+    }
+    return true;
+}
+function any(args) {
+    for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+        if (arg) {
+            return true;
+        }
+    }
+    return false;
+}
+function match(args) {
+    const [lookup, ...cases] = args;
     // remove last odd item from cases array
     const defValue = cases.splice(-1, cases.length % 2)[0];
     for (let fry = 0; fry < cases.length - 1; fry += 2) {
         const key = cases[fry];
-        if (key === property) {
+        if (key === lookup) {
             return cases[fry + 1];
         }
     }
     return defValue;
 }
-const expressions = {
-    get,
+function caseFunc(args) {
+    if (args.length < 2) {
+        throw new Error('The "case" function requires at least a condition and a corresponding output.');
+    }
+    const fallback = args[args.length - 1];
+    if (args.length % 2 === 0) {
+        throw new Error('Missing a fallback value or unmatched condition-output pair.');
+    }
+    for (let i = 0; i < args.length - 1; i += 2) {
+        const condition = args[i];
+        const value = args[i + 1];
+        if (condition) {
+            return value;
+        }
+    }
+    return fallback;
+}
+const decisionExpressions = {
+    '!': not,
+    '!=': notEqual,
+    '<': lessThan,
+    '<=': lessThanOrEqual,
+    '==': equal,
+    '>': greaterThan,
+    '>=': greaterThanOrEqual,
+    all: all,
+    any: any,
+    case: caseFunc,
     match,
 };
-function featureExpression(feature, expression) {
+
+function step(args) {
+    const [input, defaultValue, ...stops] = args;
+    if (typeof input !== 'number') {
+        return defaultValue;
+    }
+    for (let i = 0; i < stops.length - 2; i += 2) {
+        const stopInput = stops[i];
+        const stopOutput = stops[i + 1];
+        const nextStopInput = stops[i + 2];
+        if (input >= stopInput && input < nextStopInput) {
+            return stopOutput;
+        }
+    }
+    if (input >= stops[stops.length - 2]) {
+        return stops[stops.length - 1];
+    }
+    return defaultValue;
+}
+
+const COLORS = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    'indianred ': '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgrey: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370d8',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#d87093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32',
+};
+
+function isHex(hex) {
+    return typeof hex === 'string' && /^#([A-Fa-f0-9]{3}){1,2}$/.test(hex);
+}
+function isRgb(hex) {
+    const r = 
+    // eslint-disable-next-line max-len
+    /^rgb(a?)\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)(?:\s*,\s*([01](?:\.\d+)?))?\s*\)$/;
+    return typeof hex === 'string' && r.test(hex);
+}
+function isColorObj(obj) {
+    if (typeof obj === 'object' && obj !== null) {
+        const hasRgb = 'r' in obj && 'g' in obj && 'b' in obj;
+        const hasValidAlpha = !('a' in obj) || (typeof obj.a === 'number' && obj.a >= 0 && obj.a <= 1);
+        return hasRgb && hasValidAlpha;
+    }
+    return false;
+}
+function isColorName(name) {
+    if (typeof name === 'string' && name in COLORS) {
+        return true;
+    }
+    return false;
+}
+function toColor(value) {
+    if (isHex(value)) {
+        return hexToColor(value);
+    }
+    else if (isColorName(value)) {
+        return colorNameToColor(value);
+    }
+    else if (isRgb(value)) {
+        return rgbToColor(value);
+    }
+    else if (isColorObj(value)) {
+        return colorObjectToColor(value);
+    }
+    throw new Error(`The '${value}' cannot be converted to color`);
+}
+function colorNameToColor(name) {
+    return hexToColor(COLORS[name]);
+}
+function hexToColor(hex) {
+    const shortRGB = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/;
+    const shortRGBA = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/;
+    const longRGB = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
+    const longRGBA = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
+    let result;
+    if ((result = shortRGB.exec(hex))) {
+        return [
+            parseInt(result[1] + result[1], 16),
+            parseInt(result[2] + result[2], 16),
+            parseInt(result[3] + result[3], 16),
+        ];
+    }
+    else if ((result = shortRGBA.exec(hex))) {
+        return [
+            parseInt(result[1] + result[1], 16),
+            parseInt(result[2] + result[2], 16),
+            parseInt(result[3] + result[3], 16),
+            parseInt(result[4] + result[4], 16) / 255,
+        ];
+    }
+    else if ((result = longRGB.exec(hex))) {
+        return [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16),
+        ];
+    }
+    else if ((result = longRGBA.exec(hex))) {
+        return [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16),
+            parseInt(result[4], 16) / 255,
+        ];
+    }
+    throw new Error(`The '${hex}' Is not valid hex`);
+}
+function rgbToColor(rgb) {
+    const rgbPattern = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
+    const rgbaPattern = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)$/;
+    let matches;
+    if ((matches = rgb.match(rgbPattern))) {
+        return [
+            parseInt(matches[1], 10),
+            parseInt(matches[2], 10),
+            parseInt(matches[3], 10),
+        ];
+    }
+    else if ((matches = rgb.match(rgbaPattern))) {
+        return [
+            parseInt(matches[1], 10),
+            parseInt(matches[2], 10),
+            parseInt(matches[3], 10),
+            parseFloat(matches[4]),
+        ];
+    }
+    throw new Error(`The '${rgb}' Is not valid rgb`);
+}
+function colorObjectToColor({ r, g, b, a }) {
+    return [r, g, b, ...(a !== undefined ? [a] : [])];
+}
+function colorToRGB(array) {
+    return `rgb(${array.join(',')})`;
+}
+
+function linearInterpolation(input, input1, output1, input2, output2) {
+    if (typeof output1 === 'number' && typeof output2 === 'number') {
+        return (output1 + ((input - input1) / (input2 - input1)) * (output2 - output1));
+    }
+    try {
+        const outputColor1 = toColor(output1);
+        const outputColor2 = toColor(output2);
+        return colorToRGB(outputColor1.map((val, index) => {
+            return Math.ceil(linearInterpolation(input, input1, val, input2, outputColor2[index]));
+        }));
+    }
+    catch (er) {
+        console.log(er);
+    }
+    throw new Error('Unsupported output type for linear interpolation.');
+}
+function interpolate([interpolation, input, ...stops]) {
+    if (stops.length < 2) {
+        throw new Error('At least two stops are required');
+    }
+    if (typeof input !== 'number') {
+        throw new Error('Input must be a number.');
+    }
+    if (stops.length < 2 || stops.length % 2 !== 0) {
+        throw new Error('Invalid stops provided.');
+    }
+    for (let i = 0; i < stops.length - 2; i += 2) {
+        const stopInput1 = stops[i];
+        const stopOutput1 = stops[i + 1];
+        const stopInput2 = stops[i + 2];
+        const stopOutput2 = stops[i + 3];
+        if (input >= stopInput1 && input <= stopInput2) {
+            if (interpolation[0] === 'linear') {
+                return linearInterpolation(input, stopInput1, stopOutput1, stopInput2, stopOutput2);
+            }
+            // else if (interpolation[0] === 'exponential') {
+            //   const base = interpolation[1];
+            //   return exponentialInterpolation(
+            //     input,
+            //     base,
+            //     stopInput1,
+            //     stopOutput1,
+            //     stopInput2,
+            //     stopOutput2,
+            //   );
+            // }
+        }
+    }
+    throw new Error('Invalid interpolation type.');
+}
+
+const interpolationExpressions = {
+    step,
+    interpolate,
+};
+
+function isExpression(value) {
+    if (Array.isArray(value)) {
+        const [lookup, ...cases] = value;
+        const l = lookup;
+        return (typeof l === 'string' &&
+            l !== 'literal' &&
+            l in expressions &&
+            cases.length > 0);
+    }
+    return false;
+}
+const expressions = {
+    ...mathExpressions,
+    ...typeExpressions,
+    ...stringExpressions,
+    ...lookupExpressions,
+    ...decisionExpressions,
+    ...interpolationExpressions,
+};
+function evaluate(expression, data = {}) {
     const [name, ...args] = expression;
     const expressionFun = expressions[name];
     if (expressionFun) {
-        return expressionFun(feature, args);
+        return expressionFun(args.map((arg) => (isExpression(arg) ? evaluate(arg, data) : arg)), data);
     }
-    return undefined;
+    throw new Error(`Expression "${name}" is not supported.`);
 }
+
 function createPropertyExpressionCb(expression) {
     return (feature) => {
-        return featureExpression(feature, expression);
+        const properties = feature.properties;
+        if (properties) {
+            return evaluate(expression, properties);
+        }
+        return false;
     };
 }
 const excludeExpressionList = ['iconSize', 'iconAnchor'];
@@ -1372,32 +1947,43 @@ function createPropertiesPaint(propertiesPaint) {
         return mask;
     };
 }
-function expressionCallback(paint, defaultPaint, getPaintFunctions) {
+function expressionCallback({ paint, defaultPaint, }) {
     const expressionCallback = createExpressionCallback(paint);
     if (expressionCallback) {
         const expressionPaintCb = (feature) => {
-            return preparePaint(expressionCallback(feature), defaultPaint, getPaintFunctions);
+            return preparePaint({
+                paint: expressionCallback(feature),
+                defaultPaint,
+            });
         };
-        expressionPaintCb.paint = paint;
+        expressionPaintCb.paint = finalizePaint({ paint, defaultPaint });
         return expressionPaintCb;
     }
+    return finalizePaint({ paint, defaultPaint });
+}
+function finalizePaint({ paint, defaultPaint }) {
+    var _a;
     let newPaint = { ...defaultPaint };
     newPaint = { ...newPaint, ...paint };
-    newPaint.fill = newPaint.fill !== undefined ? newPaint.fill : true;
+    newPaint.fill = (_a = newPaint.fill) !== null && _a !== void 0 ? _a : true;
     newPaint.stroke =
         newPaint.stroke !== undefined
             ? newPaint.stroke
             : !newPaint.fill || !!(newPaint.strokeColor || newPaint.strokeOpacity);
     return newPaint;
 }
-function preparePaint(paint, defaultPaint, getPaintFunctions) {
+function preparePaint({ paint, defaultPaint, getPaintFunctions, }) {
     if (!paint) {
         throw new Error('paint is empty');
     }
     let newPaint = { ...defaultPaint };
     if (isPaintCallback(paint)) {
         const getPaintFunction = (feature) => {
-            const getPaint = preparePaint(paint(feature), defaultPaint, getPaintFunctions);
+            const getPaint = preparePaint({
+                paint: paint(feature),
+                defaultPaint,
+                getPaintFunctions,
+            });
             getPaint.type = paint.type;
             return getPaint;
         };
@@ -1406,20 +1992,28 @@ function preparePaint(paint, defaultPaint, getPaintFunctions) {
     }
     else if (isPropertiesPaint(paint)) {
         return (feature) => {
-            return preparePaint(createPropertiesPaint(paint)(feature), defaultPaint, getPaintFunctions);
+            return preparePaint({
+                paint: createPropertiesPaint(paint)(feature),
+                defaultPaint,
+                getPaintFunctions,
+            });
         };
     }
     else if (paint.type === 'get-paint') {
         const getPaint = updatePaintOptionFromCallback(paint, getPaintFunctions);
         if (getPaint) {
-            newPaint = preparePaint(getPaint, defaultPaint, getPaintFunctions);
+            newPaint = preparePaint({
+                paint: getPaint,
+                defaultPaint,
+                getPaintFunctions,
+            });
         }
     }
     else if (paint.type === 'icon') {
         return paint;
     }
     else {
-        newPaint = expressionCallback(paint, defaultPaint, getPaintFunctions);
+        newPaint = expressionCallback({ paint, defaultPaint });
     }
     if (isPaintCallback(newPaint)) {
         return newPaint;
@@ -3027,10 +3621,18 @@ class WebMapLayers extends WebMapMain {
         };
         if (!options.nativePaint) {
             if (this.options.paint) {
-                options.paint = preparePaint(options.paint || {}, this.options.paint, this.getPaintFunctions);
+                options.paint = preparePaint({
+                    paint: options.paint || {},
+                    defaultPaint: this.options.paint,
+                    getPaintFunctions: this.getPaintFunctions,
+                });
             }
             if (options.selectedPaint && this.options.selectedPaint) {
-                options.selectedPaint = preparePaint(options.selectedPaint, this.options.selectedPaint, this.getPaintFunctions);
+                options.selectedPaint = preparePaint({
+                    paint: options.selectedPaint,
+                    defaultPaint: this.options.selectedPaint,
+                    getPaintFunctions: this.getPaintFunctions,
+                });
             }
         }
     }