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

    Interface PropertyOnlyStep<T>

    Property Only Step

    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.

    The "step" type is more limited than a standard Property, often used by LAYOUT styling where the change is immediate to each stop if ranges are used. Thus impacts dataRange and inputRange exclusively.

    ex.

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

    ex.

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

    ex.

    "opacity": {
      "dataRange": {
        "key": "age",
        "ease": "step",
        "ranges": [
          { "stop": 0, "input": 0 },
          { "stop": 50, "input": 1 }
        ]
      }
    }
    • inputValue: [See InputValue] access value in feature properties
    • dataCondition: [See DataCondition] filter based on feature property conditions
    • dataRange: [See DataRangeStep] filter based on feature property ranges
    • inputRange: [See InputRangeStep] 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 PropertyOnlyStep<T extends NotNullOrObject> {
        dataCondition?: DataCondition<ValueType<T>>;
        dataRange?: DataRangeStep<ValueType<T>>;
        fallback?: T | Property<T>;
        featureState?: FeatureState<ValueType<T>>;
        inputRange?: 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?: 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?: T | Property<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?: 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.

    ex.

    Lets say you have a feature with the following properties:

    const properties = {
      class: {
        type: 'blue',
        subclass: 'deep'
      }
    }

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

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

    another ex. 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 Only Step
    Properties