Show popups without moving map

[BenReilly]

I have an issue with the way popups display in the javascript api. I can't get popups to show up for my feature layers unless the map is moved first. I need to make a map that has disabled scrolling, so how can I get popups to display without the map moving first?

[derekswingley1]

What do you mean by scrolling?

Can you post some code that reproduces what you're seeing?

The popup sample shows a popup without panning or zooming the map- just click a feature and the popup appears.

[BenReilly]

I'm sorry, I misspoke- I meant ESRI InfoWindows, not Dojo popups. Would it be better to try and replace the infowindows with dojo popups, then?

[derekswingley1]

I think we should clarify some terms...

When I said popup, I was referring to the popup widget that was introduced with version 2.3 of the API.

I'm not sure what you mean by dojo popup but let's ignore that for now.

If you define an infoTemplate when you create your feature layer, you should see an info window when you click your features. See the ON_DEMAND feature layer sample for an example.

[BenReilly]

Yes, by dojo popup I mean the widget, which runs off dojo. It's hard to keep terms straight when I have to keep switching APIs by project. Here's the code I have for just the map layers and the info windows. When it's done loading, clicking on the map shows nothing. As soon as it's moved just a pixel, the info windows show up.

<script type="text/javascript">

 dojo.require("esri.map");
 dojo.require("esri.layers.FeatureLayer");

  var map;
  var campus;
 
function init() {

 map = new esri.Map("mapDiv",{extent:startExtent });
 
 var spatialRef = new esri.SpatialReference({wkid:102100});
 var startExtent = new esri.geometry.Extent();
 startExtent.xmin = -9879338;
 startExtent.ymin = 5286787;
 startExtent.xmax = -9878257;
 startExtent.ymax = 5287623;
 startExtent.SpatialReference = spatialRef;

 map.setExtent(startExtent);
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("SERVICE NAME");
    map.addLayer(basemap);
 
 //Popup code for campus building layer
 
 var contenta = "<b>Building Type</b>: ${Type}" +
                      "<br /><b>Hours</b>: ${Hours}" +
       "<br /><input type='hidden' id='url' value=${FloorPlan}></input>" +           // KEEP THIS LINE ON- NEEDED FOR loadUrl FUNCTION
       "<br /><button onclick=revealModal('modalPage') value='test' />Floor Plan</button>";

        var bldginfo = new esri.InfoTemplate("${BldgName}", contenta);
 

 campus = new esri.layers.FeatureLayer("SERVICE NAME", {
        mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
        infoTemplate: bldginfo
        });
 map.addLayer(campus);
 
 //Popup code for parking lot layer
 
 var contentb = "<b>Parking Lot</b>: ${LotNo} ${Commuter}" +
     "<br />This lot ${Meters} have parking meters.";

  var parkinfo = new esri.InfoTemplate("Parking Lot Information", contentb);
  
 
 parking = new esri.layers.FeatureLayer("SERVICE NAME", {
  mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
  outfields: ["*"],
  infoTemplate: parkinfo
  });
 map.addLayer(parking); 

      }

[derekswingley1]

Can you follow the pattern in the Feature Layer On Demand sample where you load your feature layers after the map loads? Relevant code:

function init() {
  map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)});
  dojo.connect(map, "onLoad", initOperationalLayer);
}

function initOperationalLayer(map) {
  var content = "<b>Type</b>: ${ftype}" +
                     "<br /><b>Code</b>: ${fcode}";

  var infoTemplate = new esri.InfoTemplate("Rivers", content);

  var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
  });
  map.addLayer(featureLayer);
}

Also, it looks like the map.setExtent function call in your init function is unnecessary.

[BrettLord-Castillo]

The only thing moving the map does really is call map.onUpdateStart() and map.onUpdateEnd() (it does other things too, but I think that is the main thing).
This, in turn, calls .refresh() on each layer.

I think what Derek recommended will fix your problems. If it does not, consider adding a single call to .refresh() on each layer after the layer is added to the map.

[BenReilly]

I didn't have any luck with the code you posted. I'm not sure what's going on, since all of ESRI's sample maps work fine with the infowindows. I was able to get the tooltip function to work, though, which works for what I need it to do without moving the map. Thank you for the replies.

[DavidMurray]

Hi breilly47,

I share your frustration as I'm also experiencing a similar issue with an 'onclick' event not working correctly until the map has been moved.  Did you get anywhere with solving the problem?  If I come up with a solution I'll post it here.

Kind regards
David

[StephenLead]

I'm also experiencing a similar issue with an 'onclick' event not working correctly until the map has been moved

Just to add that I've seen something like this too.

In my case I'm running an IdentifyTask when the user clicks on the map. It works most of the time, but occasionally the click doesn't cause the task to run.

I'll let you know if I can find the steps to reproduce it reliably.