BearPanther.com

Close a Map’s Info Window with the Escape Key

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

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

Blog

Close a Map’s Info Window with the Escape Key

Posted on .

One thing I find myself including in more and more apps is the ability to close a map‘s info window when the escape key is pressed. I included this in instamap as well as the MLB layer examples (web mercator and albers).

The code to make this happen is straight forward:

dojo.connect(map, "onKeyDown", function (evt){ 
  if ( evt.keyCode == dojo.keys.ESCAPE ) { 
    map.infoWindow.hide(); 
  }
});

When you have a reference to the map, connect an event listener for onKeyDown. That way, when someone presses a key while the map has focus, or their cursor is over the map, the callback function provided will fire. If the escape key was pressed, the map’s info window is hidden (this also works when using popups, as shown in the examples linked above). Regarding the dojo.keys reference, that’s used to ensure that escape was pressed in a cross-browser friendly way. I don’t know if there are specific issues with the way different browsers specify escape was pressed, but it’s safe to assume that dojo abstracts those away for us. Gotta love dojo.

To use this in an app you’re building, include the code above just after you create your map (or wherever you have a reference to your map). It’s simple, and will put a smile on the face of your users in the know.

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) ...