@mapwhit/tilerenderer 0.49.0 → 0.50.0

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.48.0"
+  "version": "0.49.0"
 }

package/build/min/src/shaders/fill_extrusion.fragment.glsl.txt

@@ -1,12 +1,4 @@
-varying vec4 v_color;
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
-#pragma mapbox: define highp vec4 color
-void main(){
-#pragma mapbox: initialize lowp float base
-#pragma mapbox: initialize lowp float height
-#pragma mapbox: initialize highp vec4 color
-gl_FragColor=v_color;
+varying vec4 v_color;void main(){gl_FragColor=v_color;
 #ifdef OVERDRAW_INSPECTOR
 gl_FragColor=vec4(1.);
 #endif

package/build/min/src/shaders/fill_extrusion.vertex.glsl.txt

@@ -1,9 +1,9 @@
 uniform mat4 u_matrix;uniform vec3 u_lightcolor;uniform lowp vec3 u_lightpos;uniform lowp float u_lightintensity;uniform float u_vertical_gradient;uniform lowp float u_opacity;attribute vec2 a_pos;attribute vec4 a_normal_ed;varying vec4 v_color;
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
+#pragma mapbox: define highp float base
+#pragma mapbox: define highp float height
 #pragma mapbox: define highp vec4 color
 void main(){
-#pragma mapbox: initialize lowp float base
-#pragma mapbox: initialize lowp float height
+#pragma mapbox: initialize highp float base
+#pragma mapbox: initialize highp float height
 #pragma mapbox: initialize highp vec4 color
 vec3 normal=a_normal_ed.xyz;base=max(0.,base);height=max(0.,height);float t=mod(normal.x,2.);gl_Position=u_matrix*vec4(a_pos,t>0.?height:base,1);float colorvalue=color.r*0.2126+color.g*0.7152+color.b*0.0722;v_color=vec4(0.,0.,0.,1.);vec4 ambientlight=vec4(0.03,0.03,0.03,1.);color+=ambientlight;float directional=clamp(dot(normal/16384.,u_lightpos),0.,1.);directional=mix((1.-u_lightintensity),max((1.-colorvalue+u_lightintensity),1.),directional);if(normal.y!=0.){directional*=((1.-u_vertical_gradient)+(u_vertical_gradient*clamp((t+base)*pow(height/150.,0.5),mix(0.7,0.98,1.-u_lightintensity),1.)));}v_color.r+=clamp(color.r*directional*u_lightcolor.r,mix(0.,0.3,1.-u_lightcolor.r),1.);v_color.g+=clamp(color.g*directional*u_lightcolor.g,mix(0.,0.3,1.-u_lightcolor.g),1.);v_color.b+=clamp(color.b*directional*u_lightcolor.b,mix(0.,0.3,1.-u_lightcolor.b),1.);v_color*=u_opacity;}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "main": "src/index.js",
   "license": "BSD-3-Clause",
   "repository": {

package/src/data/bucket/symbol_bucket.js

@@ -32,7 +32,7 @@ const { verticalizedCharacterMap } = require('../../util/verticalize_punctuation
 const { getSizeData } = require('../../symbol/symbol_size');
 const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
-const { Formatted } = require('../../style-spec/expression/definitions/formatted');
+const { Formatted } = require('../../style-spec/expression/types/formatted');
 
 // Opacity arrays are frequently updated but don't contain a lot of information, so we pack them
 // tight. Each Uint32 is actually four duplicate Uint8s for the four corners of a glyph
@@ -267,8 +267,15 @@ class SymbolBucket {
 
       let text;
       if (hasText) {
-        text = layer.getValueAndResolveTokens('text-field', feature);
-        text = transformText(text, layer, feature);
+        // Expression evaluation will automatically coerce to Formatted
+        // but plain string token evaluation skips that pathway so do the
+        // conversion here.
+        const resolvedTokens = layer.getValueAndResolveTokens('text-field', feature);
+        text = transformText(
+          resolvedTokens instanceof Formatted ? resolvedTokens : Formatted.fromString(resolvedTokens),
+          layer,
+          feature
+        );
       }
 
       let icon;
@@ -300,19 +307,13 @@ class SymbolBucket {
 
       if (text) {
         const fontStack = textFont.evaluate(feature, {}).join(',');
-        const stack = (stacks[fontStack] = stacks[fontStack] || {});
         const textAlongLine =
           layout.get('text-rotation-alignment') === 'map' && layout.get('symbol-placement') !== 'point';
-        if (text instanceof Formatted) {
-          for (const section of text.sections) {
-            const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text.toString());
-            const sectionFont = section.fontStack || fontStack;
-            const sectionStack = (stacks[sectionFont] = stacks[sectionFont] || {});
-            this.calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
-          }
-        } else {
-          const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text);
-          this.calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode);
+        for (const section of text.sections) {
+          const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text.toString());
+          const sectionFont = section.fontStack || fontStack;
+          const sectionStack = (stacks[sectionFont] = stacks[sectionFont] || {});
+          this.calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
         }
       }
     }

package/src/shaders/fill_extrusion.fragment.glsl

@@ -1,13 +1,6 @@
 varying vec4 v_color;
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
-#pragma mapbox: define highp vec4 color
 
 void main() {
-    #pragma mapbox: initialize lowp float base
-    #pragma mapbox: initialize lowp float height
-    #pragma mapbox: initialize highp vec4 color
-
     gl_FragColor = v_color;
 
 #ifdef OVERDRAW_INSPECTOR

package/src/shaders/fill_extrusion.vertex.glsl

@@ -10,14 +10,14 @@ attribute vec4 a_normal_ed;
 
 varying vec4 v_color;
 
-#pragma mapbox: define lowp float base
-#pragma mapbox: define lowp float height
+#pragma mapbox: define highp float base
+#pragma mapbox: define highp float height
 
 #pragma mapbox: define highp vec4 color
 
 void main() {
-    #pragma mapbox: initialize lowp float base
-    #pragma mapbox: initialize lowp float height
+    #pragma mapbox: initialize highp float base
+    #pragma mapbox: initialize highp float height
     #pragma mapbox: initialize highp vec4 color
 
     vec3 normal = a_normal_ed.xyz;

package/src/style-spec/expression/definitions/coalesce.js

@@ -20,9 +20,7 @@ class Coalesce {
     const parsedArgs = [];
 
     for (const arg of args.slice(1)) {
-      const parsed = context.parse(arg, 1 + parsedArgs.length, outputType, undefined, {
-        omitTypeAnnotations: true
-      });
+      const parsed = context.parse(arg, 1 + parsedArgs.length, outputType, undefined, { typeAnnotation: 'omit' });
       if (!parsed) return null;
       outputType = outputType || parsed.type;
       parsedArgs.push(parsed);

package/src/style-spec/expression/definitions/coercion.js

@@ -1,13 +1,16 @@
 const assert = require('assert');
 
-const { ColorType, ValueType, NumberType } = require('../types');
-const { Color, validateRGBA } = require('../values');
+const { BooleanType, ColorType, NumberType, StringType, ValueType } = require('../types');
+const { Color, toString: valueToString, validateRGBA } = require('../values');
 const RuntimeError = require('../runtime_error');
-const { Formatted, FormattedSection } = require('./formatted');
+const { FormatExpression } = require('../definitions/format');
+const { Formatted } = require('../types/formatted');
 
 const types = {
+  'to-boolean': BooleanType,
+  'to-color': ColorType,
   'to-number': NumberType,
-  'to-color': ColorType
+  'to-string': StringType
 };
 
 /**
@@ -29,6 +32,9 @@ class Coercion {
     const name = args[0];
     assert(types[name], name);
 
+    if ((name === 'to-boolean' || name === 'to-string') && args.length !== 2)
+      return context.error('Expected one argument.');
+
     const type = types[name];
 
     const parsed = [];
@@ -42,12 +48,18 @@ class Coercion {
   }
 
   evaluate(ctx) {
+    if (this.type.kind === 'boolean') {
+      return Boolean(this.args[0].evaluate(ctx));
+    }
     if (this.type.kind === 'color') {
       let input;
       let error;
       for (const arg of this.args) {
         input = arg.evaluate(ctx);
         error = null;
+        if (input instanceof Color) {
+          return input;
+        }
         if (typeof input === 'string') {
           const c = ctx.parseColor(input);
           if (c) return c;
@@ -66,27 +78,23 @@ class Coercion {
         error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
       );
     }
-    if (this.type.kind === 'formatted') {
-      let input;
+    if (this.type.kind === 'number') {
+      let value = null;
       for (const arg of this.args) {
-        input = arg.evaluate(ctx);
-        if (typeof input === 'string') {
-          return new Formatted([new FormattedSection(input, null, null)]);
-        }
+        value = arg.evaluate(ctx);
+        if (value === null) return 0;
+        const num = Number(value);
+        if (isNaN(num)) continue;
+        return num;
       }
-      throw new RuntimeError(
-        `Could not parse formatted text from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`
-      );
+      throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
     }
-    let value = null;
-    for (const arg of this.args) {
-      value = arg.evaluate(ctx);
-      if (value === null) continue;
-      const num = Number(value);
-      if (isNaN(num)) continue;
-      return num;
+    if (this.type.kind === 'formatted') {
+      // There is no explicit 'to-formatted' but this coercion can be implicitly
+      // created by properties that expect the 'formatted' type.
+      return Formatted.fromString(valueToString(this.args[0].evaluate(ctx)));
     }
-    throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
+    return valueToString(this.args[0].evaluate(ctx));
   }
 
   eachChild(fn) {
@@ -98,6 +106,9 @@ class Coercion {
   }
 
   serialize() {
+    if (this.type.kind === 'formatted') {
+      return new FormatExpression([{ text: this.args[0], scale: null, font: null }]).serialize();
+    }
     const serialized = [`to-${this.type.kind}`];
     this.eachChild(child => {
       serialized.push(child.serialize());

package/src/style-spec/expression/definitions/collator.js

@@ -1,27 +1,5 @@
 const { StringType, BooleanType, CollatorType } = require('../types');
-
-class Collator {
-  constructor(caseSensitive, diacriticSensitive, locale) {
-    if (caseSensitive) this.sensitivity = diacriticSensitive ? 'variant' : 'case';
-    else this.sensitivity = diacriticSensitive ? 'accent' : 'base';
-
-    this.locale = locale;
-    this.collator = new Intl.Collator(this.locale ? this.locale : [], {
-      sensitivity: this.sensitivity,
-      usage: 'search'
-    });
-  }
-
-  compare(lhs, rhs) {
-    return this.collator.compare(lhs, rhs);
-  }
-
-  resolvedLocale() {
-    // We create a Collator without "usage: search" because we don't want
-    // the search options encoded in our result (e.g. "en-u-co-search")
-    return new Intl.Collator(this.locale ? this.locale : []).resolvedOptions().locale;
-  }
-}
+const { Collator } = require('../types/collator');
 
 class CollatorExpression {
   constructor(caseSensitive, diacriticSensitive, locale) {

package/src/style-spec/expression/definitions/{formatted.js → format.js}

@@ -1,32 +1,6 @@
 const { NumberType, ValueType, FormattedType, array, StringType } = require('../types');
-
-class FormattedSection {
-  constructor(text, scale, fontStack) {
-    this.text = text;
-    this.scale = scale;
-    this.fontStack = fontStack;
-  }
-}
-
-class Formatted {
-  constructor(sections) {
-    this.sections = sections;
-  }
-
-  toString() {
-    return this.sections.map(section => section.text).join('');
-  }
-
-  serialize() {
-    const serialized = ['format'];
-    for (const section of this.sections) {
-      serialized.push(section.text);
-      const fontStack = section.fontStack ? ['literal', section.fontStack.split(',')] : null;
-      serialized.push({ 'text-font': fontStack, 'font-scale': section.scale });
-    }
-    return serialized;
-  }
-}
+const { Formatted, FormattedSection } = require('../types/formatted');
+const { toString } = require('../values');
 
 class FormatExpression {
   constructor(sections) {
@@ -77,7 +51,7 @@ class FormatExpression {
       this.sections.map(
         section =>
           new FormattedSection(
-            section.text.evaluate(ctx) || '',
+            toString(section.text.evaluate(ctx)),
             section.scale ? section.scale.evaluate(ctx) : null,
             section.font ? section.font.evaluate(ctx).join(',') : null
           )

package/src/style-spec/expression/definitions/index.js

@@ -8,10 +8,10 @@ const {
   ErrorType,
   CollatorType,
   array,
-  toString
+  toString: typeToString
 } = require('../types');
 
-const { typeOf, Color, validateRGBA } = require('../values');
+const { typeOf, Color, validateRGBA, toString: valueToString } = require('../values');
 const CompoundExpression = require('../compound_expression');
 const RuntimeError = require('../runtime_error');
 const Let = require('./let');
@@ -27,7 +27,7 @@ const Interpolate = require('./interpolate');
 const Coalesce = require('./coalesce');
 const { Equals, NotEquals, LessThan, GreaterThan, LessThanOrEqual, GreaterThanOrEqual } = require('./comparison');
 const { CollatorExpression } = require('./collator');
-const { Formatted, FormatExpression } = require('./formatted');
+const { FormatExpression } = require('./format');
 const Length = require('./length');
 
 const expressions = {
@@ -56,8 +56,10 @@ const expressions = {
   object: Assertion,
   step: Step,
   string: Assertion,
+  'to-boolean': Coercion,
   'to-color': Coercion,
   'to-number': Coercion,
+  'to-string': Coercion,
   var: Var
 };
 
@@ -102,26 +104,7 @@ CompoundExpression.register(expressions, {
       throw new RuntimeError(v.evaluate(ctx));
     }
   ],
-  typeof: [StringType, [ValueType], (ctx, [v]) => toString(typeOf(v.evaluate(ctx)))],
-  'to-string': [
-    StringType,
-    [ValueType],
-    (ctx, [v]) => {
-      v = v.evaluate(ctx);
-      const type = typeof v;
-      if (v === null) {
-        return '';
-      }
-      if (type === 'string' || type === 'number' || type === 'boolean') {
-        return String(v);
-      }
-      if (v instanceof Color || v instanceof Formatted) {
-        return v.toString();
-      }
-      return JSON.stringify(v);
-    }
-  ],
-  'to-boolean': [BooleanType, [ValueType], (ctx, [v]) => Boolean(v.evaluate(ctx))],
+  typeof: [StringType, [ValueType], (ctx, [v]) => typeToString(typeOf(v.evaluate(ctx)))],
   'to-rgba': [
     array(NumberType, 4),
     [ColorType],
@@ -349,7 +332,7 @@ CompoundExpression.register(expressions, {
   ],
   upcase: [StringType, [StringType], (ctx, [s]) => s.evaluate(ctx).toUpperCase()],
   downcase: [StringType, [StringType], (ctx, [s]) => s.evaluate(ctx).toLowerCase()],
-  concat: [StringType, varargs(StringType), (ctx, args) => args.map(arg => arg.evaluate(ctx)).join('')],
+  concat: [StringType, varargs(ValueType), (ctx, args) => args.map(arg => valueToString(arg.evaluate(ctx))).join('')],
   'resolved-locale': [StringType, [CollatorType], (ctx, [collator]) => collator.evaluate(ctx).resolvedLocale()]
 });
 

package/src/style-spec/expression/definitions/let.js

@@ -37,7 +37,7 @@ class Let {
       bindings.push([name, value]);
     }
 
-    const result = context.parse(args[args.length - 1], args.length - 1, undefined, bindings);
+    const result = context.parse(args[args.length - 1], args.length - 1, context.expectedType, bindings);
     if (!result) return null;
 
     return new Let(bindings, result);

package/src/style-spec/expression/definitions/literal.js

@@ -1,6 +1,6 @@
 const assert = require('assert');
 const { isValue, typeOf, Color } = require('../values');
-const { Formatted } = require('./formatted');
+const { Formatted } = require('../types/formatted');
 
 class Literal {
   constructor(type, value) {

package/src/style-spec/expression/evaluation_context.js

@@ -4,6 +4,9 @@ const geometryTypes = ['Unknown', 'Point', 'LineString', 'Polygon'];
 
 class EvaluationContext {
   constructor() {
+    this.globals = null;
+    this.feature = null;
+    this.featureState = null;
     this._parseColorCache = {};
   }
 

package/src/style-spec/expression/index.js

@@ -18,17 +18,12 @@ class StyleExpression {
   constructor(expression, propertySpec) {
     this.expression = expression;
     this._warningHistory = {};
+    this._evaluator = new EvaluationContext();
     this._defaultValue = getDefaultValue(propertySpec);
-    if (propertySpec.type === 'enum') {
-      this._enumValues = propertySpec.values;
-    }
+    this._enumValues = propertySpec.type === 'enum' ? propertySpec.values : null;
   }
 
   evaluateWithoutErrorHandling(globals, feature, featureState) {
-    if (!this._evaluator) {
-      this._evaluator = new EvaluationContext();
-    }
-
     this._evaluator.globals = globals;
     this._evaluator.feature = feature;
     this._evaluator.featureState = featureState;
@@ -37,13 +32,9 @@ class StyleExpression {
   }
 
   evaluate(globals, feature, featureState) {
-    if (!this._evaluator) {
-      this._evaluator = new EvaluationContext();
-    }
-
     this._evaluator.globals = globals;
-    this._evaluator.feature = feature;
-    this._evaluator.featureState = featureState;
+    this._evaluator.feature = feature || null;
+    this._evaluator.featureState = featureState || null;
 
     try {
       const val = this.expression.evaluate(this._evaluator);
@@ -90,7 +81,16 @@ function isExpression(expression) {
  */
 function createExpression(expression, propertySpec) {
   const parser = new ParsingContext(definitions, [], getExpectedType(propertySpec));
-  const parsed = parser.parse(expression);
+
+  // For string-valued properties, coerce to string at the top level rather than asserting.
+  const parsed = parser.parse(
+    expression,
+    undefined,
+    undefined,
+    undefined,
+    propertySpec.type === 'string' ? { typeAnnotation: 'coerce' } : undefined
+  );
+
   if (!parsed) {
     assert(parser.errors.length > 0);
     return error(parser.errors);
@@ -283,7 +283,7 @@ function findZoomCurve(expression) {
   return result;
 }
 
-const { ColorType, StringType, NumberType, BooleanType, ValueType, array } = require('./types');
+const { ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, array } = require('./types');
 
 function getExpectedType(spec) {
   const types = {
@@ -291,14 +291,15 @@ function getExpectedType(spec) {
     string: StringType,
     number: NumberType,
     enum: StringType,
-    boolean: BooleanType
+    boolean: BooleanType,
+    formatted: FormattedType
   };
 
   if (spec.type === 'array') {
     return array(types[spec.value] || ValueType, spec.length);
   }
 
-  return types[spec.type] || null;
+  return types[spec.type];
 }
 
 function getDefaultValue(spec) {

package/src/style-spec/expression/parsing_context.js

@@ -1,3 +1,4 @@
+const assert = require('assert');
 const Scope = require('./scope');
 
 const { checkSubtype } = require('./types');
@@ -48,6 +49,16 @@ class ParsingContext {
       expr = ['literal', expr];
     }
 
+    function annotate(parsed, type, typeAnnotation) {
+      if (typeAnnotation === 'assert') {
+        return new Assertion(type, [parsed]);
+      }
+      if (typeAnnotation === 'coerce') {
+        return new Coercion(type, [parsed]);
+      }
+      return parsed;
+    }
+
     if (Array.isArray(expr)) {
       if (expr.length === 0) {
         return this.error(
@@ -73,11 +84,14 @@ class ParsingContext {
           const expected = this.expectedType;
           const actual = parsed.type;
 
-          // When we expect a number, string, boolean, or array but
-          // have a Value, we can wrap it in a refining assertion.
-          // When we expect a Color but have a String or Value, we
-          // can wrap it in "to-color" coercion.
+          // When we expect a number, string, boolean, or array but have a value, wrap it in an assertion.
+          // When we expect a color or formatted string, but have a string or value, wrap it in a coercion.
           // Otherwise, we do static type-checking.
+          //
+          // These behaviors are overridable for:
+          //   * The "coalesce" operator, which needs to omit type annotations.
+          //   * String-valued properties (e.g. `text-field`), where coercion is more convenient than assertion.
+          //
           if (
             (expected.kind === 'string' ||
               expected.kind === 'number' ||
@@ -86,18 +100,13 @@ class ParsingContext {
               expected.kind === 'array') &&
             actual.kind === 'value'
           ) {
-            if (!options.omitTypeAnnotations) {
-              parsed = new Assertion(expected, [parsed]);
-            }
-          } else if (expected.kind === 'color' && (actual.kind === 'value' || actual.kind === 'string')) {
-            if (!options.omitTypeAnnotations) {
-              parsed = new Coercion(expected, [parsed]);
-            }
-          } else if (expected.kind === 'formatted' && (actual.kind === 'value' || actual.kind === 'string')) {
-            if (!options.omitTypeAnnotations) {
-              parsed = new Coercion(expected, [parsed]);
-            }
-          } else if (this.checkSubtype(this.expectedType, parsed.type)) {
+            parsed = annotate(parsed, expected, options.typeAnnotation || 'assert');
+          } else if (
+            (expected.kind === 'color' || expected.kind === 'formatted') &&
+            (actual.kind === 'value' || actual.kind === 'string')
+          ) {
+            parsed = annotate(parsed, expected, options.typeAnnotation || 'coerce');
+          } else if (this.checkSubtype(expected, actual)) {
             return null;
           }
         }

package/src/style-spec/expression/types/collator.js

@@ -0,0 +1,24 @@
+class Collator {
+  constructor(caseSensitive, diacriticSensitive, locale) {
+    if (caseSensitive) this.sensitivity = diacriticSensitive ? 'variant' : 'case';
+    else this.sensitivity = diacriticSensitive ? 'accent' : 'base';
+
+    this.locale = locale;
+    this.collator = new Intl.Collator(this.locale ? this.locale : [], {
+      sensitivity: this.sensitivity,
+      usage: 'search'
+    });
+  }
+
+  compare(lhs, rhs) {
+    return this.collator.compare(lhs, rhs);
+  }
+
+  resolvedLocale() {
+    // We create a Collator without "usage: search" because we don't want
+    // the search options encoded in our result (e.g. "en-u-co-search")
+    return new Intl.Collator(this.locale ? this.locale : []).resolvedOptions().locale;
+  }
+}
+
+module.exports = { Collator };

package/src/style-spec/expression/types/formatted.js

@@ -0,0 +1,39 @@
+class FormattedSection {
+  constructor(text, scale, fontStack = null) {
+    this.text = text;
+    this.scale = scale;
+    this.fontStack = fontStack;
+  }
+}
+
+class Formatted {
+  constructor(sections) {
+    this.sections = sections;
+  }
+
+  static fromString(unformatted) {
+    return new Formatted([new FormattedSection(unformatted, null, null)]);
+  }
+
+  toString() {
+    return this.sections.map(section => section.text).join('');
+  }
+
+  serialize() {
+    const serialized = ['format'];
+    for (const section of this.sections) {
+      serialized.push(section.text);
+      const options = {};
+      if (section.fontStack) {
+        options['text-font'] = ['literal', section.fontStack.split(',')];
+      }
+      if (section.scale) {
+        options['font-scale'] = section.scale;
+      }
+      serialized.push(options);
+    }
+    return serialized;
+  }
+}
+
+module.exports = { Formatted, FormattedSection };

package/src/style-spec/expression/types.js

@@ -53,7 +53,7 @@ function checkSubtype(expected, t) {
   if (expected.kind === 'array') {
     if (
       t.kind === 'array' &&
-      !checkSubtype(expected.itemType, t.itemType) &&
+      ((t.N === 0 && t.itemType.kind === 'value') || !checkSubtype(expected.itemType, t.itemType)) &&
       (typeof expected.N !== 'number' || expected.N === t.N)
     ) {
       return null;

package/src/style-spec/expression/values.js

@@ -1,7 +1,8 @@
 const assert = require('assert');
 
 const Color = require('../util/color');
-const { Collator } = require('./definitions/collator');
+const { Collator } = require('./types/collator');
+const { Formatted } = require('./types/formatted');
 const {
   NullType,
   NumberType,
@@ -11,6 +12,7 @@ const {
   ObjectType,
   ValueType,
   CollatorType,
+  FormattedType,
   array
 } = require('./types');
 
@@ -58,6 +60,9 @@ function isValue(mixed) {
   if (mixed instanceof Collator) {
     return true;
   }
+  if (mixed instanceof Formatted) {
+    return true;
+  }
   if (Array.isArray(mixed)) {
     for (const item of mixed) {
       if (!isValue(item)) {
@@ -96,6 +101,9 @@ function typeOf(value) {
   if (value instanceof Collator) {
     return CollatorType;
   }
+  if (value instanceof Formatted) {
+    return FormattedType;
+  }
   if (Array.isArray(value)) {
     const length = value.length;
     let itemType;
@@ -117,7 +125,22 @@ function typeOf(value) {
   return ObjectType;
 }
 
+function toString(value) {
+  const type = typeof value;
+  if (value === null) {
+    return '';
+  }
+  if (type === 'string' || type === 'number' || type === 'boolean') {
+    return String(value);
+  }
+  if (value instanceof Color || value instanceof Formatted) {
+    return value.toString();
+  }
+  return JSON.stringify(value);
+}
+
 module.exports = {
+  toString,
   Color,
   Collator,
   validateRGBA,

package/src/style-spec/function/convert.js

@@ -2,6 +2,10 @@ const assert = require('assert');
 
 module.exports = convertFunction;
 
+function convertLiteral(value) {
+  return typeof value === 'object' ? ['literal', value] : value;
+}
+
 function convertFunction(parameters, propertySpec) {
   let stops = parameters.stops;
   if (!stops) {
@@ -17,7 +21,7 @@ function convertFunction(parameters, propertySpec) {
     if (!featureDependent && propertySpec.tokens && typeof stop[1] === 'string') {
       return [stop[0], convertTokenString(stop[1])];
     }
-    return [stop[0], ['literal', stop[1]]];
+    return [stop[0], convertLiteral(stop[1])];
   });
 
   if (zoomAndFeatureDependent) {
@@ -33,7 +37,9 @@ function convertIdentityFunction(parameters, propertySpec) {
   const get = ['get', parameters.property];
 
   if (parameters.default === undefined) {
-    return get;
+    // By default, expressions for string-valued properties get coerced. To preserve
+    // legacy function semantics, insert an explicit assertion instead.
+    return propertySpec.type === 'string' ? ['string', get] : get;
   }
   if (propertySpec.type === 'enum') {
     return ['match', get, Object.keys(propertySpec.values), get, parameters.default];
@@ -41,7 +47,7 @@ function convertIdentityFunction(parameters, propertySpec) {
   const expression = [
     propertySpec.type === 'color' ? 'to-color' : propertySpec.type,
     get,
-    ['literal', parameters.default]
+    convertLiteral(parameters.default)
   ];
   if (propertySpec.type === 'array') {
     expression.splice(1, 0, propertySpec.value, propertySpec.length || null);
@@ -121,7 +127,7 @@ function convertPropertyFunction(parameters, propertySpec, stops) {
     for (const stop of stops) {
       expression.push(['==', get, stop[0]], stop[1]);
     }
-    expression.push(['literal', coalesce(parameters.default, propertySpec.default)]);
+    expression.push(convertLiteral(coalesce(parameters.default, propertySpec.default)));
     return expression;
   }
   if (type === 'categorical') {
@@ -129,7 +135,7 @@ function convertPropertyFunction(parameters, propertySpec, stops) {
     for (const stop of stops) {
       appendStopPair(expression, stop[0], stop[1], false);
     }
-    expression.push(['literal', coalesce(parameters.default, propertySpec.default)]);
+    expression.push(convertLiteral(coalesce(parameters.default, propertySpec.default)));
     return expression;
   }
   if (type === 'interval') {
@@ -140,7 +146,7 @@ function convertPropertyFunction(parameters, propertySpec, stops) {
     fixupDegenerateStepCurve(expression);
     return parameters.default === undefined
       ? expression
-      : ['case', ['==', ['typeof', get], 'number'], expression, ['literal', parameters.default]];
+      : ['case', ['==', ['typeof', get], 'number'], expression, convertLiteral(parameters.default)];
   }
   if (type === 'exponential') {
     const base = parameters.base !== undefined ? parameters.base : 1;
@@ -150,7 +156,7 @@ function convertPropertyFunction(parameters, propertySpec, stops) {
     }
     return parameters.default === undefined
       ? expression
-      : ['case', ['==', ['typeof', get], 'number'], expression, ['literal', parameters.default]];
+      : ['case', ['==', ['typeof', get], 'number'], expression, convertLiteral(parameters.default)];
   }
   throw new Error(`Unknown property function type ${type}`);
 }
@@ -217,7 +223,7 @@ function convertTokenString(s) {
     const literal = s.slice(pos, re.lastIndex - match[0].length);
     pos = re.lastIndex;
     if (literal.length > 0) result.push(literal);
-    result.push(['to-string', ['get', match[1]]]);
+    result.push(['get', match[1]]);
   }
 
   if (result.length === 1) {
@@ -227,7 +233,7 @@ function convertTokenString(s) {
   if (pos < s.length) {
     result.push(s.slice(pos));
   } else if (result.length === 2) {
-    return result[1];
+    return ['to-string', result[1]];
   }
 
   return result;

package/src/style-spec/function/index.js

@@ -3,6 +3,7 @@ const Color = require('../util/color');
 const getType = require('../util/get_type');
 const interpolate = require('../util/interpolate');
 const Interpolate = require('../expression/definitions/interpolate');
+const { Formatted } = require('../expression/types/formatted');
 const { supportsInterpolation } = require('../util/properties');
 
 module.exports = {
@@ -203,6 +204,9 @@ function evaluateIdentityFunction(parameters, propertySpec, input) {
     case 'color':
       input = Color.parse(input);
       break;
+    case 'formatted':
+      input = Formatted.fromString(input.toString());
+      break;
     case 'enum':
       if (!propertySpec.values.includes(input)) {
         input = undefined;

package/src/style-spec/reference/v8.json

@@ -3148,7 +3148,7 @@
         }
       },
       "concat": {
-        "doc": "Returns a `string` consisting of the concatenation of the inputs. If any inputs are `formatted`, returns a `formatted` with default formatting options for all unformatted inputs.",
+        "doc": "Returns a `string` consisting of the concatenation of the inputs. Each input is converted to a string as if by `to-string`.",
         "group": "String",
         "sdk-support": {
           "basic functionality": {

package/src/symbol/mergelines.js

@@ -1,4 +1,4 @@
-const { Formatted } = require('../style-spec/expression/definitions/formatted');
+const { Formatted } = require('../style-spec/expression/types/formatted');
 
 module.exports = function (features) {
   const leftIndex = new Map();
@@ -8,7 +8,7 @@ module.exports = function (features) {
 
   for (let k = 0; k < features.length; k++) {
     const { geometry, text: featureText } = features[k];
-    const text = featureText instanceof Formatted ? featureText.toString() : featureText;
+    const text = featureText ? featureText.toString() : null;
 
     if (!text) {
       add(k);

package/src/symbol/placement.js

@@ -170,6 +170,25 @@ class Placement {
     const textOptional = layout.get('text-optional');
     const iconOptional = layout.get('icon-optional');
 
+    const textAllowOverlap = layout.get('text-allow-overlap');
+    const iconAllowOverlap = layout.get('icon-allow-overlap');
+    // This logic is similar to the "defaultOpacityState" logic below in updateBucketOpacities
+    // If we know a symbol is always supposed to show, force it to be marked visible even if
+    // it wasn't placed into the collision index (because some or all of it was outside the range
+    // of the collision grid).
+    // There is a subtle edge case here we're accepting:
+    //  Symbol A has text-allow-overlap: true, icon-allow-overlap: true, icon-optional: false
+    //  A's icon is outside the grid, so doesn't get placed
+    //  A's text would be inside grid, but doesn't get placed because of icon-optional: false
+    //  We still show A because of the allow-overlap settings.
+    //  Symbol B has allow-overlap: false, and gets placed where A's text would be
+    //  On panning in, there is a short period when Symbol B and Symbol A will overlap
+    //  This is the reverse of our normal policy of "fade in on pan", but should look like any other
+    //  collision and hopefully not be too noticeable.
+    // See https://github.com/mapbox/mapbox-gl-js/issues/7172
+    const alwaysShowText = textAllowOverlap && (iconAllowOverlap || !bucket.hasIconData() || iconOptional);
+    const alwaysShowIcon = iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || textOptional);
+
     const collisionGroup = this.collisionGroups.get(bucket.sourceID);
 
     if (!bucket.collisionArrays && collisionBoxArray) {
@@ -304,8 +323,8 @@ class Placement {
         assert(bucket.bucketInstanceId !== 0);
 
         this.placements[symbolInstance.crossTileID] = new JointPlacement(
-          placeText,
-          placeIcon,
+          placeText || (alwaysShowText && placedGlyphBoxes),
+          placeIcon || alwaysShowIcon,
           offscreen || bucket.justReloaded
         );
         seenCrossTileIDs[symbolInstance.crossTileID] = true;

package/src/symbol/shaping.js

@@ -1,7 +1,6 @@
 const { charHasUprightVerticalOrientation, charAllowsIdeographicBreaking } = require('../util/script_detection');
 const verticalizePunctuation = require('../util/verticalize_punctuation');
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
-const { Formatted } = require('../style-spec/expression/definitions/formatted');
 
 const WritingMode = {
   horizontal: 1,
@@ -24,23 +23,15 @@ class TaggedString {
 
   static fromFeature(text, defaultFontStack) {
     const result = new TaggedString();
-    if (text instanceof Formatted) {
-      for (let i = 0; i < text.sections.length; i++) {
-        const section = text.sections[i];
-        result.sections.push({
-          scale: section.scale || 1,
-          fontStack: section.fontStack || defaultFontStack
-        });
-        result.text += section.text;
-        for (let j = 0; j < section.text.length; j++) {
-          result.sectionIndex.push(i);
-        }
-      }
-    } else {
-      result.text = text;
-      result.sections.push({ scale: 1, fontStack: defaultFontStack });
-      for (let i = 0; i < text.length; i++) {
-        result.sectionIndex.push(0);
+    for (let i = 0; i < text.sections.length; i++) {
+      const section = text.sections[i];
+      result.sections.push({
+        scale: section.scale || 1,
+        fontStack: section.fontStack || defaultFontStack
+      });
+      result.text += section.text;
+      for (let j = 0; j < section.text.length; j++) {
+        result.sectionIndex.push(i);
       }
     }
     return result;

package/src/symbol/symbol_layout.js

@@ -12,7 +12,7 @@ const classifyRings = require('../util/classify_rings');
 const EXTENT = require('../data/extent');
 const SymbolBucket = require('../data/bucket/symbol_bucket');
 const EvaluationParameters = require('../style/evaluation_parameters');
-const { Formatted } = require('../style-spec/expression/definitions/formatted');
+const { Formatted } = require('../style-spec/expression/types/formatted');
 const murmur3 = require('murmurhash-js');
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and
@@ -79,7 +79,7 @@ function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePo
     const shapedTextOrientations = {};
     const text = feature.text;
     if (text) {
-      const unformattedText = text instanceof Formatted ? text.toString() : text;
+      const unformattedText = text.toString();
       const textOffset = layout
         .get('text-offset')
         .evaluate(feature, {})

package/src/symbol/transform_text.js

@@ -1,5 +1,5 @@
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
-const { Formatted } = require('../style-spec/expression/definitions/formatted');
+const { Formatted } = require('../style-spec/expression/types/formatted');
 
 function transformText(text, layer, feature) {
   const transform = layer.layout.get('text-transform').evaluate(feature, {});
@@ -17,11 +17,8 @@ function transformText(text, layer, feature) {
 }
 
 module.exports = function (text, layer, feature) {
-  if (text instanceof Formatted) {
-    text.sections.forEach(section => {
-      section.text = transformText(section.text, layer, feature);
-    });
-    return text;
-  }
-  return transformText(text, layer, feature);
+  text.sections.forEach(section => {
+    section.text = transformText(section.text, layer, feature);
+  });
+  return text;
 };