Dear All, I have created a ArcGIS Javascript API application to Search by some Specific filed like( locality and sub locality etc.) am using query task but it's not working.

2757
10
Jump to solution
04-10-2017 04:59 AM
AnujKumar5
New Contributor II

var map;
var app = {};

require([
"esri/map",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/dom-construct",
"esri/config",
"esri/dijit/LayerList",
"esri/InfoTemplate",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/Search",
"esri/arcgis/utils",
"esri/dijit/Print",
"esri/tasks/PrintTemplate",
"esri/tasks/PrintTask",
"esri/tasks/PrintParameters",
"esri/tasks/GeometryService",
"dojo/on",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dojo/query",
"dijit/registry",

"dojo/parser",
"dojo/_base/array",
"dijit/form/CheckBox",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer", "esri/dijit/Scalebar",
"dijit/layout/ContentPane",
"dojo/domReady!"
],
function (
Map,
Legend, Scalebar,
ArcGISDynamicMapServiceLayer,
Tiled,
FeatureLayer,
dom,
domConstruct,
esriConfig,
LayerList,
InfoTemplate,
HomeButton,
LocateButton,
Search,
arcgisUtils,
Print, PrintTemplate,
PrintTask,
PrintParameters,
GeometryService,
on,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
QueryTask,
Query,
dojoQuery,
registry,
parser,
arrayUtils,
CheckBox
) {

parser.parse();

var legendLayers = [];

esriConfig.defaults.io.proxyUrl = "proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;

map = new Map("map", {
showAttribution: false,
logo: false,
// extent: startExtent,
sliderOrientation: "horizontal"
});
var tiled = new Tiled("https://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer");
//map.addLayer(tiled);

//**********************Deaclaring All DynamicLayer*********************//

var health = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
visible: false
});

var Imagery = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services//MyMapServiceim/MyMapServiceim2/MapServer", {
visible: false
});

//var Delhipolice = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Delhipolice/MapServer", {
// visible: false
//});

//var Firestation = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/FireStationFeatureEdit", {
// visible: false
//});

//var Revenue = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
// visible: false
//});


//**********************Deaclaring All FeatureLayer*********************//

//******************Legend*********************************


map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return { layer: layer.layer, title: layer.layer.name };
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});

//https://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer?f=json&callback=dojo.io...
//**********************Adding All Layer*********************

map.addLayers([tiled,health,Imagery]);

function AddressSearch()
{
alert("Are You Sure.....!");

var Villname = document.getElementById("addnum").value;

var Khasra = document.getElementById("addnum").value;

AddressSearchTask(Villname, Khasra);
}


function AddressSearchTask(Villname, Khasra)
{
streetname = stname.toUpperCase();
queryTask = new QueryTask("http://220.156.189.140:6080/arcgis/rest/services/Revenue/Revenue_Samaspur/MapServer/0");
query = new Query();
query.returnGeometry = true;
query.outFields = ["VILL_NM", "M_KHASRA_N"];
query.where = "VillageName = '" + VILL_NM + "' AND Khasra_No LIKE '%" + M_KHASRA_N + "%'";

queryTask.execute(query, featureZoom);
}

function featureZoom(feature)
{
map.graphics.clear();
ftype = feature.geometry.type;
//console.log(result);
if(ftype == "point")
{
var pt = feature.geometry;
var factor = 1; //some factor for converting point to extent
var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
map.setExtent(extent.expand(60));
showFeature(feature);
} else {
var fExtent = feature.geometry.getExtent().expand(3);
map.setExtent(fExtent);
showFeature(feature);
}

}

function showFeature (feature)
{
map.graphics.clear();
ftype = feature.geometry.type;
if(ftype == "point")
{
feature.setSymbol(psymbol)
setTimeout(function(){map.graphics.clear()}, 3000);
} else {
feature.setSymbol(symbol);
setTimeout(function(){map.graphics.clear()}, 3000);
}
map.graphics.add(feature);
}
//**********************Adding LayerList*********************

var list = new LayerList(
{
map: map,
layers: [{
layer:Imagery,
visibility: false,
showOpacitySlider: true,
id: "Imagery",
sublayers: true
},{
layer: health,
visibility: false,
showLegend: true,
showOpacitySlider: true,
sublayers: true,
id:"Revenu"
}]
}, "LayerLists");
list.startup();
//******************** //Add Home Button\\********************
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();

//******************** // Add LocateButton\\********************

geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();


//******************** //this enables the search widget to display as a single button\\********************

