Skip to content

7 - Integrating with Popper.js

Popper.js

Map Viewer

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <div id="viewer-container"></div>
        <div id="tooltip" style="display: none; background-color: white; border: 1px solid black; padding: 1px"></div>

        <script type="application/javascript" charset="UTF-8" src="https://unpkg.com/@popperjs/core@2"></script>
        <script
            src="https://libs.3ddvapis.com/core/dvm/v1/lib/stable/dvm.js"
            type="application/javascript"
            charset="UTF-8"
        ></script>
        <script charset="UTF-8" src="integration.js"></script>
    </body>
</html>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
// ---- LOADING MODULE ----
DVM.loadModule("map_viewer", {
    container: "viewer-container",
})
    .then(function (viewer) {
        window.viewer = viewer;
        start(viewer);
    })
    .catch(function (err) {
        console.error(err);
    });

function start(viewer) {
    // ---- LOADING MAP ----
    var tooltip = document.getElementById("tooltip");
    var tooltip_node_id = null;
    var container = document.getElementById("viewer-container");

    var popper = null;
    var timeout = null;

    viewer.subscribe("enter", function (obj) {
        var node = obj.nodes[0];
        if (node) {
            createPopup(node);
        }
    });

    viewer.subscribe("leave", function (obj) {
        destroyPopper();
    });
    viewer.subscribe("zooming", function () {
        updatePopup();
    });

    viewer.subscribe("panning", function () {
        updatePopup();
    });

    function updatePopup() {
        if (popper) {
            popper.update();
            var node = viewer.getNodeById(tooltip_node_id);
            if (node && node.on_screen) {
                showPopup();
            } else {
                hidePopup();
            }
        }
    }

    function createPopup(node) {
        clearTimeout(timeout);
        tooltip_node_id = node.id;

        timeout = setTimeout(function() {
            popper = Popper.createPopper(node, tooltip, {
                placement: "top",
                modifiers: [
                    {
                        name: "flip",
                        options: {
                            fallbackPlacements: ["bottom", "left", "right"],
                        },
                    },
                    {
                        name: "preventOverflow",
                        options: {
                            boundary: container,
                        },
                    },
                ],
            });
            tooltip.innerText = "Node: " + node.id;
            showPopup();
        }, 250);
    }

    function showPopup() {
        tooltip.style.display = "initial";
        tooltip.style.visibility = "initial";
        tooltip.style.pointerEvents = "initial";
    }

    function hidePopup() {
        tooltip.style.visibility = "hidden";
        tooltip.style.pointerEvents = "none";
    }

    function destroyPopper() {
        if (popper) {
            popper.destroy();
            popper = null;
            tooltip_node_id = null;
            tooltip.style.display = "none";
        }
    }

    // Load the map
    viewer
        .loadMap({
            venue_id: "eu-es-00008-default",
        })
        .then(function (obj) {
            // Successfully loaded
            console.log("LOADED!");
        })
        .catch(function (err) {
            // Error while loading
            console.error(err);
        });
}