<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Layer in a map service - [ON-DEMAND]</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/Grid.css"/> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/ClaroGrid.css"/> <script type="text/javascript">djConfig = { parseOnLoad:true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.toolbars.navigation"); dojo.require("dijit.Toolbar"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.tasks.query"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); var selectionToolbar, grid,featureLayer,navToolbar; function init() { var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true }); dojo.connect(map, "onLoad", initSelectToolbar); var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(baseMapLayer); var fieldsSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5])); fieldsSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2)); var content = "<b>Status</b>: ${STATUS}" + "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" + "<br><b>Total Acres</b>: ${APPROXACRE}" + "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] }); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); featureLayer.setSelectionSymbol(fieldsSelectionSymbol); dojo.connect(featureLayer, "onSelectionComplete", findFeatures); dojo.connect(featureLayer, "onSelectionClear", function(features) { //dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>"; }); navToolbar = new esri.toolbars.Navigation(map); dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); map.addLayer(featureLayer); } function initSelectToolbar(map) { selectionToolbar = new esri.toolbars.Draw(map); var selectQuery = new esri.tasks.Query(); dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) { selectionToolbar.deactivate(); selectQuery.geometry = geometry; featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW); }); } function extentHistoryChangeHandler() { dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent(); dijit.byId("zoomnext").disabled = navToolbar.isLastExtent(); } function findFeatures(features) { var relatedQuery = new esri.tasks.RelationshipQuery(); var queryIds = dojo.map(features, function (rec) { return rec.attributes.OBJECTID }); relatedQuery.outFields = ["*"]; relatedQuery.relationshipId = 0; relatedQuery.objectIds = [queryIds]; featureLayer.queryRelatedFeatures(relatedQuery, function (relatedRecords) { var fset = relatedRecords[queryIds]; var items = dojo.map(fset.features, function (feature) { return feature.attributes; }); var data = { identifier: "OBJECTID", label: "OBJECTID", items: items }; store = new dojo.data.ItemFileReadStore({ data: data }); grid.setStore(store); grid.setQuery({ OBJECTID: '*' }); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:600px; height:700px;"> <div dojotype="dijit.layout.ContentPane" region="top"> <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button> <button id="zoomprev" dojoType="dijit.form.Button" onclick="navToolbar.zoomToPrevExtent();">Prev</button> <button id="zoomnext" dojoType="dijit.form.Button" onclick="navToolbar.zoomToNextExtent();">Next</button> </div> <div id="map" region="center" dojotype="dijit.layout.ContentPane" style="border:1px solid #000;"></div> <div dojotype="dijit.layout.ContentPane" region="bottom" style="height:150px; width:100%;"> <div> </div> <span id="messages"></span> <div> <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowSelector="20px" selectionMode="none" style="height:300px; width:600px"> <thead> <tr> <th field="OBJECTID" width="100px">ID</th> <th field="STATUS" width="100px">Status</th> <th field="CUMM_GAS" width="150px">Total GAS</th> <th field="APPROXACRE" Width="150px">Total Acre</th> </tr> </thead> </table> </div> </div> </div> </body> </html>
Solved! Go to Solution.