var s = new Search({
enableButtonMode: true,
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
s.startup();

var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
// declare geometry service
esriConfig.defaults.geometryService = new GeometryService("https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// begin print Task
app.printUrl = "https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Ma...";

function createPrintTask(printTitle) {
var template = new PrintTemplate();
template.layout = document.getElementById("printLayoutId").value;
template.label = "Landscape (PDF)";
template.format = document.getElementById("printFormatId").value;
template.layoutOptions = {
legendLayers: [], // empty array means no legend
scalebarUnit: "Miles",
titleText: printTitle
};

var params = new PrintParameters();
params.map = map;
params.template = template;

var printTask = new PrintTask(app.printUrl);
var printObj = {
printTask: printTask,
params: params
}
return printObj;
}
// end of print task

// Activates printer
on(dom.byId("btnPrintReady"), "click", function () {
document.getElementById("btnPrintReady").innerHTML = "Printing..."
document.getElementById("btnPrintReady").disabled = true;
var printObj = createPrintTask(document.getElementById("printTitleId").value);
var printTask = printObj.printTask;
printTask.execute(printObj.params, function (evt) {
document.getElementById("btnPrintReady").style.display = 'none';
document.getElementById("printResult").href = evt.url;
document.getElementById("printResult").style.display = 'block';
on(dom.byId("printResult"), "click", function () {
document.getElementById("btnPrintReady").innerHTML = "Print";
document.getElementById("btnPrintReady").style.display = 'block';
document.getElementById("btnPrintReady").disabled = false;
document.getElementById("printResult").style.display = 'none';
});
}, function (evt) {
document.getElementById("btnPrintReady").disabled = false;
document.getElementById("btnPrintReady").innerHTML = "Print";
});
});

// Hides print widget
on(dom.byId("closePrint"), "click", function () {
document.getElementById("feedback").style.visibility = 'hidden';
});

// Shows tools
on(dom.byId("showTools"), "click", function () {
document.getElementById("showToolsButton").style.visibility = 'hidden';
document.getElementById("hideToolsButton").style.visibility = 'visible';
document.getElementById("printer").style.visibility = 'visible';
});

// Hide tools
on(dom.byId("hideTools"), "click", function () {
document.getElementById("showToolsButton").style.visibility = 'visible';
document.getElementById("hideToolsButton").style.visibility = 'hidden';
document.getElementById("printer").style.visibility = 'hidden';
document.getElementById("feedback").style.visibility = 'hidden';
});

// Show print widget
on(dom.byId("showPrintWidget"), "click", function () {
document.getElementById("feedback").style.visibility = 'visible';
});

//************End of Script******************************//
});

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Anuj,

   This is the best I could do to clean up your (which was a mess) and fix your issue:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/soria/soria.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">

  <script src="http://js.arcgis.com/3.18/"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <style type="text/css">
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      color: Gray;
    }
    
    body {
      background-color: #d3d3d3;
      overflow: hidden;
      height: 100%;
      width: 100%;
      font-family: "Trebuchet MS";
    }
    
    #header {
      background-image: url(../images/banner.jpg);
      background-repeat: repeat-x;
      margin: 2px;
      border: solid 4px #224a54;
      color: white;
      font-size: 18pt;
      text-align: left;
      font-weight: bold;
      height: 80px;
      font-family: "Comic sans MS", Times, serif;
    }
    
    #subheader {
      font-size: small;
      color: white;
      padding-left: 2px;
    }
    
    #search {
      position: absolute;
      top: 2px;
      right: 120px;
      z-index: 50;
    }
    
    #LocateButton {
      position: absolute;
      top: 2px;
      right: 50px;
      z-index: 53;
    }
    
    #HomeButton {
      position: absolute;
      top: 2px;
      right: 86px;
      z-index: 50;
    }
    
    #leftPane {
      margin: 5px;
      padding: 2px;
      background-color: skyblue;
      color: black;
      border: solid 2px #224a54;
      width: 20%;
    }
    
    #map {
      margin: 5px;
      border: solid 4px #654d7f;
      -moz-border-radius: 4px;
      color: Gray;
      height: 100%;
    }
    
    #footer {
      margin: 2px;
      border: solid 2px #224a54;
      background-color: #feabc5;
      color: #3f3f3f;
      font-size: 10pt;
      text-align: center;
      height: 40px;
    }
    
    .dijitTabInnerDiv {
      background-color: blue;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #legendPane {
      border: solid 2px #97DCF2 11px;
    }
    
    #layerListPane {
      width: 20%;
    }
    
    .esriLayer {
      background-color: #4c8eef;
    }
    
    .esriLayerList .esriList {
      border: solid 4px;
    }
    
    .esriLayerList .esriTitle {
      border-bottom: solid 2px rgb(2, 241, 8);
      color: white;
    }
    
    .container {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 12%;
      font-family: "Open Sans";
    }
    
    #marquee {
      color: White;
      border: solid 2px;
    }
    
    div.dms {
      display: none;
    }
    
    div.latlog {
      display: none;
    }
    
    #result {
      padding: 12px;
      background-color: #ad87eb;
      border-radius: 8px;
      color: rgb(114, 219, 2);
      font-weight: 800;
      cursor: pointer;
    }
    
    #searchpan {
      border: 2px solid black;
      padding: 2px;
      background-color: #4c8eef;
      color: #fff;
    }

  </style>

  <title> by Anujkumarshukla</title>


  <script type='text/javascript'>
    var map;
    var app = {};
    var queryTask, query;

    require([
        "esri/map",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
        "dojo/dom",
        "dojo/dom-construct",
        "esri/config",
        "esri/dijit/LayerList",
        "esri/InfoTemplate",
        "esri/dijit/HomeButton",
        "esri/dijit/LocateButton",
        "esri/dijit/Search",
        "esri/arcgis/utils",
        "esri/dijit/Print",
        "esri/tasks/PrintTemplate",
        "esri/tasks/PrintTask",
        "esri/tasks/PrintParameters",
        "esri/tasks/GeometryService",
        "dojo/on",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "dojo/query",
        "dijit/registry",

        "dojo/parser",
        "dojo/_base/array",
        "dijit/form/CheckBox",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer", "esri/dijit/Scalebar",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function(
        Map,
        Legend, Scalebar,
        ArcGISDynamicMapServiceLayer,
        Tiled,
        FeatureLayer,
        dom,
        domConstruct,
        esriConfig,
        LayerList,
        InfoTemplate,
        HomeButton,
        LocateButton,
        Search,
        arcgisUtils,
        Print, PrintTemplate,
        PrintTask,
        PrintParameters,
        GeometryService,
        on,
        SimpleLineSymbol,
        SimpleFillSymbol,
        Color,
        QueryTask,
        Query,
        dojoQuery,
        registry,
        parser,
        arrayUtils,
        CheckBox
      ) {

        parser.parse();

        var legendLayers = [];

        esriConfig.defaults.io.proxyUrl = "proxy.ashx";
        esriConfig.defaults.io.alwaysUseProxy = false;

        map = new Map("map", {
          showAttribution: false,
          logo: false,
          //            extent: startExtent,
          sliderOrientation: "horizontal"
        });
        var tiled = new Tiled("http://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer");
        //map.addLayer(tiled);

        //**********************Deaclaring  All DynamicLayer*********************// 

        var health = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
          visible: false
        });

        var Imagery = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services//MyMapServiceim/MyMapServiceim2/MapServer", {
          visible: false
        });

        //var Delhipolice = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Delhipolice/MapServer", {
        //    visible: false
        //});

        //var Firestation = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/FireStationFeatureEdit", {
        //    visible: false
        //});

        //var Revenue = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
        //    visible: false
        //});


        //**********************Deaclaring  All FeatureLayer*********************//  

        //******************Legend*********************************


        map.on("layers-add-result", function(evt) {
          var layerInfo = arrayUtils.map(evt.layers, function(layer, index) {
            return {
              layer: layer.layer,
              title: layer.layer.name
            };
          });
          if (layerInfo.length > 0) {
            var legendDijit = new Legend({
              map: map,
              layerInfos: layerInfo
            }, "legendDiv");
            legendDijit.startup();
          }
        });

        //https://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer?f=json&callback=dojo.io...
        //**********************Adding All Layer*********************

        map.addLayers([tiled, health, Imagery]);


        //**********************Adding LayerList*********************

        var list = new LayerList({
          map: map,
          layers: [{
            layer: Imagery,
            visibility: false,
            showOpacitySlider: true,
            id: "Imagery",
            sublayers: true
          }, {
            layer: health,
            visibility: false,
            showLegend: true,
            showOpacitySlider: true,
            sublayers: true,
            id: "Revenu"
          }]
        }, "LayerLists");
        list.startup();
        //********************  //Add Home Button\\********************
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        //********************  // Add LocateButton\\********************

        geoLocate = new LocateButton({
          map: map
        }, "LocateButton");
        geoLocate.startup();


        //********************  //this enables the search widget to display as a single button\\********************

        var s = new Search({
          enableButtonMode: true,
          enableLabel: false,
          enableInfoWindow: true,
          showInfoWindowOnSelect: false,
          map: map
        }, "search");
        s.startup();

        var scalebar = new Scalebar({
          map: map,
          scalebarUnit: "dual"
        });
        // declare geometry service
        esriConfig.defaults.geometryService = new GeometryService("https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/Geometry/GeometryServer");

        // begin print Task
        app.printUrl = "https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Ma...";



        // end of print task

        // Activates printer
        on(dom.byId("btnPrintReady"), "click", function() {
          document.getElementById("btnPrintReady").innerHTML = "Printing..."
          document.getElementById("btnPrintReady").disabled = true;
          var printObj = createPrintTask(document.getElementById("printTitleId").value);
          var printTask = printObj.printTask;
          printTask.execute(printObj.params, function(evt) {
            document.getElementById("btnPrintReady").style.display = 'none';
            document.getElementById("printResult").href = evt.url;
            document.getElementById("printResult").style.display = 'block';
            on(dom.byId("printResult"), "click", function() {
              document.getElementById("btnPrintReady").innerHTML = "Print";
              document.getElementById("btnPrintReady").style.display = 'block';
              document.getElementById("btnPrintReady").disabled = false;
              document.getElementById("printResult").style.display = 'none';
            });
          }, function(evt) {
            document.getElementById("btnPrintReady").disabled = false;
            document.getElementById("btnPrintReady").innerHTML = "Print";
          });
        });

        // Hides print widget
        on(dom.byId("closePrint"), "click", function() {
          document.getElementById("feedback").style.visibility = 'hidden';
        });

        // Shows tools
        on(dom.byId("showTools"), "click", function() {
          document.getElementById("showToolsButton").style.visibility = 'hidden';
          document.getElementById("hideToolsButton").style.visibility = 'visible';
          document.getElementById("printer").style.visibility = 'visible';
        });

        // Hide tools
        on(dom.byId("hideTools"), "click", function() {
          document.getElementById("showToolsButton").style.visibility = 'visible';
          document.getElementById("hideToolsButton").style.visibility = 'hidden';
          document.getElementById("printer").style.visibility = 'hidden';
          document.getElementById("feedback").style.visibility = 'hidden';
        });

        // Show print widget
        on(dom.byId("showPrintWidget"), "click", function() {
          document.getElementById("feedback").style.visibility = 'visible';
        });
      
        on(dom.byId("findBtn"), "click", function() {
          var Villname = document.getElementById("addnum").value;
          var Khasra = document.getElementById("addnum").value;
          AddressSearchTask(Villname, Khasra);
        });


        function AddressSearchTask(Villname, Khasra) {
          queryTask = new QueryTask("http://220.156.189.140:6080/arcgis/rest/services/Revenue/Revenue_Samaspur/MapServer/0");
          query = new Query();
          query.returnGeometry = true;
          query.outFields = ["VILL_NM", "M_KHASRA_N"];
          query.where = "VillageName = '" + Villname + "' AND Khasra_No LIKE '%" + Khasra + "%'";

          queryTask.execute(query, featureZoom);
        }

        function featureZoom(feature) {
          map.graphics.clear();
          ftype = feature.geometry.type;
          //console.log(result);
          if (ftype == "point") {
            var pt = feature.geometry;
            var factor = 1; //some factor for converting point to extent
            var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
            map.setExtent(extent.expand(60));
            showFeature(feature);
          } else {
            var fExtent = feature.geometry.getExtent().expand(3);
            map.setExtent(fExtent);
            showFeature(feature);
          }
        }

        function showFeature(feature) {
          map.graphics.clear();
          ftype = feature.geometry.type;
          if (ftype == "point") {
            feature.setSymbol(psymbol)
            setTimeout(function() {
              map.graphics.clear()
            }, 3000);
          } else {
            feature.setSymbol(symbol);
            setTimeout(function() {
              map.graphics.clear()
            }, 3000);
          }
          map.graphics.add(feature);
        }

        function createPrintTask(printTitle) {
          var template = new PrintTemplate();
          template.layout = document.getElementById("printLayoutId").value;
          template.label = "Landscape (PDF)";
          template.format = document.getElementById("printFormatId").value;
          template.layoutOptions = {
            legendLayers: [], // empty array means no legend
            scalebarUnit: "Miles",
            titleText: printTitle
          };

          var params = new PrintParameters();
          params.map = map;
          params.template = template;

          var printTask = new PrintTask(app.printUrl);
          var printObj = {
            printTask: printTask,
            params: params
          }
          return printObj;
        }


        //************End of Script******************************//
      });
  </script>

