Creating zoom buttons

Tutorials

3D Wayfinder has built in mouse scroll wheel and multitouch pinch zooming. But if You want to add your own buttons for zooming then follow these instructions.

First, we add the buttons to the body of the document.

<button onclick="zoomIn()">Zoom in</button>
<button onclick="zoomOut()">Zoom out</button>

Then we create the javascript functions that are called by the callback functions. We use Wayfinder’s zoomIn and zoomOut functions.

The zoom in button

function zoomIn() {
  wayfinder.zoomIn();
}

The zoom out button

function zoomOut() {
  wayfinder.zoomOut();
}

We also add a slider control to set the zoom.
First, we add the slider input into the body.

<input id="zoomSlider" type="range" min="0" max="1" step="0.01"></input>

Then we add the following into the main function. This calls the changeZoom function we will create when the slider value is changed.

$('#zoomSlider').change(changeZoom);

And finally we will create the changeZoom function. This will use the setZoom function of Wayfinder, which takes a value between 0 and 1 to set the zoom between fully zoomed out and fully zoomed in.

function changeZoom() {
  var val = parseFloat($('#zoomSlider').val());
  wayfinder.setZoom(val);
}

To capture the current zoom level attach a callback function:

wayfinder.cbOnZoomChange = function(zoom){
  console.log("Current zoom: "+zoom);
}

Full source

<html>
    <body>
        <canvas id="map" width="1024" height="768"></canvas>
        <div style="float:right; position:relative; top:50%; transform:translateY(-50%);">
            <button onclick="zoomIn()">+</button><br />
            <button onclick="zoomOut()">-</button>
            <input id="zoomSlider" type="range" min="0" max="1" step="0.01"></input>
        </div>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
        <script src="//static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
        <script src="//static.3dwayfinder.com/js/dist/3d/latest/Wayfinder3D.min.js"></script>
        <script type="text/javascript">
            var wayfinder = false;
            function zoomIn() {
                wayfinder.zoomIn();
            }
            function zoomOut() {
                wayfinder.zoomOut();
            }
            function changeZoom() {
                var val = parseFloat($('#zoomSlider').val());
                wayfinder.setZoom(val);
            }
            $(function() {  // Make sure the document is loaded, aka the "main" function
                wayfinder = new Wayfinder3D();
                wayfinder.options.assetsLocation = '//static.3dwayfinder.com/shared/';
                wayfinder.open();
                $('#zoomSlider').change(changeZoom);
            });
        </script>
    </body>
</html>