2 Replies Latest reply: Jan 30, 2014 11:01 AM by Wayne Blumstengel RSS

    How To Access Object Non-Spatial Data Using HTML5 API

    Wayne Blumstengel

      Using the Oracle Maps HTML5 API, is there any way to access the data one retrieves when generating a map?

       

      For example, my database has a table called ITEMS:

       

      Table: ITEMS

       

      COL_A

      COL_B

      COL_C

      COL_D

      COL_E

      COL_F

      GEOMETRY

       

      This table contains a number of point objects.  Using Mapviewer, I can successfully create a map using the HTML5 API.  Below is an example of how I used the "OM.layer.VectorLayer.TYPE_JDBC" constructor to retrieve the point objects from my database.

       

          pointLayer = new OM.layer.VectorLayer("PointLayer",

            {

              infoWindow: true,

                def:

                {

                    type: OM.layer.VectorLayer.TYPE_JDBC,

                dataSource: "myDatabase",

                sql: "SELECT * FROM ITEM",

                geometryColumn: "GEOMETRY",

                labelColumn: "COL_A",

                loadOnDemand: false,

                URL: baseURL

              },

              renderingStyle: circleMarker

            });

       

      How would I use the HTML5 API to access the data in the other columns (COL_A, COL_B, etc) of my table?

       

      I know that displayInfoWindow and displayTabbedInfoWindow methods of the Map class can be used to display this information by clicking on a specific point on the map.  But I wish to access all the points to create a table below my map showing all the points (and their data) shown on the map.

        • 1. Re: How To Access Object Non-Spatial Data Using HTML5 API
          User268653

          hi

          you can try this code :

           

          var features = pointLayer.getAllFeatures();

          for(var i=0; i<features.length; i++)

            {

                features[i].getAttributes()["COL_A"];

          features[i].getAttributes()["COL_B"];


          ......





          }

          • 2. Re: How To Access Object Non-Spatial Data Using HTML5 API
            Wayne Blumstengel

            Thanks.  Your answer was very helpful.  It pointed me in the right direction.  I wanted to be able to generate a table, below the map, which listed all the points (and their associated data) shown on the map.  The simplified code I used is shown below.  The function is called using an event listener (map.addListener(OM.event.MapEvent.LAYER_ADDED, createTable) which fires after the pointlayer is added to the map.

             

            function createTable(evt) {
            
                var tableRecords = pointLayer.getAllFeatures();
                var tableRecordsAttr = pointLayer.getAttributeNames();
            
                divElem = document.createElement('div');
                tableElem = document.createElement('table');
                tbodyElem = document.createElement('tbody');
                rowElem = document.createElement('tr');
            
                // create the table headings      
                for (var i = 0; i < tableRecordsAttr.length; i++) {
                    colElem = document.createElement('th');
                    colElem.appendChild(document.createTextNode(tableRecordsAttr[i]));
                    rowElem.appendChild(colElem);
                }
            
                tbodyElem.appendChild(rowElem);
            
                // populate each row of the table with data
                for (var i = 0; i < tableRecords.length; i++) {
                    rowElem = document.createElement('tr');
            
                    for (var j = 0; j < tableRecordsAttr.length; j++) {
            
                        colElem = document.createElement('td');
                        colElem.appendChild(document.createTextNode(tableRecords[i].getAttributes()[tableRecordsAttr[j]]));
                        rowElem.appendChild(colElem);
                    }
            
                    tbodyElem.appendChild(rowElem);
                }
            
                tableElem.appendChild(tbodyElem);
                divElem.appendChild(tableElem);
                document.getElementsByTagName('body')[0].appendChild(divElem);
            
            }