</head>

<body class="soria">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <center>GeoSpatial Delhi Limiled..<small>(A Govt. of Delhi Company)</small></center>
    </div>
    <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props=" region:'left',duration:100, title:'Options',startExpanded:true, maxWidth:'300px', easeIn:'easing.linear', easeOut:'easing.linear'" style="width: 380px;">
      <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit/layout/AccordionContainer">

          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
            <div id="legendDiv"></div>
          </div>

          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layer List'">
            <div id="LayerLists"></div>
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search By Address'">
            Enter Village Name
            <input type="text" id="addnum" placeholder="VillageName" /><br> Entner Khashra Number
            <input type="text" id="addname" placeholder="Khashra No" /><br>
            <input type="Submit" value="FindLocation" id="findBtn" />
          </div>

        </div>
      </div>
    </div>

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="LocateButton">location</div>
      <div id="HomeButton">home</div>
      <div id="search">search </div>

      <div id="showTools">
        <input type="image" id="showToolsButton" src="show.png" alt="Show Tools" title="Show Tools" />
      </div>
      <div id="hideTools">
        <input type="image" id="hideToolsButton" src="hide.png" alt="Hide Tools" title="Hide Tools" />
      </div>
      <div id="printer">
        <input type="image" id="showPrintWidget" src="print.png" alt="Print" title="Print" />
      </div>
      <form id="frmPrint" action="" onsubmit="return false;">
        <div id="feedback">

          <div id="information">
            <div id="note">
              <label id="lblPrintTitle">Enter a print title</label>
              <br />
              <input type="text" id="printTitleId" name="printTitle" value="NDMC MAP" />
              <br />
              <br />
              <select name="printLayout" id="printLayoutId">
                                <option value="A3 Landscape">A3 Landscape</option>
                                <option value="A3 Portrait">A3 Portrait</option>
                                <option value="A4 Landscape">A4 Landscape</option>
                                <option value="A4 Portrait">A4 Portrait</option>
                                <option value="Letter ANSI A Landscape" selected>Letter ANSI A Landscape</option>
                                <option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>
                                <option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>
                                <option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>
                            </select>
              <select name="printFormat" id="printFormatId">
                                <option value="pdf" selected>PDF</option>
                                <option value="png32">PNG32</option>
                                <option value="png8">PNG8</option>
                                <option value="jpg">JPG</option>
                                <option value="gif">GIF</option>

                            </select>
              <br />
              <br /> <input type="image" id="btnPrintReady" src="print.png" alt="Print" title="Print" />

              <a href="#" id="printResult" target="_blank" style="display:none;"><img src="prt.png"></a>
              <div id="info">
                <input type="image" id="closePrint" src="cloge.png" alt="Close" title="Close" value="Close" />
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
      <center>All Rights Reserved by GeoSpatial Delhi Limited (A Govt. of Delhi Company) </center>
    </div>
  </div>
