s2maps-gpu - v0.18.0
    Preparing search index...

    Interface Property<T>

    Property

    An extremely maleable input that allows you to style input data as either the value itself or something that mutates on user input changes, data input changes, feature state like hovering, etc.

    ex.

    { "color": "rgba(240, 2, 5, 1)" }

    ex.

    { "color": { "inputValue": { "key": "type", "fallback": "blue" } } }

    ex.

    "weight": {
      "dataRange": {
        "key": "mag",
        "ease": "expo",
        "base": 1.5,
        "ranges": [
          { "stop": 0, "input": 0 },
          { "stop": 8, "input": 1 }
        ]
      }
    }
    • inputValue: [See InputValue] access value in feature properties
    • dataCondition: [See DataCondition] filter based on feature property conditions
    • dataRange: [See DataRange] filter based on feature property ranges
    • inputRange: [See InputRange] filter based on map conditions like "zoom", "lon", "lat", "angle", or "pitch"
    • featureState: [See FeatureState] filter based on feature state
    • fallback: if all else fails, use this value. A value of T itself or pull from feature properties using Property
    interface Property<T extends NotNullOrObject> {
        dataCondition?: DataCondition<ValueType<T>>;
        dataRange?: DataRangeEase<NumberColor<T>> | DataRangeStep<ValueType<T>>;
        fallback?: Property<T> | T;
        featureState?: FeatureState<ValueType<T>>;
        inputRange?: InputRangeEase<NumberColor<T>> | InputRangeStep<ValueType<T>>;
        inputValue?: InputValue<ValueType<T>>;
    }

    Type Parameters

    Index

    Properties

    dataCondition? dataRange? fallback? featureState? inputRange? inputValue?

    Properties

    dataCondition?: DataCondition<ValueType<T>>

    Data conditions are used to filter features based on what property values the feature has. If the condition's filter passes, the input is used. If all conditions fail, the fallback is used.

    ex.

    "color": {
       "dataCondition": {
         "conditions": [
           {
             "filter": { "key": "country", "comparator": "==", "value": "US" },
             "input": "#007bfe"
            }
         ],
         "fallback": "#23374d"
       }
     }

    ex.

    When using a cluster source you can access its sum:

    "color": {
     "dataCondition": {
        "conditions": [
          {
            "filter": { "key": "__sum", "comparator": ">", "value": 750 },
            "input": "#f28cb1"
          },
          {
            "filter": { "key": "__sum", "comparator": ">", "value": 100 },
            "input": "#f1f075"
          }
        ],
        "fallback": "#51bbd6"
      }
    }
    dataRange?: DataRangeEase<NumberColor<T>> | DataRangeStep<ValueType<T>>

    Data Range is used to group features based on a range of values and apply specific design attributes for those groups. If the feature's value falls within the range, the fallback is used.

    ex.

    "weight": {
      "dataRange": {
        "key": "mag",
        "ease": "expo",
        "base": 1.5,
        "ranges": [
          { "stop": 0, "input": 0 },
          { "stop": 8, "input": 1 }
        ]
      }
    }

    ex. If the layer type is a LAYOUT, you are limited to using the step ease function.

    "opacity": {
      "dataRange": {
        "key": "age",
        "ease": "step",
        "ranges": [
          { "stop": 0, "input": 0 },
          { "stop": 50, "input": 1 }
        ]
      }
    }
    fallback?: Property<T> | T

    Used in conjunction with one of the other types ("inputValue" | "dataCondition" | "dataRange" | "inputRange" | "featureState"). You will never directly call this at the top level but as an internal fallback for the other types.

    featureState?: FeatureState<ValueType<T>>

    Feature State is still under construction and incomplete

    inputRange?: InputRangeEase<NumberColor<T>> | InputRangeStep<ValueType<T>>

    Input Range is used to group features based on a range of values based upon a type provided and apply specific design attributes for those groups. If the feature's value falls within the range, the fallback is used.

    The types you can use are:

    • zoom
    • lon
    • lat
    • angle
    • pitch

    ex.

    "radius": {
      "inputRange": {
        "type": "zoom",
        "ease": "expo",
        "base": 1.5,
        "ranges": [
          { "stop": 0, "input": 3 },
          { "stop": 8, "input": 30 }
        ]
      }
    }

    ex. If the layer type is a LAYOUT, you are limited to using the step ease function.

    "opacity": {
      "inputRange": {
        "type": "zoom",
        "ease": "step",
        "ranges": [
          { "stop": 0, "input": 1 },
          { "stop": 5, "input": 0 }
        ]
      }
    }
    inputValue?: InputValue<ValueType<T>>

    Input values directly access properties data from the feature.

    Lets say you have a feature with the following properties:

    const properties = {
      class: {
        type: 'color-scheme',
        subclass: 'deep'
      }
    }

    You can utilize/access the type property with the following:

    {
      "color": {
         "inputValue": {
            "key": {
               "nestedKey": ["class", "type"],
            },
            "fallback": "blue"
         }
      }
    }

    to get a better understanding of the nestedKey: (this is a contrived example)

    Lets say you have a feature with the following properties:

    const properties = {
      a: {
        b: {
           c: '#fff'
        }
      }
    }

    You can utilize/access the type property with the following:

    {
      "color": {
         "inputValue": {
            "key": {
               "nestedKey": ["a", "b", "c"],
            },
            "fallback": "blue"
          }
       }
    }

    Settings

    Member Visibility

    On This Page

    Property
    Properties