JavaScript Code:
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/dom",
"dojo/dom-construct",
"esri/config",
"dojo/on",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dojo/query",
"dijit/registry",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dojo/domReady!"
], function(
Map,
ArcGISDynamicMapServiceLayer,
Tiled,
FeatureLayer,
Legend,
dom,
domConstruct,
esriConfig,
arrayUtils,
on,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
QueryTask,
Query,
dojoQuery,
registry,
parser
) {
parser.parse();
map = new Map("map", {
logo: false,
// extent: startExtent,
sliderOrientation: "horizontal"
});
var tiled = new ArcGISDynamicMapServiceLayer("http://220.156.189.140:6080/arcgis/rest/services/DSSDI_ServerCache/MapServer");
//map.addLayer();
var rivers = new FeatureLayer("http://220.156.189.140:6080/arcgis/rest/services/Delhi_police/Elect_Pole/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
//add the 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();
// }
//});
map.addLayers([tiled, rivers]);
on(dom.byId("findBtn"), "click", function () {
var roadname = document.getElementById("roadlist").value;
AddressSearchTask(roadname);
});
function AddressSearchTask(roadname) {
alert("");
queryTask = new QueryTask("http://220.156.189.140:6080/arcgis/rest/services/Delhi_police/Elect_Pole/FeatureServer/0");
query = new Query();
query.returnGeometry = true;
query.outFields = ["road_nm"];
query.where = "road_nm = '" + roadname + "' ";
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);
}
});
</script>
Html Code:
<div id="content"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true"
style="width: 100%; height: 100%; position:absolute; top:753px; border:3px #0d1c57; margin: 0;">
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<%-- <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>--%>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'Pane 2'"><center>
<asp:DropDownList ID="roadlist" runat="server" DataTextField="road_nm" DataValueField="road_nm" Height="30px" Width="250px" BackColor="#3399FF" Font-Bold="True" Font-Size="Medium" ForeColor="White" AutoPostBack="false"></asp:DropDownList>
<br />
<input id="findBtn" type="button" value="button" />
<%-- <asp:Button ID="getinfo" runat="server" Text="getvalue" OnClick="getinfo_Click"></asp:Button>--%>
</center>
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;">
</div>
</div>
