Bug? Map fires 'extent-changed' event upon a single mouse click in JS API v3.8

3123
7
Jump to solution
02-27-2014 09:12 AM
Jay_Gregory
Occasional Contributor III
I am running into a problem with the JS API v3.8 in which the maps 'extent-change' event is fired with a single mouse click (not double or shift+click, just a simple click on the map), even though a single mouse click does not cause the map's extent to actually change.  Normally this isn't a problem unless you have a need to run some real code when the extent actually changes.  This behavior is unfortunately preventing my popup window from appearing, because I have a function attached to the 'extent-change' event which actually clears the feature layer.  But one click should just show the popup, and not fire the 'extent-change'.  UPDATE: this only seems to be affecting Chrome
Regardless, see the following code to reproduce in the simplest manner possible:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Simple Map</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>       html, body, #map {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }       body {         background-color: #FFF;         overflow: hidden;         font-family: "Trebuchet MS";       }     </style>     <script src="http://js.arcgis.com/3.8/"></script>     <script>       var map;       require(["esri/map",     "dojo/domReady!"],     function(    Map) {   map = new Map("map", {           basemap: "gray",          center: [-97, 38],           zoom: 5,           sliderStyle: "small"         });   map.on('extent-change', function(){console.log('extent changed');});          });     </script>   </head>   <body>     <div id="map"></div>   </body> </html>
0 Kudos
1 Solution

Accepted Solutions
JonathanUihlein
Esri Regular Contributor
What version of Chrome are you seeing this issue in?
You are not seeing this issue in Firefox or IE, correct?
Also, is this desktop or mobile?

I am using: Version 33.0.1750.146 m.

Using your code, the 'extent-change' event fires once when the the map first loads, as expected.
However, the 'extent-change' event does not fire on a single map click.
I must drag or zoom for the 'extent-change' event to fire.

View solution in original post

0 Kudos
7 Replies
JeffPace
MVP Alum
My guess is that chrome is more sensitive and may be interpreting a click as a drag

you could store the extent as a global, say,

oldextent

and then on "extent change"

if (oldextent==map.extent){
do nothing
}else{
oldextent=map.extent;
do stuff
}
0 Kudos
JonathanUihlein
Esri Regular Contributor
What version of Chrome are you seeing this issue in?
You are not seeing this issue in Firefox or IE, correct?
Also, is this desktop or mobile?

I am using: Version 33.0.1750.146 m.

Using your code, the 'extent-change' event fires once when the the map first loads, as expected.
However, the 'extent-change' event does not fire on a single map click.
I must drag or zoom for the 'extent-change' event to fire.
0 Kudos
Jay_Gregory
Occasional Contributor III
hmmm, I don't see the behavior anymore.  It must have been fixed in a recent Chrome update.
0 Kudos
JustinShepard
Occasional Contributor II
I'm seeing the same behavior in Chrome Version 34.0.1847.116 m.

It wasn't doing this before and sounds kind of sporadic.
0 Kudos
ReneRubalcava
Frequent Contributor
This happens in Chrome version 33.0.1750.154.
I'll have to double-check my version at home.
0 Kudos
JustinShepard
Occasional Contributor II
I don't have a solution but I restarted my computer and now it is behaving as expected in Chrome (i.e. it's not trying to move the map every time that I click for an identify)
0 Kudos
Drew
by
Occasional Contributor III

Sorry to wake this thread up almost 2 years later but I am having the same issue in Chrome version 48.0.2564.103 m

Using this thread, I was able to figure out a fix. I thought I would share a complete solution.

 var oldExtent = null;


//ON EXTENT CHANGE - UPDATE IF VISIBLE 
on(this.map, "extent-change", function (event)
{
  var isEqual = false
  if (oldExtent != null)
  isEqual = geometryEngine.equals(oldExtent, event.extent);


  if (isEqual)
  {
  console.log('EXTENT IS THE SAME');
  }
  else
  {
  console.log('EXTENT IS DIFFERENT');
    
  }


  //SET OLD EXTENT
  oldExtent = event.extent;
});

Drew

0 Kudos