LevelSwitch

Live example

This Tutorial will show you how you can switch between the levels of your map.

Step 1: Populate level list

  1. After creating a map, as outlined in "A Map Application", you can populate the level list using the following callback:

    ...
    map.setMapViewControllerDidStart(function (map) {
        console.log("DeepMap initialized!");
        fillLevelSwitch();
    })
    ...
    
  2. This fillLevelSwitch method looks like this:

    function fillLevelSwitch() {
        var levelSwitch = document.getElementById("levelSwitch");
        var levelKeys = Object.keys(map.levels);
        if(levelKeys.length > 1) {
            levelKeys.forEach(function (level) {
                var optionElement = document.createElement("option");
                optionElement.value= level;
                optionElement.innerHTML = "Level " + level;
                levelSwitch.appendChild(optionElement);
            });
        }
    }
    
    1. We get the levels from the map
    2. Extract the keys
    3. Iterate over the keys if there is more than one level
    4. Append a HTML-element option to the select box

Step 2: Create level switch element and select function

  1. Now we update the HTML and Style

    <style type="text/css">
        body {
            width: 600px;
            margin: 0 auto;
        }
    
        #deepMap {
            width: 598px;
            height: 500px;
            border: 1px solid green;
            position: relative;
        }
    
        select {
            position: absolute;
            right: 10px;
            z-index: 10000;
            top: 10px;
        }
    </style>
     
    <body>
        <div id="deepMap">
            <select id="levelSwitch" onchange="switchLevel()"></select>
        </div>
    </body>
    
  2. We must now define the switchLevel method, which handles the onchange event on the select element.

    function switchLevel() {
        var level = parseInt(document.getElementById("levelSwitch").value);
        console.log("level to switch to:", level);
        map.setLevel(level);
    }
    

That's it! We are done with our level switcher.