Interactive Usage with the Spatial Studio Web Component

Describes the methods supported for interacting with the Spatial Studio web component for embedding.

clearFilters

Method Name: clearFilters(layerId: string)

Description: To clear all the filters for a given layerId.

Example:

const spatialStudioProjectElement = document.getElementById('spatial-studio-project-1');

const layerId = 'abcd1234';

spatialStudioProjectElement.clearFilters(layerId);

filterFeatures

Method Name: filterFeatures(layerId: string, columnName: string, values: any[])

Description: To filter feature for a given layerId, columnName and an array of values.

Example:

const studioProjectElement = document.getElementById('spatial-studio-project-1');

const layerId = 'abcd1234';
const columnName = 'COUNTRY_NAME';
const values = ['Canada, 'Ireland', 'Japan'];

studioProjectElement.filterFeatures(layerId, columnName, values);

selectFeatures

Method Name: selectFeatures(datasetId: string, featureKeys: any[])

Description: To select and highlight features by datasetId and an array of featureKeys.

Example:

const studioProjectElement = document.getElementById('spatial-studio-project-1');

const datasetId = "7e4c89462b580ae2f253adf5c8bff711";
const selectedFeatureIds = [1, 3, 10];

studioProjectElement.selectFeatures(datasetId, selectedFeatureIds);

features_selected

Event Name: features_selected

Description: Event is triggered when the features selection is changed, most commonly when the user selects features in the maps or tables. The DatasetSelectedFeatures object which contains an array of feature keys for a dataset is defined as shown:

DatasetSelectedFeatures: {
    datasetId         : string,
    featureKeys       : Array<string | number>
}

Example: The following code example gets a reference to a web element, adds a listener to the web component, and defines a callback:

const studioProjectElement = document.getElementById('spatial-studio-project-1');
studioProjectElement.addEventListener('features_selected', (event) => {
    const selectionObjects = event.detail.value;
    console.log(JSON.stringify(selectionObjects));
});