Plugin print preview map demo

src/GeositeFramework/js/Map.js

@@ -284,7 +284,9 @@ require(['use!Geosite',
                 result = [];
             _.each(services, function (service) {
                 var serviceInfo = view.model.serviceInfos[service.id];
-                if (serviceInfo && service.visible && serviceInfo.pluginObject.showServiceLayersInLegend) {
+                if (serviceInfo && service.visible &&
+                    serviceInfo.pluginObject.showServiceLayersInLegend &&
+                    serviceInfo.visibleLayers) {
                     service.visibleLayers.sort(function(a, b) { return a - b; });
                     _.each(service.visibleLayers, function(layerId) {
                         var layer,

src/GeositeFramework/sample_plugins/identify_point/html/print-form.html

@@ -13,4 +13,8 @@
         <input type="checkbox" name="checkbox" value="value" id="add-layer">
         Add Sample Layer
     </label>
+    <div class="print-preview">
+        Adjust the map to fit your desired printing area.
+        <div class="print-preview-map-container"></div>
+    </div>
 </form>

src/GeositeFramework/sample_plugins/identify_point/main.css

@@ -15,14 +15,4 @@ hr {
 
 .sample img {
     display: none;
-}
-
-#north-arrow-img {
-    height: 60px;
-    width: 100px;
-}
-
-#logo-img {
-    height: 60px;
-    width: 200px;
 }

src/GeositeFramework/sample_plugins/identify_point/main.js

@@ -18,7 +18,7 @@ define(["dojo/_base/declare", "framework/PluginBase", "dojo/text!./template.html
             size: 'small',
             hasCustomPrint: true,
             usePrintModal: true,
-            printModalSize: [500, 200],
+            printModalSize: [500, 475],
             infographic: [500, 300],
 
             initialize: function(frameworkParameters) {
@@ -102,6 +102,11 @@ define(["dojo/_base/declare", "framework/PluginBase", "dojo/text!./template.html
             prePrintModal: function(preModalDeferred, $printSandbox, $modalSandbox, mapObject) {
                 $.get('sample_plugins/identify_point/html/print-form.html', function(html) {
                     $modalSandbox.append(html);
+
+                    var mapNode = $("#map-0").detach();
+                    $(mapNode).appendTo('.print-preview-map-container');
+                    mapObject.resize(true);
+                    mapObject.reposition();
                 }).then(preModalDeferred.resolve());
 
                 // Append optional images to print sandbox, which are hidden by default
@@ -143,8 +148,8 @@ define(["dojo/_base/declare", "framework/PluginBase", "dojo/text!./template.html
                 window.setTimeout(function() {
                     if (mapObject.updating) {
                         var delayedPrint = mapObject.on('update-end', function() {
-                                delayedPrint.remove();
-                                postModalDeferred.resolve();
+                            delayedPrint.remove();
+                            postModalDeferred.resolve();
                         });
                     } else {
                         postModalDeferred.resolve();

src/GeositeFramework/sample_plugins/identify_point/print.css

@@ -17,7 +17,69 @@
     }
 
     #map-0 {
-       height: 10in;
-       width: 10in;
+       height: 8in;
+       width: 8in;
     }
+}
+
+#north-arrow-img {
+    height: 60px;
+    width: 70px;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+
+#logo-img {
+    height: 60px;
+    width: 200px;
+}
+
+/**
+    Rules related to the print preview map:
+    1. Overrides to the print modal to fit the map
+    2. Overrides to the map to better fit in the modal
+**/
+
+.print-preview {
+    width: 100%;
+    margin-top: 10px;
+}
+
+.print-preview-map-container {
+    width: 100%;
+    height: 100%;
+}
+
+.print-preview-map-container #map-0.map {
+    position: relative;
+    height: 325px;
+}
+
+.popover-section {
+    height: 400px;
+}
+
+.print-modal-confirm-container {
+    position: initial;
+}
+
+.map-tools {
+    display: none;
+}
+
+.basemap-selector {
+    display: none;
+}
+
+#map-0_zoom_slider {
+    top: 10px;
+    right: 10px;
+}
+
+.print-modal-confirm-container {
+    position: relative !important;
+    margin-top: 30px;
+    bottom: 0px !important;
+    left: 0px !important;
 }