Query Oracle table and map ArcGIS Javascript API

7458
15
12-05-2016 06:18 PM
AhmadSopian1
New Contributor

How to display layer the appropriate map query???

0 Kudos
15 Replies
AhmadSopian1
New Contributor

this is code query geodatabase in .NET Program

 
 DataTable dt;
 cmd.CommandText += "SELECT * FROM BUILD ";
 cmd.CommandText += "WHERE (((REL_PLANING_DATE - CURRENT_DATE)<61 And (REL_PLANING_DATE-CURRENT_DATE)>=0)) ";‍‍‍‍‍‍‍‍

this is code arcgis javascript api

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var map;
        require([
        "esri/map", "esri/dijit/HomeButton", "esri/InfoTemplate", "esri/layers/FeatureLayer",
        "dojo/parser", "dojo/domReady!"
      ], function (
        Map, HomeButton, InfoTemplate, FeatureLayer,
        parser
      ) {
          parser.parse();
          map = new Map("mapDiv", {
              basemap: "topo",
              center: [118.258, -1.175],
              zoom: 5,
              logo: false,
              showAttribution: false
          });

          map.on("load", initOperationalLayer);

          var home = new HomeButton({
              map: map
          }, "HomeButton");
          home.startup();

          function initOperationalLayer() {
              var infoTemplate = new InfoTemplate("${BD_ID}", "Building Name:  ${BD_NAME}", "Building Name:  ${BD_NAME}");
              var bdID = "BD_ID='PND_A' OR BD_ID= 'PND_J'";  
              var featureLayer = new FeatureLayer("http://localhost/arcgis/rest/services/Demo/Demo/MapServer/0", {
                  mode: FeatureLayer.MODE_ONDEMAND,
                  outFields: ["*"],
                  infoTemplate: infoTemplate
              });

              featureLayer.setDefinitionExpression(bdID); 

              map.addLayer(featureLayer);
              map.infoWindow.resize(155, 75);
          }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
    <div id="HomeButton"></div>
    </div>
  </body>
</html>
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ahmad,

   The JS API is not always comparable to a .NET program. Dot NET has direct access to ArcObjects and databases. You can not use relationship field in a FeatureLayers definition query. Your access to related data is limited to what is documented in the API. 

FeatureLayer | API Reference | ArcGIS API for JavaScript 3.18 | queryRelatedFeatures 

0 Kudos
AhmadSopian1
New Contributor

Robert Scheitlin, GISP

Can I change the ComboBox becomes Checklist Value

<!DOCTYPE html>
<html>
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
    <title>build dropdown list with unique values</title>  

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    
    <style type="text/css">
     body,html,#main  {
       margin:0;
       padding:0;
       height:100%;
       width:100%;
     } 
     #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
</style>  
    <script src="http://js.arcgis.com/3.10/"></script>  
    <script>  
    var map;  
 var resizeTimer;  
      require([
      "esri/map", "esri/dijit/HomeButton", "esri/tasks/query", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory", "dojo/on", "dojo/domReady!"], 
      function(Map, HomeButton, query, parser, BorderContainer, ContentPane, ComboBox, ItemFileReadStore, Memory, on) {  
  
        parser.parse();  
        map = new Map("map", {  
            basemap: "topo",  

                center: [118.258, -1.175],
              zoom: 5,
              logo: false,
              showAttribution: false
        });
        
          var home = new HomeButton({
        map: map
        }, "HomeButton");
        home.startup();
        
        var queryTask = new esri.tasks.QueryTask("http://localhost/arcgis/rest/services/Demo/Demo/MapServer/0");  
  
        //Define query parameters  
        var query = new esri.tasks.Query();  
        query.outFields = ["BD_ID"];  
        query.returnGeometry = false;  
        query.where  = "BD_ID <> ''"  
        queryTask.execute(query,buildList);  

        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));       
        map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/arcgis/rest/services/Demo/Demo/MapServer",  
                {"opacity":1,"id":"dynamic"}));  
      
      function buildList(results) {  
        //build the dropdown list box with unique values  
        var build;  
        var values = [];  
        var testVals={};  
        //Add option to display all build types to the dropdown list   
        values.push({name:"ALL"})            
        var features = results.features;  
        dojo.forEach (features, function(feature) {  
          build = feature.attributes.BD_ID;  
          if (!testVals[build]) {  
            testVals[build] = true;  
            values.push({name:build});  
          }  
        });  
          
        var dataItems = {  
               identifier: 'name',  
               label: 'name',  
               items: values  
        };  
        var store = new dojo.store.Memory({data:dataItems});  
        dijit.byId("mySelect").store = store;  
      }  
      
      // this replaces your applyLayerDef() function
      dijit.byId("mySelect").on("change", function () {
        //Filter the layer to display only the selected build 
        var build = dijit.byId("mySelect").value;
        if (build !== 'ALL') {  
          var layerDefs = [];  
          layerDefs[0] = "BD_ID = " + "'" + build + "'";  
          layerDefs.visibleLayers = [0];  
          map.getLayer("dynamic").setLayerDefinitions(layerDefs);  
        }  
        else {  
          map.getLayer("dynamic").setDefaultLayerDefinitions();  
        }  
      });
            
      function resizeMap() {  
        //Handle browser resize  
        clearTimeout(resizeTimer);            
        resizeTimer = setTimeout(function() {  
          map.resize();  
          map.reposition();  
        }, 800);  
      }  
   });  
     
     
    </script>  
  </head>  
  <body class="claro">  
    <div id="main"   
            dojotype="dijit.layout.BorderContainer"  
            design="headline"   
            gutters="true">  
      <div id="header"  
             dojotype="dijit.layout.ContentPane"  
             region="top"  
             style="height:25px;">  
        <select id="mySelect"   
             dojotype="dijit.form.ComboBox"  
             style="width:300px;font-size:18px;"  
             autoComplete="true"  
             forceValidOption="false"  
             value="Select Layer BD_ID"></select>  
      </div>  
      <div id="map"  
             dojotype="dijit.layout.ContentPane"  
             region="center"   
             style="border:1px solid #000;margin:5px">  
                <div id="HomeButton"></div>

      </div>  
    </div>  
  </body>  
</html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ahmad,

   Sure. I you have another question though you need to start a new thread.

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>build dropdown list with unique values</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">

    <style type="text/css">
        body,
        html,
        #main {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #HomeButton {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }
    </style>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
        var map;
        var resizeTimer;
        require([
                "esri/map",
                "esri/dijit/HomeButton",
                "esri/tasks/query",
                "esri/tasks/QueryTask",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/parser",
                "dijit/layout/BorderContainer",
                "dijit/layout/ContentPane",
                "dijit/form/CheckBox",
                "dojo/dom-construct",
                "dojo/on",
                "dojo/query",
                "dojo/domReady!"
            ],
            function(
                Map,
                HomeButton,
                Query,
                QueryTask,
                ArcGISTiledMapServiceLayer,
                ArcGISDynamicMapServiceLayer,
                parser,
                BorderContainer,
                ContentPane,
                CheckBox,
                domConstruct,
                on,
                dojoQuery
              ) {

                parser.parse();
                map = new Map("map", {
                    basemap: "topo",
                    center: [118.258, -1.175],
                    zoom: 5,
                    logo: false,
                    showAttribution: false
                });

                var home = new HomeButton({
                    map: map
                }, "HomeButton");
                home.startup();

                var queryTask = new QueryTask("http://localhost/arcgis/rest/services/Demo/Demo/MapServer/0");

                //Define query parameters
                var query = new Query();
                query.outFields = ["BD_ID"];
                query.returnGeometry = false;
                query.where = "BD_ID <> ''"
                queryTask.execute(query, buildList);

                map.addLayer(new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
                map.addLayer(new ArcGISDynamicMapServiceLayer("http://localhost/arcgis/rest/services/Demo/Demo/MapServer", {
                    "opacity": 1,
                    "id": "dynamic"
                }));

                function addCheckbox(value, checked) {
                  var checkBox = new CheckBox({
                      name: "checkBox" + value,
                      value: value,
                      checked: checked,
                      onClick: function() {
                        dojoQuery(".dijitCheckBox.dijitCheckBoxChecked.dijitChecked").forEach(function(node){
                          if(this.id != node.attributes.widgetid.value){
                            var cb = dijit.getEnclosingWidget(node);
                            cb.set('checked', false);
                          }
                        },this);
                        var build = this.value;
                        if (build !== 'ALL') {
                            var layerDefs = [];
                            layerDefs[0] = "BD_ID = " + "'" + build + "'";
                            layerDefs.visibleLayers = [0];
                            map.getLayer("dynamic").setLayerDefinitions(layerDefs);
                        } else {
                            map.getLayer("dynamic").setDefaultLayerDefinitions();
                        }
                      }
                  });

                  domConstruct.place(checkBox.domNode, "checkList",
                      "after");
                  var checkLabel = domConstruct.create('label', {
                      'for': checkBox.name,
                      innerHTML: value
                  }, checkBox.domNode, "after");
                  domConstruct.place("<br />", checkLabel,
                      "after");
                  return true;
                }

                function buildList(results) {
                    //build the dropdown list box with unique values
                    var build;
                    var testVals = {};
                    //Add option to display all build types to the dropdown list
                    addCheckbox("ALL", true);
                    var features = results.features;
                    dojo.forEach(features, function(feature) {
                        build = feature.attributes.BD_ID;
                        if (!testVals[build]) {
                            testVals[build] = true;
                            addCheckbox(build, false);
                        }
                    });
                }

                function resizeMap() {
                    //Handle browser resize
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function() {
                        map.resize();
                        map.reposition();
                    }, 800);
                }
            });
    </script>
</head>

<body class="claro">
    <div id="main" dojotype="dijit/layout/BorderContainer" design="headline" gutters="true">
        <div id="header" dojotype="dijit/layout/ContentPane" region="top" style="height:auto; z-index: 9;">
            <div id="checkList"></div>
        </div>
        <div id="map" dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000;margin:5px">
            <div id="HomeButton"></div>
        </div>
    </div>
</body>

</html>
AhmadSopian1
New Contributor

Thanks  rscheitlin

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.

0 Kudos