[[PageOutline]]

This page is one of the !MapGuide Community CodeSamples.  Visit the CodeSamples page to view more!

Displaying custom cursors in the AJAX viewer

This page describes how to modify the AJAX viewer for WebLayouts to display a custom cursor when the user has selected one of the zoom tools. The code and files here have been posted to the MapGuide mailing list, but frequent requests indicate that a more formal description will be appreciated.

Modifying the AJAX viewer

The javascript/html for the AJAX viewer can be found in the WebExtensions installation directory, which is usually at: C:\Program Files\MapGuideOpenSource\WebServerExtensions\www\viewerfiles

The first file to modify is the "toolbar.templ", which has code for handling button clicks on the toolbar. Simply add the folowing code inside the body tag:

<script type="text/javascript">
/* Custom icon handler */
function changeIcon(action){
        var cururl = "http://localhost/mapguide/stdicons/";
        var map = parent.mapFrame.document.getElementById("map");
        switch(action)
        {
                case 1:
                        map.style.cursor = cururl + "icon_pan.cur"
                        break;
                case 7:
                        map.style.cursor = cururl + "icon_zoomin.cur"
                        break;
                case 8:
                        map.style.cursor = cururl + "icon_zoomout.cur"
                        break;
                case 9:
                        map.style.cursor = cururl + "icon_zoomrect.cur"
                        break;
                default:
                        map.style.cursor = 'default';
                        break;
        } 
        
}
</script>

Inside the same file is the actual handler for button clicks, called OnCommandExecuted. Modify OnCommandExecuted to also change the cursor:

function OnCommandExecuted(action)
{
        changeIcon(action)
        .....
        .....
        .....
}

Finally, place the .cur files in the folder where the viewer files reside, or change the path int the !changeIcon method above. The cursor files are attached to this post.

Original code by Jackie Ng.