Tutorial: Viewer with server side 3rd party annotations

    <!-- include PMA.UI script & css -->
    <script src="pma.ui.js" type="text/javascript"></script>
    <link href="pma.ui.css" type="text/css" rel="stylesheet">

    <!-- the element that will host the viewport -->
    <div id="viewer" style="height: 500px"></div>

    <script type="text/javascript">
        console.log("PMA.UI loaded: " + PMA.UI.getVersion());

        // initialize the viewport
        var viewport = new PMA.UI.View.Viewport({
                caller: "PMA.UI demo",
                element: "#viewer",
                image: "Reference/Annotations/3rdParty/visiopharm/PanCK-CD8_08260010C0006S.mrxs",
                serverUrls: ["https://host.pathomation.com/pma.core.2/"],
                username: "PMA_UI_demo",
                password: "PMA_UI_demo",
                // you can pass true/false for displaying the 3rd party annotations
                // or an object with the collapsed property set to true/false indicating whether to show the control collapsed or not
                annotationsLayers: { collapsed: true },
            },
            function () {
                console.log("Success!");
            },
            function () {
                console.log("Error! Check the console for details.");
            });

            // get the available annotation layer names
            console.log(viewport.getAnnotationsLayersNames());

            // toggle the visibility of individual layers
            viewport.layerSwitcher.showLayers(
                [
                    {
                        name: "Visiopharm",
                        visible: false
                    }
                ]
            );
    </script>

Result: