Who uses the MobileViewer? How to customize it

[tmblackflag]

Hello there,

I've read through all the Mobileviewer documentation and am somewhat comfortable with the architecture of it. I've removed some unwanted buttons and added a few news ones of my own. My question however is, with the out of the box panning and zoom to rectangle buttons, after a zoom to rectangle i want to deactivate that button and activate the pan and zoom button..

So in the Index.html file the two buttons are loaded like so:

Pan/zoom button:

        var mgNavigateButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/zoom-icon.png',
            label: mobileViewer.getString('PAN_ZOOM'),
            buttonId: 'navigateBtn',
            activeControls: [mgTapSelect, mgPan, mgPinchZoom, mgProperties, mgDoubleTapZoom]});

Zoom to rectangle button:

        var mgZoomRectButton = new mobileViewer.Button({map: mgMap, imageSrc: 'images/zoom-rectangle-icon.png',
            label: mobileViewer.getString('ZOOM_RECTANGLE'),
            buttonId: 'zoomRectBtn',
            activeControls: [mgTapSelect, mgProperties, mgDragZoomRect, mgPinchZoomRect, mgDoubleTapZoom]});

Zoom rectangle js file

<script type="text/javascript" src="lib/mobileviewer_control_dragzoomrectangle.js"></script>

Pan and zoom JS file

<script type="text/javascript" src="lib/mobileviewer_control_pan.js"></script>

In the onDeactivate function of mobileViewer.DragZoomRectangle i want to activate the mobileViewer.Pan control. I'm trying to do it like so with zoom to rectangle

    onDeactivate: function(e)
    {
        this.boxDiv.style.visibility = 'hidden';
        mgNavigateButton.activate();
    },

but firebug tells me: mgNavigateButton is not defined

This OOP Javascript is a bit new to me. How can I access the pan control from within the zoom to rectangle control?

[jackie.ng]

Probably because these controls are independent of each other, so they would not know anything about other controls (ie. That DragZoomRectangle control would not be carrying a reference to the NavigateButton control)

Assuming all of these controls inherit from OpenLayers.Control, what you want to do instead is register a listener function to the deactivate event for your control(s) in question:

mgZoomRectButton.events.register("deactivate", this, function(e) {
    mgNavigateButton.activate();
});

The above code should be in the same place where you are creating the controls. You shouldn't really have to modify the control scripts in any way. They should be providing event hooks like the one above to do what you are after.

- Jackie

Disclaimer: Haven't looked at the Mobile Viewer code, but I do know it's built on top of OpenLayers, and the answer I've given is contextual to OpenLayers and not MapGuide/AIMS.

[Daniel.Du]

Have you ever refer to this blog post? 

http://adndevblog.typepad.com/infrastructure/2012/06/creating-custom-control-for-mobile-viewer-of-ai...

Hope it is helpful for you.