5debb1b075ce8c6c934c882ba471e910ddb44db7
[rails.git] / app / assets / javascripts / export.js
1 function startExport(sidebarHtml) {
2   var vectors,
3       box,
4       transform,
5       markerLayer,
6       markerControl,
7       epsg4326 = new OpenLayers.Projection("EPSG:4326"),
8       epsg900913 = new OpenLayers.Projection("EPSG:900913");
9
10   vectors = new OpenLayers.Layer.Vector("Vector Layer", {
11     displayInLayerSwitcher: false
12   });
13   map.addLayer(vectors);
14
15   box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
16     handlerOptions: {
17       sides: 4,
18       snapAngle: 90,
19       irregular: true,
20       persist: true
21     }
22   });
23   box.handler.callbacks.done = endDrag;
24   map.addControl(box);
25
26   transform = new OpenLayers.Control.TransformFeature(vectors, {
27     rotate: false,
28     irregular: true
29   });
30   transform.events.register("transformcomplete", transform, transformComplete);
31   map.addControl(transform);
32
33   map.events.register("moveend", map, mapMoved);
34   map.events.register("changebaselayer", map, htmlUrlChanged);
35
36   $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
37   $("#sidebar_content").html(sidebarHtml);
38
39   $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
40
41   $("#drag_box").click(startDrag);
42
43   $("#add_marker").click(startMarker);
44
45   $("#format_osm,#format_mapnik,#format_html").click(formatChanged);
46
47   $("#mapnik_scale").change(mapnikSizeChanged);
48
49   openSidebar();
50
51   if (map.baseLayer.name == "Mapnik") {
52     $("#format_mapnik").prop("checked", true);
53   }
54
55   formatChanged();
56   setBounds(map.getExtent());
57
58   $("#viewanchor").removeClass("active");
59   $("#exportanchor").addClass("active");
60
61   $("#sidebar").one("closed", function () {
62     $("#viewanchor").addClass("active");
63     $("#exportanchor").removeClass("active");
64
65     clearBox();
66     clearMarker();
67     map.events.unregister("moveend", map, mapMoved);
68     map.events.unregister("changebaselayer", map, htmlUrlChanged);
69     map.removeLayer(vectors);
70   });
71
72   function getMercatorBounds() {
73     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
74                                        $("#maxlon").val(), $("#maxlat").val());
75
76     return bounds.transform(epsg4326, epsg900913);
77   }
78
79   function boundsChanged() {
80     var bounds = getMercatorBounds();
81
82     map.events.unregister("moveend", map, mapMoved);
83     map.zoomToExtent(bounds);
84
85     clearBox();
86     drawBox(bounds);
87
88     validateControls();
89     mapnikSizeChanged();
90   }
91
92   function startDrag() {
93     $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box'));
94
95     clearBox();
96     box.activate();
97   };
98
99   function endDrag(bbox) {
100     var bounds = bbox.getBounds();
101
102     map.events.unregister("moveend", map, mapMoved);
103     setBounds(bounds);
104     drawBox(bounds);
105     box.deactivate();
106     validateControls();
107
108     $("#drag_box").html(I18n.t('export.start_rjs.manually_select'));
109   }
110
111   function transformComplete(event) {
112     setBounds(event.feature.geometry.bounds);
113     validateControls();
114   }
115
116   function startMarker() {
117     $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
118
119     if (!markerLayer) {
120       markerLayer = new OpenLayers.Layer.Vector("",{
121         displayInLayerSwitcher: false,
122         style: {
123           externalGraphic: OpenLayers.Util.getImageLocation("marker.png"),
124           graphicXOffset: -10.5,
125           graphicYOffset: -25,
126           graphicWidth: 21,
127           graphicHeight: 25
128         }
129       });
130       map.addLayer(markerLayer);
131
132       markerControl = new OpenLayers.Control.DrawFeature(markerLayer, OpenLayers.Handler.Point);
133       map.addControl(markerControl);
134
135       markerLayer.events.on({ "featureadded": endMarker });
136     }
137
138     markerLayer.destroyFeatures();
139     markerControl.activate();
140
141     return false;
142   }
143
144   function endMarker(event) {
145     markerControl.deactivate();
146
147     $("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
148     $("#marker_inputs").show();
149
150     var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326);
151
152     $("#marker_lon").val(geom.x.toFixed(5));
153     $("#marker_lat").val(geom.y.toFixed(5));
154
155     htmlUrlChanged();
156   }
157
158   function clearMarker() {
159     $("#marker_lon,#marker_lat").val("");
160     $("#marker_inputs").hide();
161     $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
162
163     if (markerLayer) {
164       markerControl.destroy();
165       markerLayer.destroy();
166       markerLayer = null;
167       markerControl = null;
168     }
169   }
170
171   function mapMoved() {
172     setBounds(map.getExtent());
173     validateControls();
174   }
175
176   function setBounds(bounds) {
177     var toPrecision = zoomPrecision(map.getZoom());
178
179     bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
180
181     $("#minlon").val(toPrecision(bounds.left));
182     $("#minlat").val(toPrecision(bounds.bottom));
183     $("#maxlon").val(toPrecision(bounds.right));
184     $("#maxlat").val(toPrecision(bounds.top));
185
186     mapnikSizeChanged();
187     htmlUrlChanged();
188   }
189
190   function clearBox() {
191     transform.deactivate();
192     vectors.destroyFeatures();
193   }
194
195   function drawBox(bounds) {
196     var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
197
198     vectors.addFeatures(feature);
199     transform.setFeature(feature);
200   }
201
202   function validateControls() {
203     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
204
205     if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
206       $("#export_osm_too_large").show();
207     } else {
208       $("#export_osm_too_large").hide();
209     }
210
211     var max_scale = maxMapnikScale();
212     var disabled = true;
213
214     if ($("#format_osm").prop("checked")) {
215       disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
216     } else if ($("#format_mapnik").prop("checked")) {
217       disabled = $("#mapnik_scale").val() < max_scale;
218     }
219
220     $("#export_commit").prop("disabled", disabled);
221     $("#mapnik_max_scale").html(roundScale(max_scale));
222   }
223
224   function htmlUrlChanged() {
225     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
226     var layerName = map.baseLayer.keyid;
227     var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&amp;layer=" + layerName;
228     var markerUrl = "";
229
230     if ($("#marker_lat").val() && $("#marker_lon").val()) {
231       markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
232       url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
233     }
234
235     var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
236
237     // Create "larger map" link
238     var center = bounds.getCenterLonLat();
239
240     bounds.transform(epsg4326, epsg900913);
241     var zoom = map.getZoomForExtent(bounds);
242
243     var layers = getMapLayers();
244
245     var text = I18n.t('export.start_rjs.view_larger_map');
246     var escaped = [];
247
248     for (var i = 0; i < text.length; ++i) {
249       var c = text.charCodeAt(i);
250       escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
251     }
252
253     html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&amp;lon='+center.lon+'&amp;zoom='+zoom+'&amp;layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
254
255     $("#export_html_text").val(html);
256
257     if ($("#format_html").prop("checked")) {
258       $("#export_html_text").prop("selected", true);
259     }
260   }
261
262   function formatChanged() {
263     $("#export_commit").show();
264
265     if ($("#format_osm").prop("checked")) {
266       $("#export_osm").show();
267     } else {
268       $("#export_osm").hide();
269     }
270
271     if ($("#format_mapnik").prop("checked")) {
272       $("#mapnik_scale").val(roundScale(map.getScale()));
273       $("#export_mapnik").show();
274
275       mapnikSizeChanged();
276     } else {
277       $("#export_mapnik").hide();
278     }
279
280     if ($("#format_html").prop("checked")) {
281       $("#export_html").show();
282       $("#export_commit").hide();
283       $("#export_html_text").prop("selected", true);
284     } else {
285       $("#export_html").hide();
286
287       clearMarker();
288     }
289
290     validateControls();
291   }
292
293   function maxMapnikScale() {
294     var bounds = getMercatorBounds();
295
296     return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
297   }
298
299   function mapnikImageSize(scale) {
300     var bounds = getMercatorBounds();
301
302     return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
303                                Math.round(bounds.getHeight() / scale / 0.00028));
304   }
305
306   function roundScale(scale) {
307     var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
308
309     return precision * Math.ceil(scale / precision);
310   }
311
312   function mapnikSizeChanged() {
313     var size = mapnikImageSize($("#mapnik_scale").val());
314
315     $("#mapnik_image_width").html(size.w);
316     $("#mapnik_image_height").html(size.h);
317
318     validateControls();
319   }
320 }