app/views/export/_start.rhtml

   1 <% form_tag :action => 'next' do %>
   2
   3   <p class="export_heading">Area to Export</p>
   4
   5   <div class="export_bounds">
   6     <%= text_field('export', 'maxlat', { :size => 10, :class => "export_bound" }) %>
   7     <br/>
   8     <%= text_field('export', 'minlon', { :size => 10, :class => "export_bound" }) %>
   9     <%= text_field('export', 'maxlon', { :size => 10, :class => "export_bound" }) %>
  10     <br/>
  11     <%= text_field('export', 'minlat', { :size => 10, :class => "export_bound" }) %>
  12   </div>
  13
  14   <p class="export_heading">Format to Export</p>
  15
  16   <div class="export_details">
  17     <%= radio_button('export', 'format', 'osm' ) %>OpenStreetMap XML Data
  18     <br/>
  19     <%= radio_button('export', 'format', 'png' ) %>PNG Image
  20     <br/>
  21     <%= radio_button('export', 'format', 'pdf' ) %>PDF Document
  22     <br/>
  23     <%= radio_button('export', 'format', 'svg' ) %>SVG Document
  24   </div>
  25
  26   <div id="export_osm">
  27     <p class="export_heading">Licence</p>
  28
  29     <div class="export_details">
  30       <p>OSM license agreement blah blah blah...</p>
  31     </div
  32   </div>
  33
  34   <div id="export_mapnik">
  35     <p class="export_heading">Options</p>
  36
  37     <div class="export_details">
  38       <p>Scale 1 : <%= text_field('export', 'mapnik_scale', { :size => 10 }) %></p>
  39     </div>
  40   </div>
  41
  42 <% end %>
  43
  44 <script type="text/javascript">
  45   <!--
  46   var box;
  47
  48   function startExport() {
  49     var vectors = new OpenLayers.Layer.Vector("Vector Layer", {
  50       displayInLayerSwitcher: false,
  51     });
  52     map.addLayer(vectors);
  53
  54     box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
  55       handlerOptions: {
  56         keyMask: OpenLayers.Handler.MOD_CTRL,
  57         sides: 4,
  58         snapAngle: 90,
  59         irregular: true,
  60         persist: true,
  61         callbacks: { done: boxComplete }
  62       }
  63     });
  64     map.addControl(box);
  65
  66     box.activate();
  67
  68     map.events.register("moveend", map, mapMoved);
  69     updateRegion(map.getExtent());
  70   }
  71
  72   function formatChanged() {
  73     if ($("export_format_osm").checked) {
  74       $("export_osm").style.display = "inline";
  75     } else {
  76       $("export_osm").style.display = "none";
  77     }
  78
  79     if ($("export_format_png").checked ||
  80         $("export_format_pdf").checked ||
  81         $("export_format_svg").checked) {
  82       $("export_mapnik").style.display = "inline";
  83     } else {
  84       $("export_mapnik").style.display = "none";
  85     }
  86   }
  87
  88   $("export_format_osm").onclick = function() { formatChanged() };
  89   $("export_format_png").onclick = function() { formatChanged() };
  90   $("export_format_pdf").onclick = function() { formatChanged() };
  91   $("export_format_svg").onclick = function() { formatChanged() };
  92
  93   function boundsChanged() {
  94     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
  95     var bounds = new OpenLayers.Bounds($("export_minlon").value,
  96                                        $("export_minlat").value,
  97                                        $("export_maxlon").value,
  98                                        $("export_maxlat").value);
  99
 100     bounds.transform(epsg4326, map.getProjectionObject());
 101
 102     map.events.unregister("moveend", map, mapMoved);
 103     map.zoomToExtent(bounds);
 104
 105     box.handler.clear();
 106     box.handler.feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
 107     box.handler.layer.addFeatures([box.handler.feature], [box.handler.style]);
 108     box.handler.layer.drawFeature(box.handler.feature, box.handler.style);
 109   }
 110
 111   $("export_maxlat").onchange = function() { boundsChanged() };
 112   $("export_minlon").onchange = function() { boundsChanged() };
 113   $("export_maxlon").onchange = function() { boundsChanged() };
 114   $("export_minlat").onchange = function() { boundsChanged() };
 115
 116   function mapMoved() {
 117     updateRegion(map.getExtent());
 118   }
 119
 120   function boxComplete(box) {
 121     map.events.unregister("moveend", map, mapMoved);
 122     updateRegion(box.getBounds());
 123   }
 124
 125   function updateRegion(bounds) {
 126     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
 127     var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
 128
 129     bounds.transform(map.getProjectionObject(), epsg4326);
 130
 131     $("export_maxlat").value = Math.round(bounds.top * decimals) / decimals;
 132     $("export_minlon").value = Math.round(bounds.left * decimals) / decimals;
 133     $("export_maxlon").value = Math.round(bounds.right * decimals) / decimals;
 134     $("export_minlat").value = Math.round(bounds.bottom * decimals) / decimals;
 135
 136     if (bounds.getWidth() * bounds.getHeight() > 0.25) {
 137       $("export_format_osm").disabled = true;
 138       $("export_format_osm").checked = false;
 139
 140       formatChanged();
 141     } else {
 142       $("export_format_osm").disabled = false;
 143     }
 144   }
 145
 146   startExport();
 147   // -->
 148 </script>