• Industries
  • Products
  • Buy
  • Services & Support
  • Communities
  • Discussion Groups

    Autodesk MapGuide Enterprise Developer

    Reply
    Active Contributor
    tmblackflag
    Posts: 48
    Registered: ‎07-20-2011

    Who uses the MobileViewer? How to customize it

    986 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?

    Please use plain text.
    Mentor
    Posts: 237
    Registered: ‎10-06-2008

    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.

    Please use plain text.
    ADN Support Specialist
    Posts: 103
    Registered: ‎12-23-2008

    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

    Please use plain text.