</body>

</html>

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Emeritus

Anuj,

   What is the error you are getting in your browsers web console?

0 Kudos
AnujKumar5
New Contributor II

Uncaught ReferenceError: rotatetit is not defined
at Object.onClick (eval at f (init.js:434), <anonymous>:1:50)
at HTMLDivElement.<anonymous> (init.js:63)

Uncaught ReferenceError: rotatetit is not defined
at Object.onClick (eval at f (init.js:434), <anonymous>:1:50)
at HTMLDivElement.<anonymous> (init.js:63

Uncaught ReferenceError: rotatetit is not defined
at Object.onClick (eval at f (init.js:434), <anonymous>:1:50)
at HTMLDivElement.<anonymous> (init.js:63)

Uncaught ReferenceError: QueryTask is not defined
at AddressSearch (Map.js:331)
at HTMLInputElement.onclick (index.html:157)

Uncaught ReferenceError: rotatetit is not defined
at Object.onClick (eval at f (init.js:434), <anonymous>:1:50)
at HTMLDivElement.<anonymous> (init.js:63)

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Anuj,

   So what in your js code or html code is "rotatetit"?

0 Kudos
AnujKumar5
New Contributor II

i don't know, am beginner in arcgis javascript  

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Anuj,

   You should zip and attach your whole app for me to look at then.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Anuj,

   This is the best I could do to clean up your (which was a mess) and fix your issue:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">

  <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/soria/soria.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">

  <script src="http://js.arcgis.com/3.18/"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <style type="text/css">
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      color: Gray;
    }
    
    body {
      background-color: #d3d3d3;
      overflow: hidden;
      height: 100%;
      width: 100%;
      font-family: "Trebuchet MS";
    }
    
    #header {
      background-image: url(../images/banner.jpg);
      background-repeat: repeat-x;
      margin: 2px;
      border: solid 4px #224a54;
      color: white;
      font-size: 18pt;
      text-align: left;
      font-weight: bold;
      height: 80px;
      font-family: "Comic sans MS", Times, serif;
    }
    
    #subheader {
      font-size: small;
      color: white;
      padding-left: 2px;
    }
    
    #search {
      position: absolute;
      top: 2px;
      right: 120px;
      z-index: 50;
    }
    
    #LocateButton {
      position: absolute;
      top: 2px;
      right: 50px;
      z-index: 53;
    }
    
    #HomeButton {
      position: absolute;
      top: 2px;
      right: 86px;
      z-index: 50;
    }
    
    #leftPane {
      margin: 5px;
      padding: 2px;
      background-color: skyblue;
      color: black;
      border: solid 2px #224a54;
      width: 20%;
    }
    
    #map {
      margin: 5px;
      border: solid 4px #654d7f;
      -moz-border-radius: 4px;
      color: Gray;
      height: 100%;
    }
    
    #footer {
      margin: 2px;
      border: solid 2px #224a54;
      background-color: #feabc5;
      color: #3f3f3f;
      font-size: 10pt;
      text-align: center;
      height: 40px;
    }
    
    .dijitTabInnerDiv {
      background-color: blue;
    }
    
    #tabs {
      padding: 10px;
    }
    
    #legendPane {
      border: solid 2px #97DCF2 11px;
    }
    
    #layerListPane {
      width: 20%;
    }
    
    .esriLayer {
      background-color: #4c8eef;
    }
    
    .esriLayerList .esriList {
      border: solid 4px;
    }
    
    .esriLayerList .esriTitle {
      border-bottom: solid 2px rgb(2, 241, 8);
      color: white;
    }
    
    .container {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      margin: 12%;
      font-family: "Open Sans";
    }
    
    #marquee {
      color: White;
      border: solid 2px;
    }
    
    div.dms {
      display: none;
    }
    
    div.latlog {
      display: none;
    }
    
    #result {
      padding: 12px;
      background-color: #ad87eb;
      border-radius: 8px;
      color: rgb(114, 219, 2);
      font-weight: 800;
      cursor: pointer;
    }
    
    #searchpan {
      border: 2px solid black;
      padding: 2px;
      background-color: #4c8eef;
      color: #fff;
    }

  </style>

  <title> by Anujkumarshukla</title>


  <script type='text/javascript'>
    var map;
    var app = {};
    var queryTask, query;

    require([
        "esri/map",
        "esri/dijit/Legend",
        "esri/dijit/Scalebar",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
        "dojo/dom",
        "dojo/dom-construct",
        "esri/config",
        "esri/dijit/LayerList",
        "esri/InfoTemplate",
        "esri/dijit/HomeButton",
        "esri/dijit/LocateButton",
        "esri/dijit/Search",
        "esri/arcgis/utils",
        "esri/dijit/Print",
        "esri/tasks/PrintTemplate",
        "esri/tasks/PrintTask",
        "esri/tasks/PrintParameters",
        "esri/tasks/GeometryService",
        "dojo/on",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "dojo/query",
        "dijit/registry",

        "dojo/parser",
        "dojo/_base/array",
        "dijit/form/CheckBox",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer", "esri/dijit/Scalebar",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function(
        Map,
        Legend, Scalebar,
        ArcGISDynamicMapServiceLayer,
        Tiled,
        FeatureLayer,
        dom,
        domConstruct,
        esriConfig,
        LayerList,
        InfoTemplate,
        HomeButton,
        LocateButton,
        Search,
        arcgisUtils,
        Print, PrintTemplate,
        PrintTask,
        PrintParameters,
        GeometryService,
        on,
        SimpleLineSymbol,
        SimpleFillSymbol,
        Color,
        QueryTask,
        Query,
        dojoQuery,
        registry,
        parser,
        arrayUtils,
        CheckBox
      ) {

        parser.parse();

        var legendLayers = [];

        esriConfig.defaults.io.proxyUrl = "proxy.ashx";
        esriConfig.defaults.io.alwaysUseProxy = false;

        map = new Map("map", {
          showAttribution: false,
          logo: false,
          //            extent: startExtent,
          sliderOrientation: "horizontal"
        });
        var tiled = new Tiled("http://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer");
        //map.addLayer(tiled);

        //**********************Deaclaring  All DynamicLayer*********************// 

        var health = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
          visible: false
        });

        var Imagery = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services//MyMapServiceim/MyMapServiceim2/MapServer", {
          visible: false
        });

        //var Delhipolice = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Delhipolice/MapServer", {
        //    visible: false
        //});

        //var Firestation = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/FireStationFeatureEdit", {
        //    visible: false
        //});

        //var Revenue = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/Revenue/RevenueDepartment_201507151646/MapServer", {
        //    visible: false
        //});


        //**********************Deaclaring  All FeatureLayer*********************//  

        //******************Legend*********************************


        map.on("layers-add-result", function(evt) {
          var layerInfo = arrayUtils.map(evt.layers, function(layer, index) {
            return {
              layer: layer.layer,
              title: layer.layer.name
            };
          });
          if (layerInfo.length > 0) {
            var legendDijit = new Legend({
              map: map,
              layerInfos: layerInfo
            }, "legendDiv");
            legendDijit.startup();
          }
        });

        //https://gis.gsdl.org.in:6443/arcgis/rest/services/DSSDI_Server_New/MapServer?f=json&callback=dojo.io...
        //**********************Adding All Layer*********************

        map.addLayers([tiled, health, Imagery]);


        //**********************Adding LayerList*********************

        var list = new LayerList({
          map: map,
          layers: [{
            layer: Imagery,
            visibility: false,
            showOpacitySlider: true,
            id: "Imagery",
            sublayers: true
          }, {
            layer: health,
            visibility: false,
            showLegend: true,
            showOpacitySlider: true,
            sublayers: true,
            id: "Revenu"
          }]
        }, "LayerLists");
        list.startup();
        //********************  //Add Home Button\\********************
        var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();

        //********************  // Add LocateButton\\********************

        geoLocate = new LocateButton({
          map: map
        }, "LocateButton");
        geoLocate.startup();


        //********************  //this enables the search widget to display as a single button\\********************

        var s = new Search({
          enableButtonMode: true,
          enableLabel: false,
          enableInfoWindow: true,
          showInfoWindowOnSelect: false,
          map: map
        }, "search");
        s.startup();

        var scalebar = new Scalebar({
          map: map,
          scalebarUnit: "dual"
        });
        // declare geometry service
        esriConfig.defaults.geometryService = new GeometryService("https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/Geometry/GeometryServer");

        // begin print Task
        app.printUrl = "https://gis.gsdl.org.in:6443/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Ma...";



        // end of print task

        // Activates printer
        on(dom.byId("btnPrintReady"), "click", function() {
          document.getElementById("btnPrintReady").innerHTML = "Printing..."
          document.getElementById("btnPrintReady").disabled = true;
          var printObj = createPrintTask(document.getElementById("printTitleId").value);
          var printTask = printObj.printTask;
          printTask.execute(printObj.params, function(evt) {
            document.getElementById("btnPrintReady").style.display = 'none';
            document.getElementById("printResult").href = evt.url;
            document.getElementById("printResult").style.display = 'block';
            on(dom.byId("printResult"), "click", function() {
              document.getElementById("btnPrintReady").innerHTML = "Print";
              document.getElementById("btnPrintReady").style.display = 'block';
              document.getElementById("btnPrintReady").disabled = false;
              document.getElementById("printResult").style.display = 'none';
            });
          }, function(evt) {
            document.getElementById("btnPrintReady").disabled = false;
            document.getElementById("btnPrintReady").innerHTML = "Print";
          });
        });

        // Hides print widget
        on(dom.byId("closePrint"), "click", function() {
          document.getElementById("feedback").style.visibility = 'hidden';
        });

        // Shows tools
        on(dom.byId("showTools"), "click", function() {
          document.getElementById("showToolsButton").style.visibility = 'hidden';
          document.getElementById("hideToolsButton").style.visibility = 'visible';
          document.getElementById("printer").style.visibility = 'visible';
        });

        // Hide tools
        on(dom.byId("hideTools"), "click", function() {
          document.getElementById("showToolsButton").style.visibility = 'visible';
          document.getElementById("hideToolsButton").style.visibility = 'hidden';
          document.getElementById("printer").style.visibility = 'hidden';
          document.getElementById("feedback").style.visibility = 'hidden';
        });

        // Show print widget
        on(dom.byId("showPrintWidget"), "click", function() {
          document.getElementById("feedback").style.visibility = 'visible';
        });
      
        on(dom.byId("findBtn"), "click", function() {
          var Villname = document.getElementById("addnum").value;
          var Khasra = document.getElementById("addnum").value;
          AddressSearchTask(Villname, Khasra);
        });


        function AddressSearchTask(Villname, Khasra) {
          queryTask = new QueryTask("http://220.156.189.140:6080/arcgis/rest/services/Revenue/Revenue_Samaspur/MapServer/0");
          query = new Query();
          query.returnGeometry = true;
          query.outFields = ["VILL_NM", "M_KHASRA_N"];
          query.where = "VillageName = '" + Villname + "' AND Khasra_No LIKE '%" + Khasra + "%'";

          queryTask.execute(query, featureZoom);
        }

        function featureZoom(feature) {
          map.graphics.clear();
          ftype = feature.geometry.type;
          //console.log(result);
          if (ftype == "point") {
            var pt = feature.geometry;
            var factor = 1; //some factor for converting point to extent
            var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
            map.setExtent(extent.expand(60));
            showFeature(feature);
          } else {
            var fExtent = feature.geometry.getExtent().expand(3);
            map.setExtent(fExtent);
            showFeature(feature);
          }
        }

        function showFeature(feature) {
          map.graphics.clear();
          ftype = feature.geometry.type;
          if (ftype == "point") {
            feature.setSymbol(psymbol)
            setTimeout(function() {
              map.graphics.clear()
            }, 3000);
          } else {
            feature.setSymbol(symbol);
            setTimeout(function() {
              map.graphics.clear()
            }, 3000);
          }
          map.graphics.add(feature);
        }

        function createPrintTask(printTitle) {
          var template = new PrintTemplate();
          template.layout = document.getElementById("printLayoutId").value;
          template.label = "Landscape (PDF)";
          template.format = document.getElementById("printFormatId").value;
          template.layoutOptions = {
            legendLayers: [], // empty array means no legend
            scalebarUnit: "Miles",
            titleText: printTitle
          };

          var params = new PrintParameters();
          params.map = map;
          params.template = template;

          var printTask = new PrintTask(app.printUrl);
          var printObj = {
            printTask: printTask,
            params: params
          }
          return printObj;
        }


        //************End of Script******************************//
      });
  </script>

