I have an infoTemplate set on my featurelayer and the map set to show the infoWindow on click executing a query. The information returned is correct, however, instead of appearing where I clicked, it appears in the upper left corner of the map, without the standard information balloon - just as text.Comparing to the sample, Feature layer with popup, I think mine is the same, except for the style and the way I defined the content of the infoTemplate. I don't think anything I've done would cause my infoWindow not to be displayed where I click! <!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>Rural Health Day Events</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/css/esri.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <script type="text/javascript" language="Javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.dijit.InfoWindow"); dojo.require("esri.dijit.Popup"); var map; var pathName = "http://hl042990:8399/arcgis/rest/services"; var infoTemplate; function init() { var popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 3), new dojo.Color([255,255,0,0.35])) }, dojo.create("div")); var spatialReference = new esri.SpatialReference({wkid: 102100 }); startExtent = new esri.geometry.Extent(-10583000, 4287025, -9979000, 4980462, spatialReference); map = new esri.Map("mapDiv", {extent: startExtent , logo:false, infoWindow:popup }); // dojo.connect(map,"onClick",function(evt){ var query = new esri.tasks.Query(); query.geometry = pointToExtent(map,evt.mapPoint,5); var deferred = countyFeatureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW); map.infoWindow.setFeatures([deferred]); map.infoWindow.show(evt.mapPoint); }); // var countyLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://hl042990:8399/arcgis/rest/services/RuralHealthDayEvents/MapServer",{id:'events'}); infoTemplate = new esri.InfoTemplate("${NAME}", "<a href= ${pageLink} target=_blank ;'>Show Rural Health Day Events for ${NAME} County</a>"); var countyFeatureLayer = new esri.layers.FeatureLayer("http://hl042990:8399/arcgis/rest/services/RuralHealthDayEvents/MapServer/0", { mode: esri.layers.FeatureLayer.MODE_SELECTION, outFields: ["NAME", "ScheduledEvent", "PageLink"] , infoTemplate: infoTemplate }); map.addLayer(countyLayer); map.addLayer(countyFeatureLayer); // dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); // } function pointToExtent(map, point, toleranceInPixel) { var pixelWidth = map.extent.getWidth() / map.width; var toleraceInMapCoords = toleranceInPixel * pixelWidth; return new esri.geometry.Extent( point.x - toleraceInMapCoords, point.y - toleraceInMapCoords, point.x + toleraceInMapCoords, point.y + toleraceInMapCoords, map.spatialReference ); } dojo.addOnLoad(init); </script> </head> <body class="claro"> Click a shaded county to get information on their Rural Health Day event. <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div> </body> </html>
