Display the size of the image mapnik will produce.

diff --git a/app/views/export/_start.rhtml b/app/views/export/_start.rhtml
index 501274b461bf051d1b073cc3e9727b2195a9b88f..969b8efc7352daae9b7d224330267c16106584b0 100644 (file)
--- a/app/views/export/_start.rhtml
+++ b/app/views/export/_start.rhtml
@@ -39,7 +39,8 @@
 
     <div class="export_details">
       <p>Format <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"], ["Postscript", "ps"]], "png")) %></p>
-      <p>Scale 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> <span class="export_hint">(max 1 : <span id="max_scale"></span>)</span></p>
+      <p>Scale 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> <span class="export_hint">(max 1 : <span id="mapnik_max_scale"></span>)</span></p>
+      <p>Image Size <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span></p>
     </div>
   </div>
 

diff --git a/app/views/export/start.rjs b/app/views/export/start.rjs
index 4323cf7f4ce4a8215d35ec23845b059551f4baa5..5e4a2b91cb949e04d2798cd02b9658a27439598e 100644 (file)
--- a/app/views/export/start.rjs
+++ b/app/views/export/start.rjs
@@ -61,6 +61,8 @@ page << <<EOJ
     if ($("format_mapnik").checked) {
       $("mapnik_scale").value = roundScale(map.getScale());
       $("export_mapnik").style.display = "inline";
+
+      mapnikScaleChanged();
     } else {
       $("export_mapnik").style.display = "none";
     }
@@ -95,6 +97,8 @@ page << <<EOJ
     box.handler.feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
     box.handler.layer.addFeatures([box.handler.feature], [box.handler.style]);
     box.handler.layer.drawFeature(box.handler.feature, box.handler.style);
+
+    mapnikSizeChanged();
   }
 
   $("maxlat").onchange = boundsChanged;
@@ -134,7 +138,9 @@ page << <<EOJ
     var max_zoom = maxOsmarenderZoom();
     var max_scale = maxMapnikScale();
 
-    $("max_scale").innerHTML = roundScale(max_scale);
+    $("mapnik_max_scale").innerHTML = roundScale(max_scale);
+
+    mapnikSizeChanged();
 
     for (var o = 0; o < $("osmarender_zoom").options.length; o++) {
       var option = $("osmarender_zoom").options[o];
@@ -161,6 +167,17 @@ page << <<EOJ
     return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
   }
 
+  function mapnikImageSize(scale) {
+    var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);
+    var epsg4326 = new OpenLayers.Projection("EPSG:4326");
+    var epsg900913 = new OpenLayers.Projection("EPSG:900913");
+
+    bounds.transform(epsg4326, epsg900913);
+
+    return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
+                               Math.round(bounds.getHeight() / scale / 0.00028));
+  }
+
   function maxOsmarenderZoom() {
     var bounds = new OpenLayers.Bounds($("minlon").value, $("minlat").value, $("maxlon").value, $("maxlat").value);
     var xzoom = Math.LOG2E * Math.log(2000 * 1.40625 / bounds.getWidth());
@@ -177,7 +194,16 @@ page << <<EOJ
     return precision * Math.ceil(scale / precision);
   }
 
-  function validateScale() {
+  function mapnikSizeChanged() {
+    var size = mapnikImageSize($("mapnik_scale").value);
+
+    $("mapnik_image_width").innerHTML = size.w;
+    $("mapnik_image_height").innerHTML = size.h;
+  }
+
+  function mapnikScaleChanged() {
+    mapnikSizeChanged();
+
     if ($("mapnik_scale").value < maxMapnikScale()) {
       $("export_commit").disabled = true;
     } else {
@@ -185,7 +211,7 @@ page << <<EOJ
     }
   }
 
-  $("mapnik_scale").onchange = validateScale;
+  $("mapnik_scale").onchange = mapnikScaleChanged;
 
   startExport();
 EOJ