How to create toggleable ocg(s) content


Product: PDF for Nodejs

Product Version: 9.4.0

Please give a brief summary of your issue:
I am creating OCGs following PDFTron Systems Inc. | Documentation but I am looking for a submenu to turn on and off these ocg(s). Thanks.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

const createPolygonLayer = async (doc, layer, paths) =>{
  await PDFNet.startDeallocateStack();
  const writer = await PDFNet.ElementWriter.create();
  // Create a path object in the shape of a heart.
  const builder = await PDFNet.ElementBuilder.create();
  counter = 0;
  builder.pathBegin(); =>{
    coords = data.split(',');
    if(counter === 0){
      builder.moveTo(parseInt(coords[0]), parseInt(coords[1]));
    } else {
      builder.lineTo(parseInt(coords[0]), parseInt(coords[1]));
  const element = await builder.pathEnd(); // the path geometry is now specified.

 // Set the path STROKE color space and color.
 const RGBSpace = await PDFNet.ColorSpace.createDeviceRGB();
 const gstate = await element.getGState(); // use the same image (just change its matrix)
 const redColorPt = await PDFNet.ColorPt.init(1, 0, 0); // RGB
 gstate.setStrokeColorWithColorPt(redColorPt); // red
 //gstate.setTransform(0.5, 0, 0, 0.5, 280, 300);
 const grpObj = await writer.end();
 // Indicate that this form (content group) belongs to the given layer (OCG).
 grpObj.putName('Subtype', 'Form');
 grpObj.put('OC', layer);
 grpObj.putRect('BBox', 0, 0, 256, 256); // Set the clip box for the content.
 await PDFNet.endDeallocateStack();
 return grpObj;

  const callMain = async() => {
    try {
    paths = [
      '247,32', '248,5',  '145,7',
      '161,37', '176,33', '190,31',
      '190,32', '247,32'
      const doc = await PDFNet.PDFDoc.create();
      const vectorLayer = await CreateLayer(doc, 'Boundary');
      // Start a new page ------------------------------------
      const page = await doc.pageCreate();

      const builder = await PDFNet.ElementBuilder.create();	 // ElementBuilder is used to build new Element objects
      const writer = await PDFNet.ElementWriter.create();  // ElementWriter is used to write Elements to the page
      writer.beginOnPage(page);  // Begin writing to the page
      const polygonGroup = await createPolygonLayer(doc, (await vectorLayer.getSDFObj()), paths);
      element = await builder.createFormFromStream(polygonGroup);
        writer.end(); // save changes to the current page

        // Set the default viewing preference to display 'Layer' tab.
        const prefs = await doc.getViewPrefs();
        const dirPath = path.join(__dirname, `/${nodeHousing}`);
        await`${dirPath}/${nodeHousing}.pdf`, PDFNet.SDFDoc.SaveOptions.e_linearized);

      return true;
    } catch(error){
      throw error;

Could you please elaborate on what you mean exactly by “submenu”?
Sounds like you are using a PDF viewer? If so, which one exactly?
Screenshots help a lot.

I plan on adding multiple OCGs and need a menu or something to turn of and off the layers.

Are layers only viewable in the PDF WebViewer ? For example, I can not create a pdf with toggleable layers only on the server.

For example, I can not create a pdf with toggleable layers only on the server.

Yes, you can using our SDK.

For the PDF file itself there is an entry that a conforming PDF Reader is supposed to parse to display the layers.

// Add the new OCG to the list of layers that should appear in PDF viewer GUI.
Obj layer_order_array = cfg.GetOrder();
if (layer_order_array == null) 
	layer_order_array = doc.CreateIndirectArray();

See this sample

However, it is still up to each individual PDF Reader software to display and process the layers or not. Many PDF Readers do not offer Layer support.

If you are looking for more assistance, then please elaborate on what exactly you are trying to do.