Hexagon Geospatial
MENU

Shared Samples

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

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

by Technical Evangelist ‎08-04-2016 07:10 AM - edited ‎10-11-2016 09:45 AM (859 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:

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.

trigger1.png

 

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.

IDs1.png

Developer Tools console output: 

consoleIDs.png

 

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.

nazwy1.png

 

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.

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.