Michal.Parteka
- edited
Introduction
This mini-tutorial shows up few code examples which allows user to see some specific information about data in select areas.
Link to code examples: Bitbucket link
In BI applications, areas are clickable elements. This means that User can select some features on the map depending on his needs.
All features selected:
Few features selected:
There are few new methods in API to get informations about selected features by code:
gsp.bi.stage.findSelectedFeatures(); gsp.bi.stage.findSelectedRecords(); gsp.bi.stage.findSelectedFeatureIds();
Code examples linked above contains ready code with these methods. They can be used in any BI application, all what needs to be done is to put them in customization window while editing the App.
Description
Following methods are implemented in the same way, in each case they are triggered by clicking button "Trigger me!" in sidebar.
1. gsp.bi.stage.findSelectedFeatureIds();
gsp.ui.sidebar.add({
id: "sidebar-panel-2",
title: "Feature Selection",
style: "background-position: 0px 0px;"
}, function(ret) {
addButton("sidebar-panel-2");
document.getElementById("Trigger").addEventListener("click", findIds);
})
function addButton(sidebarId) {
var button, sidebar;
button = document.createElement("button");
button.type = "file";
button.className = "custom-snippet-trigger";
button.id = "Trigger";
text = document.createTextNode("Trigger Me!");
button.appendChild(text);
sidebar = document.getElementById(sidebarId);
sidebar.appendChild(button);
}
function findIds() {
gsp.bi.stage.findSelectedFeatureIds({
//layer: "labor_geom" // this parameter is optional
}, function(ret) {
//Popup
gsp.ui.info("Id's of selected features: " + ret);
console.log(ret);
}, function(err) {
// display err
console.error(err)
});
}
Following code finds the ID's of selected features, popups them as UI message and returns them as an array in console.
Developer Tools console output:
2. gsp.bi.stage.findSelectedFeatures();
gsp.ui.sidebar.add({
id: "sidebar-panel-2",
title: "Feature Selection",
style: "background-position: 0px 0px;"
}, function(ret) {
addButton("sidebar-panel-2");
document.getElementById("Trigger").addEventListener("click", findFeatures);
})
function addButton(sidebarId) {
var button, sidebar;
button = document.createElement("button");
button.type = "file";
button.className = "custom-snippet-trigger";
button.id = "Trigger";
text = document.createTextNode("Trigger Me!");
button.appendChild(text);
sidebar = document.getElementById(sidebarId);
sidebar.appendChild(button);
}
function findFeatures() {
gsp.bi.stage.findSelectedFeatures({
//layer: "labor_geom" // this parameter is optional
}, function(ret) {
var message = ""; // Empty variable for message
for (var i = 0; i < ret.features.length; i++) {
features = ret.features[i]; // features from return
var nameOfFeature = JSON.stringify(features.properties.NAME); //getting to name of features
message = message + "Selected features names: " + nameOfFeature + "</br>"; // adding message content
}
// Popup
gsp.ui.info(message);
}, function(err) {
// display err
console.error(err)
});
}
Following code returns names of selected features as popup UI message. Method returns selected features in form of geoJSON object. Code above gets only name of features from this object.
3. gsp.bi.stage.findSelectedRecords();
gsp.ui.sidebar.add({
id: "sidebar-panel-2",
title: "Feature Selection",
style: "background-position: 0px 0px;"
}, function(ret) {
addButton("sidebar-panel-2");
document.getElementById("Trigger").addEventListener("click", findRecords);
})
function addButton(sidebarId) {
var button, sidebar;
button = document.createElement("button");
button.type = "file";
button.className = "custom-snippet-trigger";
button.id = "Trigger";
text = document.createTextNode("Trigger Me!");
button.appendChild(text);
sidebar = document.getElementById(sidebarId);
sidebar.appendChild(button);
}
function findRecords() {
gsp.bi.stage.findSelectedRecords({
//layer: "labor_geom" // this parameter is optional
}, function(ret) {
// function for assigning new number values
function randomMath(min, max) {
return Math.round((max + min) * min * Math.random());
}
// Empty string variable
var debt = "";
for (var i = 0; i < ret.length; i++) {
var records = ret[i]; //records from .csv
var newProp = randomMath(100, 1000); //values for new property
records.debt = newProp; //new property called "debt"
//Converting values to string to assign them to ui.info
var strDebt = JSON.stringify(ret[i].debt);
var names = JSON.stringify(ret[i].NAME);
var year = JSON.stringify(ret[i].YEAR);
//info which be showed up in gsp.ui.info
debt = debt + ("Debt in " + names + " in " + year + " year (in milions): " + strDebt + "</br>");
}
console.log(strDebt);
gsp.ui.info(debt);
}, function(err) {
// If error happen
console.error(err)
});
}
This method gets the records from .csv file data of selected features. Code above adds new record called "debt", then assigns custom values to this record and popups it with another record called "year" in UI message.
