tangram_xyz_scene.yaml

import:
  - xyz_patterns.yaml

global:
    highlight:
        color: [1,1,1,0.25]
        width: 2px
    grey:
        color: [.5,.5,.5,0.25]
        width: 2px
    black:
        color: [0,0,0,0.25]
        width: 2px

    # replaced by app JS, used to look-up feature props that may be nested
    lookupFeatureProp: function(feature) { return null; }
    lookupFeatureLabelProp: function(feature) { return null; }
    lookupFeaturePointSizeProp: function(feature) { return null; }

    # set feature colors to dynamic (by property, hash, etc.) or default (based on geometry type)
    featureColorType: default

    # get feature color based on current visualization mode and color palette
    # either color by feature color property, or fallback to geometry type,
    # or dyanmic feature coloring, using the currently defined "visualization mode"
    featureColor: |
      function() {
        if (global.featureColorType === 'dynamic') {
          try {
            if (global.vizModes[global.vizMode]) {
              if (global.vizModes[global.vizMode].useProperty) {
                return global.vizModes[global.vizMode].color(
                  global.lookupFeatureProp(feature),
                  global.viz
                );
              }
              else {
                return global.vizModes[global.vizMode].color(
                  feature,
                  global.viz
                );
              }
            }
          }
          catch(e) { // fallthrough to default color on exception
            return 'rgba(127, 127, 127, .25)';
          }
        }
        else {
            if (feature.color) {
              return feature.color
            }
            else if ($geometry === 'point') {
              return [1, 0, 0, 0.5];
            }
            else if ($geometry === 'line') {
              return [1, 1, 0, 0.3];
            }
            else if ($geometry === 'polygon') {
              return [1, 0, 1, 0.3];
            }
        }
      }

    # calculate normalized value (between 0-1) feature
    featureNormalizedValue: |
      function() {
        try {
          if (global.viz.featureProp != null && typeof global.vizModes[global.vizMode].value === 'function') {
            return global.vizModes[global.vizMode].value(
              global.lookupFeatureProp(feature),
              global.viz
            );
          }
          else {
            return 1;
          }
        }
        catch(e) { // fallthrough to default on exception
          return 1;
        }
      }

    # optionally hide feature values that are above or below the current filter range
    featureFilterOutliers: |
        function() {
          if (global.viz.featurePropHideOutliers && global.vizModes[global.vizMode]) {
            if (global.vizModes[global.vizMode].useProperty) {
              var value = global.viz.vizHelpers.parseNumber(global.lookupFeatureProp(feature));
              if (value < global.viz.featurePropMinFilter ||
                  value > global.viz.featurePropMaxFilter+1) {
                return false;
              }
            }
          }
          return true;
        }

    # optionally filter by specific property/value combination
    featureFilterSelectedValue: |
        function() {
          if (global.viz.featureProp != null && global.viz.featurePropValue !== '') {
            var value = global.lookupFeatureProp(feature);
            if (value != global.viz.featurePropValue) {
              return false;
            }
          }
          return true;
        }

    # used for dynamic text_source on feature labels
    featureLabelText: |
        function() {
          return global.lookupFeatureLabelProp(feature);
        }

    # dynamic point size by feature property
    featurePointSizeDynamic: |
      function(feature, global) {
        var size = global.viz.vizHelpers.parseNumber(global.lookupFeaturePointSizeProp(feature)) || 0;
        var range = global.featurePointSizeRange;
        if (range[1] - range[0] !== 0) {
          size = (size - range[0]) / (range[1] - range[0]) * (range[3] - range[2]) + range[2];
        }
        else {
          size = range[2]; // use minimum size value if range min/max are the same
        }
        size = Math.max(range[2], Math.min(range[3], size));
        return size;
      }

sources:
    # this source is created at run-time based on XYZ space
    _xyzspace: {}

styles:
    projection:
        mix: []
    _points:
        base: points
        mix: projection_points
        blend: overlay
        blend_order: 0
    _text:
        base: text
        mix: projection_points
        blend: overlay
        blend_order: 11
    _lines:
        base: lines
        mix: projection
        blend: opaque
        blend_order: 0
    _lines_overlay:
        base: lines
        mix: projection
        blend: overlay
        blend_order: 0
    _polygons:
        base: polygons
        mix: projection
        blend: opaque
        blend_order: 1
    _polygons_inlay:
        base: polygons
        mix: projection
        blend: inlay
        blend_order: 0
    _polygons_overlay:
        base: polygons
        mix: projection
        blend: overlay
        blend_order: 1

layers:
    _xyz_dots:
        filter:
          all:
            - $geometry: point
            - global.featureFilterOutliers
            - global.featureFilterSelectedValue
        data:
            source: _xyzspace
            all_layers: true
        draw:
            # regular filled points
            _points:
                interactive: true
                collide: false
                blend_order: 0 # put our points under the basemap labels
                color: global.featureColor
                size: global.featurePointSize
                outline:
                    width: 0px
                text:
                    style: _text
                    visible: false # updated by JS app at run-time
                    text_source: global.featureLabelText
                    optional: true
                    font: global.featureLabelFont # set by the basemap
                    repeat_distance: 128px

        # inverted, outline-only "donut" points
        # these get toggled on/off with the filled points above, as an alternate point draw mode
        donut_points:
            enabled: false
            draw:
              _points:
                  color: transparent
                  outline:
                      color: global.featureColor

    _xyz_lines:
        filter:
          all:
            - $geometry: line
            - global.featureFilterOutliers
            - global.featureFilterSelectedValue
        data:
            source: _xyzspace
            all_layers: true
        draw:
            _lines_overlay:
                interactive: true
                color: global.featureColor
                width: 4px
                blend_order: 0
                outline:
                   width: 0px
            text:
              style: _text
              visible: false # updated by JS app at run-time
              text_source: global.featureLabelText
              # unique repeat group per feature, to avoid culling of labels with same values
              repeat_group: function() { return $id }
              font: global.featureLabelFont # set by the basemap

    _xyz_polygons:
        filter:
          all:
            - $geometry: polygon
            - global.featureFilterOutliers
            - global.featureFilterSelectedValue
        data:
            source: _xyzspace
            all_layers: true        
        _outlines:
            draw:
                _lines_overlay:
                    width: 0px
                    blend_order: 0
        draw:
            _polygons_inlay:
                interactive: true
                color: global.featureColor
                width: 2px
                order: 300
                blend_order: 0
            text:
              style: _text
              visible: false # updated by JS app at run-time
              text_source: global.featureLabelText
              # unique repeat group per feature, to avoid culling of labels with same values
              repeat_group: function() { return $id }
              repeat_distance: 700px # allow polygon labels to repeat over a longish distance
              font: global.featureLabelFont # set by the basemap