Using jQuery

using jquery is also supported when working with the 2d viewer api for legacy reasons small differences exist in the way you interact with the 2d viewer when using jquery installation 1\ add jquery to your project include jquery in your html file using a script tag 2\ add the 2d viewer to your project include the 2d viewer in your html file using a script tag, this will add the global bimsync object to the window object 3\ provide a container for the 2d viewer create a div element for attaching a 2d viewer instance to 4\ initialize the 2d viewer api set a callback function and then invoke the loadviewer2d method, the 2d viewer is ready once callback invoked bimsync setonviewer2dloadcallback(onviewer2dload); bimsync loadviewer2d(); 5\ create a 2d viewer instance initialize the 2d viewer by invoking the viewer2d method on the jquery object for the div where you want to attach the 2d viewer var viewer2doptions = { hoverspaces false, showviewpoint false, selectcolor "#ff0000" }; $("#viewer 2d") viewer2d(viewer2doptions); 6\ interact with the 2d viewer call methods on the 2d viewer instance to interact with the 2d viewer $("#viewer 2d") viewer2d("loadurlpromise", tokenurl) then(() => { var storeys = viewer2d viewer2d("getstoreys"); if (storeys length > 0) { $("#viewer 2d") viewer2d("showstorey", storeys\[0] id); } }); usage options the options for the 2d viewer are the same when using jquery but the default value may differ properties true 146,100,100,100left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type methods in general, the methods are the same when using jquery but the way you call them is different $("#viewer 2d") viewer2d("methodname", arg1, arg2, ) some methods are also available under their deprecated names true 330,331left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type for legacy reasons some methods have different signatures when using jquery capturescreenshot when using jquery the name for this method is screenshot usage var options = { width 1024, height 768 }; function onscreenshot(imagedata) { console log("imagedata ", imagedata); } $("#viewer 2d") viewer2d("screenshot", options, onscreenshot); onscreenshot true 661left unhandled content type left unhandled content type loadurl when using jquery the name for this method is loadurlpromise usage var options = { append true, modelid "my model id", modelname "my model name" }; var url = "https //api catenda com/v2/projects/{project id}/viewer2d/geometry?token=your token"; var modelinfospromise = $("#viewer 2d") viewer2d("loadurlpromise", url, options); events callbacks for 2d viewer events may have different signatures when using jquery each event documentation page details any differences