Dual-variable Map Visualizations

#1

We need to visualize two variables for an asset on a map at the same time. For example, for each asset on the map, display a metric value/range/gradient, and also group membership or region for the asset.

What options are available with the map component in the UI framework today for:

  1. indicating asset metric values or ranges: eg. color, size.
  2. indicating asset groupings: eg. tiles/boundaries, shapes.
0 Likes

#2

On the Map component, we have this config overlayConfigurations
` /**
* @cfg {Array}, overlayConfigurations
* @cfg {String}, overlayConfigurations.id, the id of the overlay configuration.
* @cfg {String}, overlayConfigurations.name, the name of the overlay configuration.
* @cfg {String}, overlayConfigurations.tileUrl, used to fetch the tile.
* @cfg {Number}, overlayConfigurations.maxZoom, maximum zoom level.
* @cfg {Number}, overlayConfigurations.group, the group number in the map.
* @cfg {Number}, overlayConfigurations.opacity, the opacity of the the tiles.
* @example
* [{ id: ‘heatmapHop’, name: ‘Hop Count’, tileUrl: ‘hopCount’, maxZoom: 17, group: 2, opacity : 0.6 },
{ id: ‘heatmapHealth’, name: ‘Health’, tileUrl: ‘generalHealthScore’, maxZoom: 17, group: 2, opacity : 0.6 },
{ id: ‘heatmapTemp’, name: ‘Temp’, tileUrl: ‘highTemperatureScore’, maxZoom: 17, group: 2, opacity : 0.6 },
{ id: ‘allMeters’, name: ‘All Meters’, tileUrl: ‘meterStatus’, maxZoom: 17, group: 2, opacity : 0.7 }]
*/

and markerColors

/** * @cfg {Array or Object} markerColors This config takes two forms. If you * want to color based on a variety of fields using logical comparators and values, * then feed this config an array as shown in example 1. The config in example 1 can * also be used to pick a specific icon url based on the logic. You can either specify * an icon url or an svg path and color. * * If you want to color values based on a numeric field within spectrum of color then feed this * config an object shown in example 2. Field values are multiplied by the optional * parameter before being rendered. * * @example * 1. * markerColors: [ * { field:"status", comparator: "==", value: "Active", color: "green"}, * { field:"status", comparator: "==", value: "Inactive", url: "truck-orange"} * { field:"resource", comparator: "==", value: "electricity", path: "electricity", color: "yellow"} * ] * * 2. * markerColors: { * field: "failureScore", * colorRange: ["ff0000", "00ff00"], * valueRange: [20, 80], * fieldValueMultiplier: 100 * } */

These may be helpful

0 Likes

#3

Thanks. Regarding the overlayConfigurations, what formats does this support? Can you provide any further examples of use?

0 Likes