Infrastructure Map Server Developer

Infrastructure Map Server Developer

Reply
Active Contributor
tmblackflag
Posts: 48
Registered: ‎07-20-2011
Message 1 of 3 (1,147 Views)

Who uses the MobileViewer? How to customize it

1147 Views, 2 Replies
05-01-2012 04:33 PM

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?

Valued Mentor
jackie.ng
Posts: 275
Registered: ‎10-06-2008
Message 2 of 3 (1,144 Views)

Re: Who uses the MobileViewer? How to customize it

05-01-2012 07:48 PM in reply to: tmblackflag

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.

Board Manager
Daniel.Du
Posts: 194
Registered: ‎12-23-2008
Message 3 of 3 (1,053 Views)

Re: Who uses the MobileViewer? How to customize it

07-23-2012 11:50 PM in reply to: tmblackflag

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.:smileyhappy:



Daniel Du
Developer Technical Services
Autodesk Developer Network

Announcements
Are you familiar with the Autodesk Expert Elites? The Expert Elite program is made up of customers that help other customers by sharing knowledge and exemplifying an engaging style of collaboration. To learn more, please visit our Expert Elite website.
Need installation help?

Start with some of our most frequented solutions or visit the Installation and Licensing Forum to get help installing your software.