#Layout Preview Library
*layoutPreview* is a JS library that displays the preview of a surface (as defined in teh DjCoreServices API Layout module) in
a canvas.
It depends on
* *leaflet* JS library (http://leafletjs.com/) that provides the basic infrastructure to pana nd zoom, and manage layers. *LayoutPreview*
implements a `CanvasTileLayer` provider that provides the canvas with the coresponding surface preview requested by the leaflet map.
* *DjCoreServices* library to calculate the image views
The library creates an HTML5 canvas object and displays previews of DjCoreServices Surface objects.
To use th elibrary there are four 'steps' that habe to be followed:
1. Loading the required components: There are three libraries required tosupport the surface preview functionaity:
* *jQuery*: needed by DjCoreServices
* *Leaflet* (v0.7.0)
* *DjCoreServices*: when running on electron, this library is loaded using a require('DjCoreServices') statement. When running on a browser, the library is included
by referencing the coresponding js file from an scripy element
* *LayoutPreview*: you can use either the minimized or not minimized version of the library
2.- Initialize the preview library and create the preview object.
You need to inject the leaflet and DjCoreServices libraries as dependencies when the preview object is created
3. Attach the preview object to an html5 div element
This creates a canvas object inside the given div
4. Pass a surface to preview
Every time a new surface is passed to the preview object, the previous surface preview is removed, and teh zoom level and position are reset to the original state
##Sample Code
### initialization (on electron)
```html
Layout Preview Prototype v2.0
...
....
....
....
```
### usage
Preview a surface in the layout preview canvas
```javascript
// create a surface
var surface = DjCoreServices.Layout.nestLayout(....);
// preview the surface in the preview canvas
preview.newSurface(surface); // the surface is previewed in the canvas, in the original zoom level,
// (if there was a previous surface in the preview, it is removed)
```
Clean up the preview canvas
```javascript
preview.removeSurface(); // this leaves the preview canvas empty
```