Solved! Go to Solution.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" > <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Identify Sample</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true }</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } #header { background-color:#ecefe4;color:#3f3f3f; background-repeat: repeat-x; opacity: 0.45; margin: 4px; border: solid 2px #224a54; color:black; font-size:14pt; text-align:center; font-weight:bold; height:40px; } #rightPane{ background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #leftPane{ margin: 5px; padding:2px; background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:25%; } #map { margin: 5px; border:solid 4px #224a54; -moz-border-radius: 4px; } #footer { margin: 4px; border: solid 2px #224a54; background-color:#ecefe4;color:#3f3f3f; font-size:10pt; text-align:center; height:20px; } .dijitTabInnerDiv{ background-color:#ecefe4; } #tabs{ padding:5px; } </style> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.tasks.identify"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.TitlePane"); dojo.require("dijit.form.Button"); dojo.require("esri.dijit.Legend"); var map, identifyTask, identifyParams, symbol; var landsResults, riversResutls; function init() { var initExtent = new esri.geometry.Extent({ "xmin": -9362088.17, "ymin": 4131154.09, "xmax": -8319687.25, "ymax": 5032777.16, "spatialReference":{"wkid":102100} }); map = new esri.Map("mapDiv",{extent:initExtent}); dojo.connect(map, "onLoad", initFunctionality); //resize the map when the browser resizes //dojo.connect(dijit.byId('map'), 'resize', map,map.resize); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap); var vop = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/vop/MapServer", { id: 'vop', opacity: 0.45 }); var lwcf = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/lwcf/MapServer", { id: 'lwcf', opacity: 0.8 }); var jurisdictions = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/jurisdictions/MapServer", { id: 'jurisdictions', opacity: 0.5 }); //start legend dojo.connect(map,'onLayersAddResult',function(results){ var layerInfo = dojo.map(results, function(layer,index){ return {layer:layer.layer,title:layer.layer.name}; }); if(layerInfo.length > 0){ var legendDijit = new esri.dijit.Legend({ map:map, layerInfos:[ {layer:jurisdictions,title:" "}, {layer:lwcf,title:" "}, {layer:vop,title:"Recreational Resources"} ], arrangement:esri.dijit.Legend.ALIGN_LEFT },"legendDiv"); legendDijit.startup(); } }); map.addLayers([jurisdictions,vop,lwcf]); } function initFunctionality(map) { //resize map when browser size changes dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize); dojo.connect(map, "onClick", doIdentify); identifyTask = new esri.tasks.IdentifyTask("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/vop/MapServer"); identifyParams = new esri.tasks.IdentifyParameters(); identifyParams.tolerance = 3; identifyParams.returnGeometry = true; identifyParams.layerIds = [6,8]; identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE; identifyParams.width = map.width; identifyParams.height = map.height; map.infoWindow.resize(415, 200); symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); } function doIdentify(evt) { map.graphics.clear(); identifyParams.geometry = evt.mapPoint; identifyParams.mapExtent = map.extent; identifyTask.execute(identifyParams, function(idResults) { addToMap(idResults, evt); }); } function addToMap(idResults, evt) { landsResults = {displayFieldName:null,features:[]}; riversResults = {displayFieldName:null,features:[]}; for (var i=0, il=idResults.length; i<il; i++) { var idResult = idResults; if (idResult.layerId === 8) { if (!landsResults.displayFieldName) { landsResults.displayFieldName =idResult.displayFieldName }; landsResults.features.push(idResult.feature); } else if (idResult.layerId === 6) { if (!riversResults.displayFieldName) { riversResults.displayFieldName = idResult.displayFieldName }; riversResults.features.push(idResult.feature); } } var landContent = layerTabContent(landsResults,"landsResults"); var riverContent = layerTabContent(riversResults,"riversResults"); var tc = new dijit.layout.TabContainer({ style:"width:385px;height:150px;", },dojo.create("div")); var river_panel = new dijit.layout.ContentPane({ title:"Scenic Rivers", content:riverContent }); tc.addChild(river_panel); var landTab = new dijit.layout.ContentPane({ title: "Conservation Lands", content:landContent }); tc.addChild(landTab); map.infoWindow.setContent(tc.domNode); tc.startup(); map.infoWindow.setTitle("Identify Results"); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); tc.resize(); } function layerTabContent(layerResults, layerName) { var content = ""; if(layerName === "landsResults"){ if(layerResults.features.length > 0){ content = "<i>Conservation Lands returned: " + layerResults.features.length + "</i>"; content += "<table border='1'><tr><th>Label</th><th>Land Type</th><th>Manager</th></tr>"; for (var i=0, il=layerResults.features.length; i<il; i++) { content+="<tr><td>"+layerResults.features.attributes['LABEL']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features.attributes['MATYPE']+"</td>"; content+="<td>"+layerResults.features.attributes['MAAGENCY']+"</td>"; } content+="</tr></table>"; }else{ content = "No results found for Conservation Lands"; } } if(layerName === "riversResults"){ if(layerResults.features.length > 0){ content = "<i>Scenic Rivers returned: " + layerResults.features.length +"</i>"; content += "<table border='1'><tr><th>Name</th><th>Status</th><th>Description</th></tr>"; for (var i=0, il=layerResults.features.length; i<il; i++) { content+="<tr><td>"+layerResults.features.attributes['NAME']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i +"]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features.attributes['STATUS']+"</td>"; content+="<td>"+layerResults.features.attributes['DESCRIPTIO']+"</td>"; } content+="</tr></table>"; }else{ content = "No results found for Scenic Rivers"; } } return content; } function showFeature(feature) { map.graphics.clear(); feature.setSymbol(symbol); map.graphics.add(feature); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"> Virginia Outdoors Plan Interactive Map </div> <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"> <div dojotype="dijit.layout.TabContainer" > <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojotype="dijit.layout.ContentPane" title="Layers" > Layers on/off:<br /><span id="layer_list"></span><br /> </div> <div dojotype="dijit.layout.ContentPane" title="Info" > Information about the mapping site:<br /><span id="layer_list"></span><br /> </div> </div> </div> <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" > Virginia Department of Conservation and Recreation </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" > <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Identify Sample</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true }</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; } body{ background-color:white; overflow:hidden; font-family: "Trebuchet MS"; } #header { background-color:#ecefe4;color:#3f3f3f; background-repeat: repeat-x; opacity: 0.45; margin: 4px; border: solid 2px #224a54; color:black; font-size:14pt; text-align:center; font-weight:bold; height:40px; } #rightPane{ background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:20%; } #leftPane{ margin: 5px; padding:2px; background-color:white; color:#3f3f3f; border: solid 2px #224a54; width:25%; } #map { margin: 5px; border:solid 4px #224a54; -moz-border-radius: 4px; } #footer { margin: 4px; border: solid 2px #224a54; background-color:#ecefe4;color:#3f3f3f; font-size:10pt; text-align:center; height:20px; } .dijitTabInnerDiv{ background-color:#ecefe4; } #tabs{ padding:5px; } </style> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.tasks.identify"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.TitlePane"); dojo.require("dijit.form.Button"); dojo.require("esri.dijit.Legend"); var map, identifyTask, identifyParams, symbol; var landsResults, riversResutls; function init() { var initExtent = new esri.geometry.Extent({ "xmin": -9362088.17, "ymin": 4131154.09, "xmax": -8319687.25, "ymax": 5032777.16, "spatialReference":{"wkid":102100} }); map = new esri.Map("mapDiv",{extent:initExtent}); dojo.connect(map, "onLoad", initFunctionality); //resize the map when the browser resizes //dojo.connect(dijit.byId('map'), 'resize', map,map.resize); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap); var vop = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/vop/MapServer", { id: 'vop', opacity: 0.45 }); var lwcf = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/lwcf/MapServer", { id: 'lwcf', opacity: 0.8 }); var jurisdictions = new esri.layers.ArcGISDynamicMapServiceLayer("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/jurisdictions/MapServer", { id: 'jurisdictions', opacity: 0.5 }); //start legend dojo.connect(map,'onLayersAddResult',function(results){ var layerInfo = dojo.map(results, function(layer,index){ return {layer:layer.layer,title:layer.layer.name}; }); if(layerInfo.length > 0){ var legendDijit = new esri.dijit.Legend({ map:map, layerInfos:[ {layer:jurisdictions,title:" "}, {layer:lwcf,title:" "}, {layer:vop,title:"Recreational Resources"} ], arrangement:esri.dijit.Legend.ALIGN_LEFT },"legendDiv"); legendDijit.startup(); } }); map.addLayers([jurisdictions,vop,lwcf]); } function initFunctionality(map) { //resize map when browser size changes dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize); dojo.connect(map, "onClick", doIdentify); identifyTask = new esri.tasks.IdentifyTask("http://dswcapps.dcr.virginia.gov/ArcGIS/rest/services/dnh/vop/MapServer"); identifyParams = new esri.tasks.IdentifyParameters(); identifyParams.tolerance = 3; identifyParams.returnGeometry = true; identifyParams.layerIds = [6,8]; identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE; identifyParams.width = map.width; identifyParams.height = map.height; map.infoWindow.resize(415, 200); symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); } function doIdentify(evt) { map.graphics.clear(); identifyParams.geometry = evt.mapPoint; identifyParams.mapExtent = map.extent; identifyTask.execute(identifyParams, function(idResults) { addToMap(idResults, evt); }); } function addToMap(idResults, evt) { landsResults = {displayFieldName:null,features:[]}; riversResults = {displayFieldName:null,features:[]}; for (var i=0, il=idResults.length; i<il; i++) { var idResult = idResults; if (idResult.layerId === 8) { if (!landsResults.displayFieldName) { landsResults.displayFieldName =idResult.displayFieldName }; landsResults.features.push(idResult.feature); } else if (idResult.layerId === 6) { if (!riversResults.displayFieldName) { riversResults.displayFieldName = idResult.displayFieldName }; riversResults.features.push(idResult.feature); } } var landContent = layerTabContent(landsResults,"landsResults"); var riverContent = layerTabContent(riversResults,"riversResults"); var tc = new dijit.layout.TabContainer({ style:"width:385px;height:150px;", },dojo.create("div")); var river_panel = new dijit.layout.ContentPane({ title:"Scenic Rivers", content:riverContent }); tc.addChild(river_panel); var landTab = new dijit.layout.ContentPane({ title: "Conservation Lands", content:landContent }); tc.addChild(landTab); map.infoWindow.setContent(tc.domNode); tc.startup(); map.infoWindow.setTitle("Identify Results"); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); tc.resize(); } function layerTabContent(layerResults, layerName) { var content = ""; if(layerName === "landsResults"){ if(layerResults.features.length > 0){ content = "<i>Conservation Lands returned: " + layerResults.features.length + "</i>"; content += "<table border='1'><tr><th>Label</th><th>Land Type</th><th>Manager</th></tr>"; for (var i=0, il=layerResults.features.length; i<il; i++) { content+="<tr><td>"+layerResults.features.attributes['LABEL']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features.attributes['MATYPE']+"</td>"; content+="<td>"+layerResults.features.attributes['MAAGENCY']+"</td>"; } content+="</tr></table>"; }else{ content = "No results found for Conservation Lands"; } } if(layerName === "riversResults"){ if(layerResults.features.length > 0){ content = "<i>Scenic Rivers returned: " + layerResults.features.length +"</i>"; content += "<table border='1'><tr><th>Name</th><th>Status</th><th>Description</th></tr>"; for (var i=0, il=layerResults.features.length; i<il; i++) { content+="<tr><td>"+layerResults.features.attributes['NAME']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i +"]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features.attributes['STATUS']+"</td>"; content+="<td>"+layerResults.features.attributes['DESCRIPTIO']+"</td>"; } content+="</tr></table>"; }else{ content = "No results found for Scenic Rivers"; } } return content; } function showFeature(feature) { map.graphics.clear(); feature.setSymbol(symbol); map.graphics.add(feature); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"> Virginia Outdoors Plan Interactive Map </div> <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left"> <div dojotype="dijit.layout.TabContainer" > <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true"> <div id="legendDiv"></div> </div> <div dojotype="dijit.layout.ContentPane" title="Layers" > Layers on/off:<br /><span id="layer_list"></span><br /> </div> <div dojotype="dijit.layout.ContentPane" title="Info" > Information about the mapping site:<br /><span id="layer_list"></span><br /> </div> </div> </div> <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center"> </div> <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" > Virginia Department of Conservation and Recreation </div> </div> </body> </html>