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******************************//
});
Solved! Go to Solution.
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>
Anuj,
What is the error you are getting in your browsers web console?
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)
Anuj,
So what in your js code or html code is "rotatetit"?
i don't know, am beginner in arcgis javascript
Anuj,
You should zip and attach your whole app for me to look at then.
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>
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 ...!
Your expand factor is too large (60) - see Extent | API Reference | ArcGIS API for JavaScript 3.20