refactored js

Author: richardhughes

Gruntfile.js

@@ -2,7 +2,7 @@ module.exports = function(grunt) {
 
     grunt.initConfig({
         uglify: {
-            my_target: {
+            build: {
                 files: [{
                     expand: true,
                     cwd: 'src/',

build/ExportMap.min.js

@@ -7,22 +7,27 @@
 
 OpenLayers.Control.ExportMap = OpenLayers.Class(OpenLayers.Control, {
     /**
-     * 
+     *
      */
     type: OpenLayers.Control.TYPE_BUTTON,
+    canvasComponents: [],
+    tileData: {},
     /**
      * A function to trigger the ExportMap functions.
-     * 
+     *
      * @public
-     * @param {HTMLElement|undefined} canvas The HTML Element of the Canvas 
+     * @param {HTMLElement|undefined} canvas The HTML Element of the Canvas
      * @returns {HTMLElement} The generated canvas element
      */
-    trigger: function(canvas) {
-        
+    trigger: function (canvas) {
+
         this.setUpCanvas(canvas);
-        
+
+        this.canvasComponents = [];
+        this.tileData = {};
+
         // Create this function so we can use it later on
-        Object.size = function(object) {
+        Object.size = function (object) {
             var size = 0;
             for (var key in object) {
                 if (object.hasOwnProperty(key)) {
@@ -31,46 +36,34 @@ OpenLayers.Control.ExportMap = OpenLayers.Class(OpenLayers.Control, {
             }
             return size;
         };
-        
-        
-        var layers = this.map.layers;
-        this.canvasComponents = new Array();
-        this.tileData = {};
-        // Loop through all the layers on the map and export the layers which are visible
-        for (var layerCount = 0; layerCount < layers.length; layerCount++) {
-            var layer = layers[layerCount];
-            if (layer.visibility === false) {
-                // We shouldnt export layers that are invisible
-                continue;
-            }
-            
-            if (layer instanceof OpenLayers.Layer.Vector) {
-                this.exportVectorLayer(layer);
-            } else if (layer instanceof OpenLayers.Layer.Grid) {
-                this.exportGridLayer(layer);
-            } else {
-                // We cant export this type of layer
-                continue;
+
+        this.map.layers.forEach(function (layer) {
+            if (layer.visibility) {
+                if (layer instanceof OpenLayers.Layer.Vector) {
+                    this.exportVectorLayer(layer);
+                } else if (layer instanceof OpenLayers.Layer.Grid) {
+                    this.exportGridLayer(layer);
+                }
             }
-        }
-        
+        }.bind(this));
+
         return this.canvas;
     },
     /**
-     * A function to set up the canvas, if none are provided then we'll create 
+     * A function to set up the canvas, if none are provided then we'll create
      * a new canvas element
-     * 
+     *
      * @private
      * @param {type} canvas The canvas being used
      * @returns {undefined}
      */
-    setUpCanvas: function(canvas) {
+    setUpCanvas: function (canvas) {
         if (canvas === undefined) {
             this.canvas = document.createElement('canvas');
         } else {
             this.canvas = canvas;
         }
-        
+
         this.canvasContext = this.canvas.getContext('2d');
         this.canvas.width = this.map.viewPortDiv.clientWidth;
         this.canvas.height = this.map.viewPortDiv.clientHeight;
@@ -79,16 +72,16 @@ OpenLayers.Control.ExportMap = OpenLayers.Class(OpenLayers.Control, {
      * A function to export a Vector Layer onto the canvas. Due to stacking issues
      * canvas produced in this function are added to our canvasComponents array before
      * being added to the canvas at the end of execution
-     * 
+     *
      * @private
      * @param {<OpenLayers.Layer.Vector>} layer The layer to export
      * @returns {undefined}
      */
-    exportVectorLayer: function(layer) {
+    exportVectorLayer: function (layer) {
         if (!(layer.renderer instanceof OpenLayers.Renderer.Canvas)) {
             return;
         }
-        
+
         var canvasRenderer = layer.renderer;
         if (canvasRenderer.canvas !== null) {
             var canvasContext = canvasRenderer.canvas;
@@ -98,54 +91,54 @@ OpenLayers.Control.ExportMap = OpenLayers.Class(OpenLayers.Control, {
     /**
      * A function to export the Grid layer. We need to generate all the tiles for the layer
      * and then stitch them together onto the canvas.
-     * 
+     *
      * @private
      * @param {<OpenLayers.Layer.Grid>} layer The layer to export
      * @returns {undefined}
      */
-    exportGridLayer: function(layer) {
+    exportGridLayer: function (layer) {
         this.offsetX = parseInt(this.map.layerContainerDiv.style.left);
         this.offsetY = parseInt(this.map.layerContainerDiv.style.top);
         this.stitchTiles(layer);
     },
     /**
-     * This function calculates all the tiles on display and finds their positions 
+     * This function calculates all the tiles on display and finds their positions
      * relative to the other tiles.
-     * 
+     *
      * @private
      * @param {<OpenLayers.Layer.Grid>} layer The layer to export
      * @returns {undefined}
      */
-    stitchTiles: function(layer) {
+    stitchTiles: function (layer) {
         for (var gridIndex in layer.grid) {
             var grid = layer.grid[gridIndex];
             for (var tileIndex in grid) {
                 var tile = grid[tileIndex];
                 var url = layer.getURL(tile.bounds);
                 var tileXPosition = tile.position.x + this.offsetX;
                 var tileYPosition = tile.position.y + this.offsetY;
-                
+
                 if (this.tileData[url] === undefined) {
                     this.tileData[url] = {x: tileXPosition, y: tileYPosition};
                 }
-                
+
                 this.loadImage(url);
-                
             }
         }
     },
     /**
      * A function to load the tile image from a URL. When all the images have been loaded
      * it will proceed to draw the images on the canvas using the drawCanvasComponent function
-     * 
+     *
      * @private
      * @param {String} url
      * @returns {undefined}
      */
-    loadImage: function(url) {
+    loadImage: function (url) {
         var image = new Image();
         var that = this;
-        image.onload = function() {
+
+        image.onload = function () {
             var canvasComponents = that.canvasComponents;
             // Add the tile to the front of the array
             canvasComponents.unshift(this);
@@ -166,14 +159,14 @@ OpenLayers.Control.ExportMap = OpenLayers.Class(OpenLayers.Control, {
     },
     /**
      * Draws a canvas component onto the canvas context
-     * 
+     *
      * @private
      * @param {Canvas|Image} canvasComponent The Canvas or tile image being loaded on to the canvas
      * @param {integer} x The X coordinate of the image
      * @param {integer} y The Y coordinate of the image
      * @returns {undefined}
      */
-    drawCanvasComponent: function(canvasComponent, x, y) {
+    drawCanvasComponent: function (canvasComponent, x, y) {
         this.canvasContext.drawImage(canvasComponent, x, y);
     },
     CLASS_NAME: "OpenLayers.Control.ExportMap"

src/ExportMap.js

@@ -5,7 +5,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
-        <script src="../ExportMap.js" type="text/javascript"></script>
+        <script src="../build/ExportMap.min.js" type="text/javascript"></script>
         <link rel="stylesheet" href="style.css" type="text/css" />
         <script>
             var exportMapControl;