JavaScript API

The FLDraw JavaScript API consists of the methods listed below:

load (div, xml, xml2, obj, params)

Call it to initialize the viewer and load a document.
(When you publish a document, the output folder contains all relevant XML and JavaScript files that are required here.)

Parameters:

div: The id of the <div> element in which you want to load the viewer.
xml: Specifies the XML file to load.
xml2: Specifies the XML.JS file to load (optional, it's required only for offline viewing).
obj: Specifies the objects definition file to load.
params: Optional parameters for initializing the viewer:
- x: Specifies the initial X coordinate of the document center.
- y: Specifies the initial Y coordinate of the document center.
- zoom: Specifies the initial zoom factor of the document.
- width: Specifies the width of the viewer (pixels or percentage).
- height: Specifies the height of the viewer (pixels or percentage)
- controls: Specifies the kind of controls toolbar ('none', 'toolbar', 'zoom_buttons', or 'all_buttons').
- onload: Allows you to specify a function to be called when your document is loaded.
  Your callback function receives an object with the following properties:
  
  type: the event type ("load").
- onresize: Allows you to specify a function to be called when the viewer size is changed.
  Your callback function receives an object with the following properties:
  
  type: the event type ("resize").
  width: the viewer width.
  height: the viewer height.
- oncenterchange: Allows you to specify a function to be called when the center of the document is changed.
  Your callback function receives an object with the following properties:
  
  type: the event type ("centerchange").
  x: the X coordinate of the center of the document.
  y: the Y coordinate of the center of the document.
  scale: the zoom factor of the document.
- onzoomchange: Allows you to specify a function to be called when the zoom factor is changed.
  Your callback function receives an object with the following properties:
  
  type: the event type ("zoomchange").
  x: the X coordinate of the center of the document.
  y: the Y coordinate of the center of the document.
  scale: the zoom factor of the document.

Returns: true/false (true: successful, false: can't initialize the viewer).

Example

viewer.load('viewerDiv', 'sample.xml', '', '');

Example

viewer.load('viewerDiv', 'sample.xml', 'sample.offline.xml.js', 'sample.js', {x:0, y:0, zoom:100, width:'100%', height:'100%', controls:'all_buttons', onload:'onLoadFunc'});

//onload:'onLoadFunc', so you need to add a callback function to your JavaScript code:

function onLoadFunc(event)
{
alert(event.type);
}

resize (width, height)

Changes the size of the viewer.

Parameters:

width: The new width value in pixels.
height: The new height value in pixels.

Returns: Nothing.

Example

viewer.resize(500,500);

pan (x, y, speed) / pan (marker, speed)

Changes the center of the document to the given X-Y coordinates or to the marker's position.

Parameters:

x: The new X coordinate.
y: The new Y coordinate.
marker: The name of the marker/icon.
speed: The speed of the transition (1 to 100).

Returns: Nothing.

Example

viewer.pan(0, 0, 100);

Example

viewer.pan("marker1", 80);

zoom (zoomFactor, speed)

Changes the zoom factor of the document.

Parameters:

zoomFactor: The new zoom factor.
speed: The speed of the transition (1 to 100).

Returns: Nothing.

Example

viewer.zoom(200, 80);

zoomAndPan (x, y, zoomFactor, speed) / zoomAndPan (marker, zoomFactor, speed)

Changes the zoom factor and the center of the document (to the given X-Y coordinates or to the marker's position).

Parameters:

x: The new X coordinate.
y: The new Y coordinate.
marker: The name of the marker/icon.
zoomFactor: The new zoom factor.
speed: The speed of the transition (1 to 100).

Returns: Nothing.

Example

viewer.zoomAndPan(0, 0, 100, 80);

Example

viewer.zoomAndPan("marker1", 200, 80);

closePopup()

Allows you to close a modal HTML pop-up.

Parameters: None

Returns: Nothing.

Example

viewer.closePopup();

getZoom()

Returns the zoom factor of the document.

Parameters: None

Returns: Number.

Example

var z=viewer.getZoom();

getCenterX()

Returns the X coordinate of the center of the document.

Parameters: None

Returns: Number.

Example

var x=viewer.getCenterX();

getCenterY()

Returns the Y coordinate of the center of the document.

Parameters: None

Returns: Number.

Example

var y=viewer.getCenterY();

getStageW()

Returns the viewer width.

Parameters: None

Returns: Nothing.

Example

var w=viewer.getStageW();

getStageH()

Returns the viewer height.

Parameters: None

Returns: Nothing.

Example

var h=viewer.getStageH();