Deep Map SDK Web


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!");
  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;
    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;
        <div id="deepMap">
            <select id="levelSwitch" onchange="switchLevel()"></select>
  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);

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