How To Control Map Panning and Zooming

Rather than use the panning and zooming widgets in the map viewer, you may want to control the map panning and zooming from elements within your web page.

Disable the built-in panning and zooming widgets with parameters to embedViewer and use the navigation APIs (e.g. panLeft and zoomIn) to control the map instead. 


<html>
<head>
    <script type="text/javascript" src="map_data/swfobject.js"></script>
    <script type="text/javascript" src="map_data/avenza.js"></script>
    <script type="text/javascript">
        var theMap = AVENZA.embedViewer("map", "750", "500", 
            {
                baseURL:"map_data/",
                panWidget: false,
                zoomWidget: false,
                flashSecuritySandbox: AVENZA.AUTO_SANDBOX
            }
        );

        function zoom_in() {
            theMap.zoomIn();
        }

        function zoom_out() {
            theMap.zoomOut();
        }

        function pan_left() {
            theMap.panLeft();
        }

        function pan_right() {
            theMap.panRight();
        }

        function pan_up() {
            theMap.panUp();
        }

        function pan_down() {
            theMap.panDown();
        }

        function pan_home() {
            theMap.panHome();
        }
    </script>

</head>
<body>
    <div style="position:relative"> 
        <div id="map">
        </div>
        <hr>
        <button type="button" onclick="zoom_in()">Zoom In</button>
        <button type="button" onclick="zoom_out()">Zoom Out</button>
        <button type="button" onclick="pan_left()">Pan Left</button>
        <button type="button" onclick="pan_right()">Pan Right</button>
        <button type="button" onclick="pan_up()">Pan Up</button>
        <button type="button" onclick="pan_down()">Pan Down</button>
        <button type="button" onclick="pan_home()">Pan Home</button>
    </div>
</body>
</html>

You can see a live example here.