</head>

<body class="soria">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <center>GeoSpatial Delhi Limiled..<small>(A Govt. of Delhi Company)</small></center>
    </div>
    <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props=" region:'left',duration:100, title:'Options',startExpanded:true, maxWidth:'300px', easeIn:'easing.linear', easeOut:'easing.linear'" style="width: 380px;">
      <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit/layout/AccordionContainer">

          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
            <div id="legendDiv"></div>
          </div>

          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Layer List'">
            <div id="LayerLists"></div>
          </div>
          <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search By Address'">
            Enter Village Name
            <input type="text" id="addnum" placeholder="VillageName" /><br> Entner Khashra Number
            <input type="text" id="addname" placeholder="Khashra No" /><br>
            <input type="Submit" value="FindLocation" id="findBtn" />
          </div>

        </div>
      </div>
    </div>

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="LocateButton">location</div>
      <div id="HomeButton">home</div>
      <div id="search">search </div>

      <div id="showTools">
        <input type="image" id="showToolsButton" src="show.png" alt="Show Tools" title="Show Tools" />
      </div>
      <div id="hideTools">
        <input type="image" id="hideToolsButton" src="hide.png" alt="Hide Tools" title="Hide Tools" />
      </div>
      <div id="printer">
        <input type="image" id="showPrintWidget" src="print.png" alt="Print" title="Print" />
      </div>
      <form id="frmPrint" action="" onsubmit="return false;">
        <div id="feedback">

          <div id="information">
            <div id="note">
              <label id="lblPrintTitle">Enter a print title</label>
              <br />
              <input type="text" id="printTitleId" name="printTitle" value="NDMC MAP" />
              <br />
              <br />
              <select name="printLayout" id="printLayoutId">
                                <option value="A3 Landscape">A3 Landscape</option>
                                <option value="A3 Portrait">A3 Portrait</option>
                                <option value="A4 Landscape">A4 Landscape</option>
                                <option value="A4 Portrait">A4 Portrait</option>
                                <option value="Letter ANSI A Landscape" selected>Letter ANSI A Landscape</option>
                                <option value="Letter ANSI A Portrait">Letter ANSI A Portrait</option>
                                <option value="Tabloid ANSI B Landscape">Tabloid ANSI B Landscape</option>
                                <option value="Tabloid ANSI B Portrait">Tabloid ANSI B Portrait</option>
                            </select>
              <select name="printFormat" id="printFormatId">
                                <option value="pdf" selected>PDF</option>
                                <option value="png32">PNG32</option>
                                <option value="png8">PNG8</option>
                                <option value="jpg">JPG</option>
                                <option value="gif">GIF</option>

                            </select>
              <br />
              <br /> <input type="image" id="btnPrintReady" src="print.png" alt="Print" title="Print" />

              <a href="#" id="printResult" target="_blank" style="display:none;"><img src="prt.png"></a>
              <div id="info">
                <input type="image" id="closePrint" src="cloge.png" alt="Close" title="Close" value="Close" />
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
      <center>All Rights Reserved by GeoSpatial Delhi Limited (A Govt. of Delhi Company) </center>
    </div>
  </div>
</body>

</html>
AnujKumar5
New Contributor II

Robert , 

Thanks for your support, Query task issue solved but still am trouble with zoom to feature .

function featureZoom(feature) {
          map.graphics.clear();
          ftype = feature.geometry.type;
          //console.log(result);
          if (ftype == "point") {
            var pt = feature.geometry;
            var factor = 1; //some factor for converting point to extent
            var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
            map.setExtent(extent.expand(60));
            showFeature(feature);
          } else {
            var fExtent = feature.geometry.getExtent().expand(3);
            map.setExtent(fExtent);
            showFeature(feature);
          }
        }

it's not working ...!

0 Kudos
FC_Basson
MVP Regular Contributor

Your expand factor is too large (60) - see Extent | API Reference | ArcGIS API for JavaScript 3.20