drawing graphic layer on client side

1258
11
Jump to solution
10-02-2012 04:39 AM
Krystianp
New Contributor III
hello,

I've got some problems with drawing graphics point on client side. The problem is, when I draw points by first time by JS api everything is OK. But when  points exists and I  try to realy fast pan my map window from left to right (for example) my graphic layer can't finish drawing before one pan is ended. After few this kind of operations I can see, that my graphics points aren't in the geographic position as they should be when I started to pan. My question is how can I block again pan untill my graphic is drawn properly. I think it is the only way to prevent described situation.
I would like to mention, that I'm using jQuery for this application and I tried many many tricks like setting flag and setting enableMapNaviagtion() after document ready, I have tried to setTimeout, but for now this doesnt works. Can anybody helps me?
0 Kudos
1 Solution

Accepted Solutions
Krystianp
New Contributor III
OK. so I figured it out!!! 🙂

the problem was as I wrote before - when I release mouse button, but still moves mouse over the screen the map was moving with me. (only in google chrome) but when I changed event from onPanStart/Stop to onMouseDragStart/Stop everything works good, but I had to check if pan tool is active.

but still..3days went to hell! 😉

with greetings
Krystian.

View solution in original post

0 Kudos
11 Replies
__Rich_
Occasional Contributor III
How many graphics have you drawn?

There is a setting displayGraphicsOnPan:true that you can pass to the map constructor, but let's get the full picture before jumping to a 'silver bullet' 😉
0 Kudos
Krystianp
New Contributor III
it's depends (scale, terrain etc.) but it's from 1 - 3000 graphics points per screen.

yeah... displayGraphicsOnPan:true is set, but my problem is that AFTER the pan is over points arent in the same geographic positions.
0 Kudos
__Rich_
Occasional Contributor III
0 Kudos
__Rich_
Occasional Contributor III
yeah... displayGraphicsOnPan:true is set


That's the default, setting it to false might help performance.

but my problem is that AFTER the pan is over points arent in the same geographic positions

Does this happen when you only have a few graphics or only when you've got many?
0 Kudos
Krystianp
New Contributor III
That's the default, setting it to false might help performance.
Does this happen when you only have a few graphics or only when you've got many?


I've read before all links that you sent. It's doesn't matter which browser, or how many graphics are there. I think that JS api can't help me (I really 'know by heart' arcgis JS api documentation 😉 ) from my debugging I can tell that problem is with SVG graphic, it takes some time to add graphics nodes to HTML file and untill this process is ended I should freeze pan option. But I dont know to which event handle this, becouse as I said before $(function(){}) (document.ready() ) not resolve the problem.
0 Kudos
__Rich_
Occasional Contributor III
I've read before all links that you sent. It's doesn't matter which browser, or how many graphics are there. I think that JS api can't help me (I really 'know by heart' arcgis JS api documentation 😉 ) from my debugging I can tell that problem is with SVG graphic, it takes some time to add graphics nodes to HTML file and untill this process is ended I should freeze pan option. But I dont know to which event handle this, becouse as I said before $(function(){}) (document.ready() ) not resolve the problem.

So 1 graphic in Chrome causes a problem? 😛

I've got a few layers where I add hundreds of graphics and I haven't seen this problem, yep it can be laggy but the graphics are positioned correctly, so there must be something else going on.  (I don't deploy layers like this to production though!)

I'm not surprised document.ready() doesn't help.

How/when are you adding the graphics?
0 Kudos
Krystianp
New Contributor III
ok so below is my general concept of application

when application is started, user can pick the region to show points on the map. He picks something, then by AJAX my script is connecting to database which is returning X,Y coordinates for points, then I create json contains those coordinates and by addGraphics() points are on the map. Now, in event onPanStart I've got sequence:

  MAP.map.onPanStart = function() {
   MAP.map.disableMapNavigation();
  };

and onPanEnd:
  MAP.map.onPanEnd = function(extent, endPoint) {
   if(checkIfExtentContainsBoreholes()){

   if (MAP.points.length > 0) {
    MAP.drawPoints();
                        }

                 };
  };


and first if statement (checkIfExtentContainsBoreholes) checks if database contains points from my extent, and if its true, then it put points by the same function as is before (coordinates to json..)

so when onPanEnd drawing event has started I can pan map again, and if the graphics still are not on the map and I pan map to other place they appears badly(because the SVG graphic is drawing by relative coordinates to top-left corner of the map)
0 Kudos
JeffPace
MVP Alum
would it be possible to

on pan start - hide graphicsLayer
on pan end - show graphicsLayer.
0 Kudos
Krystianp
New Contributor III
would it be possible to

on pan start - hide graphicsLayer
on pan end - show graphicsLayer.


yes, I do this, but on pan start / end I've got really lots of code so I past only interesting parts of code. Now when I'm testing application I see, that this problem occuress only in google chrome (my. version is 22.0.1229.79 m) FF or IE is OK.

another observation

when I click mouse button and fast move map and in the end of panning I release mouse button but still move mouse the map is moving by the trace of my mouse (its only about for ~0.2 sec.) but if i move map very quickly I can pan a lot of area and then the postion-error can be saw exactly.
0 Kudos