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: www.niiss.org

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

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

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

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

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

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