A Simple Way to Display Feature Info





Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014


A Simple Way to Display Feature Info

Posted on .

We’re always looking for ways to streamline and simplify how information from a map is displayed. To that end, I threw together a simple class to make displaying info from features on a map simpler. For now, I’m calling it a “tip”. Here’s a demo showing feature info as features are moused-over. I also set up the same example using mouse clicks.

Other than displaying feature info simply and cleanly, the key thing that this class does is that it elegantly handles mouse events. Anyone who has tried to show feature info on hover with the ArcGIS API for JavaScript and an InfoWindow or Popup has probably experienced “the flickering effect”. This class addresses that problem by using setTimeout and clearTimeout to prevent flickering when the mouse moves from a feature to the tip. Just to be clear, the use of setTimeout is in the context of improving user experience. setTimeout is occasionally useful, and this is one of those times. It is not useful when trying to wait for an asynchronous task to finish. /mini-rant.

The tip is similar to a feature I’ve seen in wax-based mapping apps but thought it would be a fun experiment to do something similar for the ArcGIS API for JavaScript. You can get the code for the tip class on github. I’ll dig into the specifics of the code in a future post.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...