Zoom-dependent Layers

This example loads a PDF that contains several optional content layers with visibility depending on the current viewer zoom. Change the zoom factor to see the viewer automatically switch layers.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
styles.css
loading...
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer"); viewer.toolbarLayout.viewer.mobile = viewer.toolbarLayout.viewer.default = ["open", "zoom", "download", "about"]; const layersPanelHandle = viewer.addLayersPanel(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/zoom-layers.pdf").then(()=> { viewer.leftSidebar.menu.panels.open(layersPanelHandle.id) viewer.leftSidebar.menu.panels.pin(layersPanelHandle.id); }); }
window.onload = function(){ //DsPdfViewer.LicenseKey = "***key***"; const viewer = new DsPdfViewer("#viewer"); viewer.toolbarLayout.viewer.mobile = viewer.toolbarLayout.viewer.default = ["open", "zoom", "download", "about"]; const layersPanelHandle = viewer.addLayersPanel(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/zoom-layers.pdf").then(()=> { viewer.leftSidebar.menu.panels.open(layersPanelHandle.id) viewer.leftSidebar.menu.panels.pin(layersPanelHandle.id); }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Zoom-dependent Optional content layers</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }