Documentation Tutorial: Navigation with zoomTo

Navigation zoomTo

Introduction

This tutorial is a short explanation on how to chain animation with zommTo. The aim is to chain two animation.

Code in Mizar

The first step is to look to the getting-started-with-Navigation to create the Earth.

For this step, you need to look at the navigation interface and the navigation package

Look at the code and change it to test it.

<!doctype html>
<html>

<head>
    <title>Navigation zoomTo</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../Mizar.min.js"></script>

// mode dev
        //require(['Mizar'], function (Mizar) {

//mode prod
        function start() {
            // Create Mizar
            var mizar = new Mizar({
                canvas: "MizarCanvas",
                planetContext: {
                    coordinateSystem: {geoideName: Mizar.CRS.WGS84}
                }
            });
            
            mizar.addLayer({
                type: Mizar.LAYER.WMS,
                name: "Blue Marble",
                baseUrl: "http://demonstrator.telespazio.com/wmspub",
                layers: "BlueMarble"
            });

mizar.setBackgroundLayer("Blue Marble");

// get the navigation object
            var nav = mizar.getActivatedContext().getNavigation();

// first zoom
            nav.zoomTo([-160, 80], {
                // second zoom in the callback
                callback:function() {
                    nav.zoomTo([10, 80]);
                }
            });
        }//);

</script>

</head>

Introduction

Code in Mizar

Search results