Shared Samples

[#1]

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:

1. gsp.bi.stage.findSelectedFeatures();
2. gsp.bi.stage.findSelectedRecords();
3. 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();

1. gsp.ui.sidebar.add({
2. id: "sidebar-panel-2",
3. title: "Feature Selection",
4. style: "background-position: 0px 0px;"
5. }, function(ret) {
6. addButton("sidebar-panel-2");
7. document.getElementById("Trigger").addEventListener("click", findIds);
8. })
9.  
10. function addButton(sidebarId) {
11. var button, sidebar;
12. button = document.createElement("button");
13. button.type = "file";
14. button.className = "custom-snippet-trigger";
15. button.id = "Trigger";
16. text = document.createTextNode("Trigger Me!");
17. button.appendChild(text);
18.  
19. sidebar = document.getElementById(sidebarId);
20. sidebar.appendChild(button);
21. }
22.  
23. function findIds() {
24. gsp.bi.stage.findSelectedFeatureIds({
25. //layer: "labor_geom" // this parameter is optional
26. }, function(ret) {
27. //Popup
28. gsp.ui.info("Id's of selected features: " + ret);
29. console.log(ret);
30. }, function(err) {
31. // display err
32. console.error(err)
33. });
34. }

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();

1. gsp.ui.sidebar.add({
2. id: "sidebar-panel-2",
3. title: "Feature Selection",
4. style: "background-position: 0px 0px;"
5. }, function(ret) {
6. addButton("sidebar-panel-2");
7. document.getElementById("Trigger").addEventListener("click", findFeatures);
8. })
9.  
10. function addButton(sidebarId) {
11. var button, sidebar;
12. button = document.createElement("button");
13. button.type = "file";
14. button.className = "custom-snippet-trigger";
15. button.id = "Trigger";
16. text = document.createTextNode("Trigger Me!");
17. button.appendChild(text);
18.  
19. sidebar = document.getElementById(sidebarId);
20. sidebar.appendChild(button);
21. }
22.  
23. function findFeatures() {
24. gsp.bi.stage.findSelectedFeatures({
25. //layer: "labor_geom" // this parameter is optional
26. }, function(ret) {
27. var message = ""; // Empty variable for message
28. for (var i = 0; i < ret.features.length; i++) {
29. features = ret.features[i]; // features from return
30. var nameOfFeature = JSON.stringify(features.properties.NAME); //getting to name of features
31. message = message + "Selected features names: " + nameOfFeature + "</br>"; // adding message content
32. }
33. // Popup
34. gsp.ui.info(message);
35. }, function(err) {
36. // display err
37. console.error(err)
38. });
39. }

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();

1. gsp.ui.sidebar.add({
2. id: "sidebar-panel-2",
3. title: "Feature Selection",
4. style: "background-position: 0px 0px;"
5. }, function(ret) {
6. addButton("sidebar-panel-2");
7. document.getElementById("Trigger").addEventListener("click", findRecords);
8. })
9.  
10. function addButton(sidebarId) {
11. var button, sidebar;
12. button = document.createElement("button");
13. button.type = "file";
14. button.className = "custom-snippet-trigger";
15. button.id = "Trigger";
16. text = document.createTextNode("Trigger Me!");
17. button.appendChild(text);
18.  
19. sidebar = document.getElementById(sidebarId);
20. sidebar.appendChild(button);
21. }
22.  
23. function findRecords() {
24. gsp.bi.stage.findSelectedRecords({
25. //layer: "labor_geom" // this parameter is optional
26. }, function(ret) {
27. // function for assigning new number values
28. function randomMath(min, max) {
29. return Math.round((max + min) * min * Math.random());
30. }
31. // Empty string variable
32. var debt = "";
33. for (var i = 0; i < ret.length; i++) {
34. var records = ret[i]; //records from .csv
35. var newProp = randomMath(100, 1000); //values for new property
36. records.debt = newProp; //new property called "debt"
37. //Converting values to string to assign them to ui.info
38. var strDebt = JSON.stringify(ret[i].debt);
39. var names = JSON.stringify(ret[i].NAME);
40. var year = JSON.stringify(ret[i].YEAR);
41. //info which be showed up in gsp.ui.info
42. debt = debt + ("Debt in " + names + " in " + year + " year (in milions): " + strDebt + "</br>");
43. }
44. console.log(strDebt);
45. gsp.ui.info(debt);
46. }, function(err) {
47. // If error happen
48. console.error(err)
49. });
50.  
51. }

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.

[#2]

Hi developers,

I used the labor_geom.geojson from the Half-customized, half-configured BI application tutorial and also added the csv data to configure the bi map. I added the labor_geom as choropleth with map measure WAGES_TOTAL_cum and layer name labor_geom. I also created a pie chart (name: Chart0) with chart dimesion NUTS1.

When I add the code sample 2 for gsp.bi.stage.findSelectedFeatures() and click on the button Trigger Me an empty message appeares.

When I uncomment //layer: "labor_geom" // this parameter is optional I get the error:  'Cannot read property 'chartM' of undefined'.

I can't find my mistake so it would be great to get some help to make it run because I'm stuck here and it's essential for my application to get the filtered features displayed on the map

Thanks a lot!

Marisa

[#3]

I created a workaround for findSelectedFeatures used with V2 rendering engine:

https://bitbucket.org/snippets/pszrajbe/BeKMgb/smart-mapp-gspbistagefindselectedfeatures

and reported a bug ticket.