I'm VERY new to Jaxascript and working on my first web map. The identify tool kind of works, but it returns results from a different location than where I click. Also, the pop up sometimes spills off of the map page and isn't fully visible. I think this has to do with the size of the map window or my tabs to the left, but I'm not sure how to fix it. Any suggestions are very appreciated. My very messy script will follow:
- David,
The issue with the map identify location being offset was probably due to the fact that the html that defined the identify window tab content was above the map and causing a positioning offset. Since the tab container is used by the info window I modified your app to build it through code instead. There was also some duplicate code, adding layers twice, multiple load event listeners etc which I removed from the app. Here's the revised version:<!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[i]; 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[i].attributes['LABEL']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features[i].attributes['MATYPE']+"</td>"; content+="<td>"+layerResults.features[i].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[i].attributes['NAME']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i +"]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features[i].attributes['STATUS']+"</td>"; content+="<td>"+layerResults.features[i].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> - Kelly,
Thanks so much for editing my code and doing some clean up! Unfortunately I am having trouble getting the the basemap and other layers to load. I corrected a typo in the one of the variables (var riversResutls) and I'm looking for possible other issues. If you have any ideas let me know...otherwise I'll keep looking until I figure it out.
Thanks again! David - If you debug your app using Chrome Developer Tools or Firebug do you see any errors in the console?
- Just re-read your first post and saw that you said you were new to JavaScript so here's a link to Firebug if you haven't used it before:
https://getfirebug.com/enable
I highly recommend spending a bit of time becoming familiar with either Firebug or the Chrome Dev tools they make debugging JavaScript apps much easier. They allow you to view errors and messages in the console, set breakpoints and step through your code, inspect the css and much more. - I'm looking at it in Firebug right now. I do need to get more familiar with it and now seems like a good time. Thanks!
The issue with the map identify location being offset was probably due to the fact that the html that defined the identify window tab content was above the map and causing a positioning offset. Since the tab container is used by the info window I modified your app to build it through code instead. There was also some duplicate code, adding layers twice, multiple load event listeners etc which I removed from the app. Here's the revised version:
<!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[i]; 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[i].attributes['LABEL']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features[i].attributes['MATYPE']+"</td>"; content+="<td>"+layerResults.features[i].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[i].attributes['NAME']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i +"]); return false;'>(show)</a></td>"; content+="<td>"+layerResults.features[i].attributes['STATUS']+"</td>"; content+="<td>"+layerResults.features[i].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>