infoWindow appears in the wrong location - upper left of map?

TracySchloss — Tue, 25 Sep 2012 13:23:00 GMT

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>

Re: infoWindow appears in the wrong location - upper left of map?

CraigMcDade — Tue, 25 Sep 2012 14:40:24 GMT

You need to link to the css.

Ex.

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">

Re: infoWindow appears in the wrong location - upper left of map?

TracySchloss — Tue, 25 Sep 2012 14:42:25 GMT

Those pesky styles! I guess it wasn't in the example I was working from because there were style definitions throughout that handled it.

Thanks for the quick response. It's working now.

topic Re: infoWindow appears in the wrong location - upper left of map? in ArcGIS JavaScript Maps SDK Questions

infoWindow appears in the wrong location - upper left of map?

Re: infoWindow appears in the wrong location - upper left of map?

Re: infoWindow appears in the wrong location - upper left of map?