1. Customizing Maps Custom controls to change the content of the map
Changing what the map does when the mouse is moved “over” the map or when the user pressed the mouse “down” on the map.
Dr. Jim Graham
15 years as computer engineer and manager with HP
If you use an HP ScanJet scanner you are using software I worked on
4 years running a Web-GIS company
5 years at CSU
Research Scientist:

2. Adding External Controls
Make the MainContainer, Scene, Geo, and/or Layers you want to change global
Add a new HTML/DOM element as the control
Add your event handler functions
Call the CanvasMap objects as you desire

3. Event Processing In Windows-Based computer programs, we:
Setup our program
Add “event handlers”
Wait for the user to do something

4. Common Mouse DOM Events
onclick=“OnClick(MouseEvent)”
onmousedown=“OnMouseDown(MouseEvent)”
onmousemove=“OnMouseMove(MouseEvent)”
ondblclick=“OnDoubleClick(MouseEvent)”
Mouse Event:
clientX – horizontal position of the mouse cursor
clientY – vertical position of the mouse cursor
button – which button was pressed

5. Common Key DOM Events onkeydown=“OnKeyDown(KeyEvent)”
onkeypress=“OnKeyPress(KeyEvent)”
onkeyup=“OnKeyUp(KeyEvent)”
KeyEvent:
code – key pressed
shiftKey – true if shift pressed …

6. Other Common DOM Events
wheel=“OnWheel(WheelEvent)”
WheelEvent:
var Delta=TheEvent.detail? TheEvent.detail*(-120) : TheEvent.wheelDelta
Delta contains +120 when wheel is scrolled up, -120 when scrolled down
Note: this does not match W3Schools

7. Events and JavaScript
TheElement.addEventListener("mousemove",function(TheEvent) {
// your code here
// “this” pointer will point to the element
});