Showing results for 
Search instead for 
Do you mean 

Finding selected elements on the map by code in BI applications.

by Technical Evangelist on ‎08-04-2016 07:10 AM - edited on ‎10-31-2019 02:39 AM by Community Manager (1,138 Views)

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:

poland test1 Clone.png

 

Few features selected:

poland test1 Clone-click.png

 

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.

trigger1.png

 

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.

IDs1.png

Developer Tools console output: 

consoleIDs.png

 

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.

nazwy1.png

 

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.

debt1.png

Comments
by
on ‎03-05-2018 02:25 AM

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

 

by Technical Evangelist
on ‎03-07-2018 02:23 AM

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.