by: Christopher Bupp

Esri is hosting a 100 Lines or Less ArcGIS JavaScript Code Challenge … and while that is a mouthful to say, the important word is: “Challenge.” My response of course is: “Accepted.”

For the last few months I’ve been tinkering with a developer model of the Leap Motion device. So for my submission, I decided to put a couple awesome things together.

I experimented with several gestures to interact with the map, but I settled with the following:

  • Circle Gesture – Zoom to Extent
  • Tapping/Poking – Center the map
  • 1-2 finger swipe – Pan the map
  • 3 or more finger swipe – Zoom out
  • Pointing at the screen – display point location with latitude and longitude.

The latest versions of the Leap Motion JS API are pretty good at recognizing gestures. The tapping/poking seems to be the hardest one to recognize. The circle gesture and swiping are almost always recognized.

The current version of the Leap Motion JS API doesn’t recognize a skeleton. So fingers tend to get merged and disappear from view. I’ve heard that the next versions of the SDK will be adding this functionality.

Something that the Leap Motion JS API doesn’t yet support is screen location. So, I used 27 lines (out of 100) to create a “very basic” calibration. The calibration assumes that the leap motion is below and parallel with the screen. A really cool consequence of my basic calibration is that interactions “off screen” still get translated to map points; you’re able to circle or poke off-screen, and the map will still go to the desired extent.

My code is hosted on GitHub. Here is the code break-down (out of 100 lines)

  • Setting up the map (4 lines)
  • Calibration (27 lines)
  • Detecting and drawing the finger tips with lat/lon (17 lines)
  • Detecting Gestures and interacting with the map (24 lines)
  • Creating output messages (10 lines)
  • Detecting leap motion support (2 lines)

Which means 16 lines were used for variable declaration and closing curly braces.

Since the competition ends March 28, the judges will likely not have a Leap Motion by then. I’ve created a demo video of my code in action.


If you happen to have a Leap Motion, you can download my code from GitHub and run it by simply opening /LeapIntoArcGIS/index.html in your browser (doesn’t support IE).

For anyone interested in entering the competition, simply:

  1. Fork the competition repository
  2. Make code changes
  3. Submit with a pull request.

Topics: ArcGIS, Our Take on Technologies, JavaScript, Tech Blog

Posts by Tag

See all

Subscribe Here!