nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Vind meer berichten getagd met

Accepted answers

All comments

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.

derekswingley1

A repro case would be very helpful.

BenReilly

Derek, here's a copy of the map I'm working on that has the problem.

http://arcviewdev.uww.edu/javamap.html

(And before anyone says anything, yes, I'm aware of the errors with my data. They've been fixed on a more recent version)

Hopefully that will help.

JeffPace1

Derek, here's a copy of the map I'm working on that has the problem.

http://arcviewdev.uww.edu/javamap.html

(And before anyone says anything, yes, I'm aware of the errors with my data. They've been fixed on a more recent version)

Hopefully that will help.

I opened the map in chrome. Clicking on the poly's pops open the popup, no map moving ever. ??

BenReilly

I opened the map in chrome. Clicking on the poly's pops open the popup, no map moving ever. ??

I'm wondering if this is a browser compatibility issue, then. I'm using Firefox 3.6.13 at work, I'll try the current version of Firefox 4 tomorrow. To everyone else with a problem, what browser are you using? I don't think the popups worked with our version of IE, either.

kenbuja

It works in Chrome 13 and IE 8 but not in Firefox 5. Basically, you need to interact with the map first by zooming or panning before the onclick returns something. I had this problem in Flex and got around it by adding in an alert box in the initialization. Closing the alert box provided the map interaction necessary to allow the map click to work without panning or zooming.

JeffPace1

It works in Chrome 13 and IE 8 but not in Firefox 5. Basically, you need to interact with the map first by zooming or panning before the onclick returns something. I had this problem in Flex and got around it by adding in an alert box in the initialization. Closing the alert box provided the map interaction necessary to allow the map click to work without panning or zooming.

I think this is an error in the api . If you switch to v2.4 it works crossbrowser

StephenLead

To everyone else with a problem, what browser are you using?

It's not working for me in IE8, Chrome 13 or Firefox 5 - I need to move the map first before the popup works.

Hope this helps,
Steve

BenReilly

I think this is an error in the api . If you switch to v2.4 it works crossbrowser

You're right- I switched to 2.4 from 2.3 and I now don't have to move the map. Thanks for the tip- hopefully that works for the rest of you.

JeffPace1

Any time. We skipped 2.3 completely, it seem a little buggy. 2.4 has been rock solid for us since it came out.

DavidMurray

I am using v2.4 but still have the same problem when using all browsers.

derekswingley1

Is this still the link to see your issues: http://arcviewdev.uww.edu/javamap.html

That page doesn't load a map for me and is using 2.3.

DavidMurray

Hi

That's not the link to my site. Unfortunately whilst the site is being developed the systems administrator has password protected the mapping services. So I can't supply a link to the current application. However here is the code for the function that is handling the click event.

function checkAuthority(event){
  qBuffer.geometry = event.mapPoint;
   //execute query
   qTaskBuffer.execute(qBuffer,function(featureSet){
    //show pop-up if location does not intersect road buffer layer
    if(featureSet.features.length===0){
     map.infoWindow.setTitle("Warning");
     map.infoWindow.resize(300,250);
     map.infoWindow.setContent("The location you have selected is not on a road, please try marking the defect again.");
     map.infoWindow.show(event.mapPoint);
     document.getElementById("loadingLayer").style.display = "none";
     if(mapscale>2000){map.setLevel(12);}  //level 12 is 1:2,000
     closeResults();
    }else if(featureSet.features.length===1){//function to display one result only
     displayResult(featureSet.features[0],event);
    }else{//call function to display multiple results
     displayResults(featureSet,event);
    }
   });

}

Basically it checks that the mouse click intersects a polygon layer. If it does then the results are verified then displayed to the user. If the location of the mouse click does not intersect the polygon layer a message is displayed to the user.

Currently this works fine if the user has zoomed or panned around the map, however if they click on the map once the data has loaded and have not panned or zoomed it returns an error. I have trapped the error using the "onError" event of the qTaskBuffer, but the message property of the error object is empty and it does not recognise the instance type. Using the onError event has allowed me to prompt the user to click on the map again, they click on the map and the process is successful.

I've tested the application in numerous browsers and different versions of the API and still get the same result.

Any advice would be very welcome.

Kind regards
David

derekswingley1

Thanks for the additional info. Are you able to post the rest of your code?

DavidMurray

It would not let me post the code, too many characters. Could I email you directly, that way I could supply you the code and a user name and password so you can access the site?

Many thanks
David

derekswingley1

Hi David,

Sent you a message on twitter.

DavidMurray

Thanks to Swingley the issue has been resolved.

The cause was the spatial reference of the geometry being pasred into the querytask was null. So to resolve this I created a new point object allowing me to set the spatial reference. This point object is then used to set the geometry property of the querytask

var click_point= new esri.geometry.Point(event.mapPoint.x,event.mapPoint.y, new esri.SpatialReference({wkid:27700}));
qAuth.geometry=click_point;

Thank you for all the help.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.