Web.Maps.VE v1.0 Tutorials

Basic JavaScript Event Handling

In this article we will go over the basics of hooking in event handlers for the client-side events that are raised by the map.

The different client-side Map events that can be handled are:
  • Map Events
    • onchangemapstyle - Occurs when the map style changes.
    • onchangeview - Occurs whenever the map view changes.
    • onendpan - Occurs when a pan of the map ends.
    • onendzoom - Occurs when the map zoom ends.
    • onerror - Occurs when there is a map control error.
    • oninitmode - Occurs after the map mode changes and the map has reloaded.
    • onmodenotavailable - Occurs when the map mode could not be changed to 3D.
    • onobliqueenter - Occurs when birdseye imagery become available for the center of the map view.
    • onobliqueleave - Occurs when birdseye imagery is no longer available for the center of the map view.
    • onresize - Occurs when the map is resized.
    • onstartpan - Occurs when the map begins to pan. This event is not supported in 3D mode.
    • onstartzoom - Occurs when the map has finished panning.
  • Mouse Events
    • onclick - Occurs when the left or right mouse buttons are clicked.
    • ondoubleclick - Occurs the left mouse button is double clicked.
    • onmousedown - Occurs when the left or right mouse buttons are pushed down.
    • onmousemove - Occurs when the mouse is moved.
    • onmouseout - Occurs when the mouse is moved off the map.
    • onmouseover - Occurs when the mouse is moved over the map.
    • onmouseup - Occurs when the left or right mouse buttons are released.
    • onmousewheel - Occurs when the mouse scroll wheel is moved.
  • Keyboard Events
    • onkeypress - Occurs when a key is pressed and released.
    • onkeydown - Occurs when a key is pressed.
    • onkeyup - Occurs when a key is released.

When a map event is raised the event handler will be passed two parameters:
  • sender - This is a reference to the client-side Simplovation.Web.Maps.VE.Map object that raised the event.
  • eventArgs - This is an instance of the VEMap Event Object.

Download the code: BasicJavaScriptEventHandling.zip

Prequisites

This article assumes you have already gone through and understand the Getting Started Tutorial. We will us the code from the Getting Started Tutorial as our basic for this article.

Before we continue:
  • Open up the Getting Started Tutorial code
  • Delete the code within the Page.OnLoad event handler that adds a point to the map.

Attach a JavaScript Event Handler

We will attach an event handler to the client-side onclick event as soon as the page loads.

First we must create our Map1_Click event handler:
Image001.png

Then we need to add a handler for the Sys.Application Load event and attach our Map onclick handler to the map during this event:
Image002.png

And, now when we click on the map we get a popup saying "Map was clicked."
Image003.png

Last edited Apr 26, 2014 at 5:38 PM by crpietschmann, version 3

Comments

No comments yet.