Studio Map Configuration

At the top level, a Studio map configuration object contains a version string and an object with map state, map style and visualization state.

The map configuration does not contain the actual data in the map, just configuration information for the visual and interactive aspects of the map. Rendering of a map typically requires both a map configuration and one or more associated datasets.

Configuration Parameters

Map State

The map state contains the current view of the map (location, zoom, tilt) as well as the various view (2D, 3D, Globe, split screen etc) and base map settings.

The config.mapState object can have the following fields:

Map Styles

Custom map styles can be added:

Fields are described as follows:

Visualization State

The visualization state contains the configuration of the map visualization, which includes:

• Layers (Note: documented on a separate page)
• Filters
• Joins
• Metrics
• Interaction settings
• General visualization settings

The following fields can be added to config.visState:

Layers

An array of layers can be added via the config.visState.interactionConfig.layers array:

Filters

Interaction Configuration

Contains the configuration for interactive elements on the map. The config.visState.interactionConfig has a number of sub objects defining various aspects of map interactivity.

Tooltips

Enable and configure tooltips can be defined in config.visState.interactionConfig.tooltip:

Brushing

Enable and configure the brushing feature by adding a config.visState.interactionConfig.brush object:

Geocoder

Enable and configure the geocoder feature by adding a config.visState.interactionConfig.geocoder object:

Coordinate

Example Map Config

{
  "version": "v1",
  "config": {
    "mapState": {
      "bearing": 0,
      "dragRotate": true,
      "latitude": 27.82040844812393,
      "longitude": 31.05221861771137,
      "pitch": 0,
      "zoom": 1.844221289168002,
      "isSplit": false,
      "mapViewMode": "MODE_GLOBE",
      "mapSplitMode": "SINGLE_MAP",
      "globe": {
        "enabled": true,
        "config": {
          "atmosphere": true,
          "azimuth": true,
          "azimuthAngle": 174,
          "basemap": true,
          "labels": false,
          "terminator": true,
          "terminatorOpacity": 0.33
        }
      }
    },
    "mapStyle": {
      "styleType": "dark",
      "topLayerGroups": {},
      "visibleLayerGroups": {
        "label": true,
        "road": true,
        "border": false,
        "building": true,
        "water": true,
        "land": true,
        "3d building": false
      },
      "threeDBuildingColor": [
        9.665468314072013,
        17.18305478057247,
        31.1442867897876
      ],
      "mapStyles": {}
    },
    "visState": {
      "filters": [],
      "interactionConfig": {
        "tooltip": {
          "fieldsToShow": {
            "f81a0c43-3712-484f-b7a9-24e826777138": [
              {
                "name": "hex",
                "format": null
              },
              {
                "name": "population",
                "format": null
              }
            ]
          },
          "compareMode": false,
          "compareType": "absolute",
          "enabled": true
        },
        "brush": {
          "size": 0.5,
          "enabled": false
        },
        "geocoder": {
          "enabled": false
        },
        "coordinate": {
          "enabled": false
        }
      },
      "layerBlending": "additive",
      "splitMaps": [],
      "animationConfig": {
        "currentTime": null,
        "speed": 1
      },
      "metrics": [],
      "geoKeys": [],
      "groupBys": [],
      "datasets": {
        "fieldDisplayNames": {
          "f81a0c43-3712-484f-b7a9-24e826777138": {}
        }
      },
      "joins": [],
      "layers": [
        {
          "id": "zyf79x7",
          "type": "hexagonId",
          "config": {
            "dataId": "f81a0c43-3712-484f-b7a9-24e826777138",
            "label": "Population - 10 km",
            "color": [130, 154, 227],
            "columns": {
              "hex_id": "hex"
            },
            "isVisible": true,
            "visConfig": {
              "opacity": 0.8,
              "colorRange": {
                "name": "Sunrise 8",
                "type": "sequential",
                "category": "Uber",
                "colors": [
                  "#194266",
                  "#355C7D",
                  "#63617F",
                  "#916681",
                  "#C06C84",
                  "#D28389",
                  "#E59A8F",
                  "#F8B195"
                ]
              },
              "coverage": 1,
              "enable3d": true,
              "sizeRange": [0, 500],
              "coverageRange": [0, 1],
              "elevationScale": 39.1
            },
            "hidden": false,
            "textLabel": [
              {
                "field": null,
                "color": [255, 255, 255],
                "size": 18,
                "offset": [0, 0],
                "anchor": "start",
                "alignment": "center"
              }
            ]
          },
          "visualChannels": {
            "colorField": {
              "name": "population",
              "type": "integer"
            },
            "colorScale": "quantile",
            "sizeField": {
              "name": "population",
              "type": "integer"
            },
            "sizeScale": "linear",
            "coverageField": null,
            "coverageScale": "linear"
          }
        }
      ]
    }
  }
}