a1953a1302b11dbf1d7b0c691f16c4803f232be9
[rails.git] / app / assets / javascripts / export.js
1 function startExport(sidebarHtml) {
2   var vectors;
3   var box;
4   var transform;
5   var markerLayer;
6   var markerControl;
7
8   vectors = new OpenLayers.Layer.Vector("Vector Layer", {
9     displayInLayerSwitcher: false
10   });
11   map.addLayer(vectors);
12
13   box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
14     handlerOptions: {
15       sides: 4,
16       snapAngle: 90,
17       irregular: true,
18       persist: true
19     }
20   });
21   box.handler.callbacks.done = endDrag;
22   map.addControl(box);
23
24   transform = new OpenLayers.Control.TransformFeature(vectors, {
25     rotate: false,
26     irregular: true
27   });
28   transform.events.register("transformcomplete", transform, transformComplete);
29   map.addControl(transform);
30
31   map.events.register("moveend", map, mapMoved);
32   map.events.register("changebaselayer", map, htmlUrlChanged);
33
34   $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
35   $("#sidebar_content").html(sidebarHtml);
36
37   $("#maxlat").change(boundsChanged);
38   $("#minlon").change(boundsChanged);
39   $("#maxlon").change(boundsChanged);
40   $("#minlat").change(boundsChanged);
41
42   $("#drag_box").click(startDrag);
43
44   $("#add_marker").click(startMarker);
45
46   $("#format_osm").click(formatChanged);
47   $("#format_mapnik").click(formatChanged);
48   $("#format_html").click(formatChanged);
49
50   $("#mapnik_scale").change(mapnikSizeChanged);
51
52   openSidebar({ onclose: stopExport });
53
54   if (map.baseLayer.name == "Mapnik") {
55     $("#format_mapnik").prop("checked", true);
56   }
57
58   formatChanged();
59   setBounds(map.getExtent());
60
61   $("#viewanchor").removeClass("active");
62   $("#exportanchor").addClass("active");
63
64   function stopExport() {
65     $("#viewanchor").addClass("active");
66     $("#exportanchor").removeClass("active");
67
68     clearBox();
69     clearMarker();
70     map.events.unregister("moveend", map, mapMoved);
71     map.events.unregister("changebaselayer", map, htmlUrlChanged);
72     map.removeLayer(vectors);
73   }
74
75   function boundsChanged() {
76     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
77     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(),
78                                        $("#maxlon").val(), $("#maxlat").val());
79
80     bounds.transform(epsg4326, map.getProjectionObject());
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 epsg4326 = new OpenLayers.Projection("EPSG:4326");
151     var epsg900913 = new OpenLayers.Projection("EPSG:900913");
152     var geom = event.feature.geometry.clone().transform(epsg900913, epsg4326);
153
154     $("#marker_lon").val(geom.x.toFixed(5));
155     $("#marker_lat").val(geom.y.toFixed(5));
156
157     htmlUrlChanged();
158   }
159
160   function clearMarker() {
161     $("#marker_lon").val("");
162     $("#marker_lat").val("");
163     $("#marker_inputs").hide();
164     $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
165
166     if (markerLayer) {
167       markerControl.destroy();
168       markerLayer.destroy();
169       markerLayer = null;
170       markerControl = null;
171     }
172   }
173
174   function mapMoved() {
175     setBounds(map.getExtent());
176     validateControls();
177   }
178
179   function setBounds(bounds) {
180     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
181     var decimals = Math.pow(10, Math.floor(map.getZoom() / 3));
182
183     bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326);
184
185     $("#minlon").val(Math.round(bounds.left * decimals) / decimals);
186     $("#minlat").val(Math.round(bounds.bottom * decimals) / decimals);
187     $("#maxlon").val(Math.round(bounds.right * decimals) / decimals);
188     $("#maxlat").val(Math.round(bounds.top * decimals) / decimals);
189
190     mapnikSizeChanged();
191     htmlUrlChanged();
192   }
193
194   function clearBox() {
195     transform.deactivate();
196     vectors.destroyFeatures();
197   }
198
199   function drawBox(bounds) {
200     var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());
201
202     vectors.addFeatures(feature);
203     transform.setFeature(feature);
204   }
205
206   function validateControls() {
207     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
208
209     if (bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA) {
210       $("#export_osm_too_large").show();
211     } else {
212       $("#export_osm_too_large").hide();
213     }
214
215     var max_scale = maxMapnikScale();
216     var disabled = true;
217
218     if ($("#format_osm").prop("checked")) {
219       disabled = bounds.getWidth() * bounds.getHeight() > OSM.MAX_REQUEST_AREA;
220     } else if ($("#format_mapnik").prop("checked")) {
221       disabled = $("#mapnik_scale").val() < max_scale;
222     }
223
224     $("#export_commit").prop("disabled", disabled);
225     $("#mapnik_max_scale").html(roundScale(max_scale));
226   }
227
228   function htmlUrlChanged() {
229     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
230     var layerName = map.baseLayer.keyid;
231     var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBOX() + "&amp;layer=" + layerName;
232     var markerUrl = "";
233
234     if ($("#marker_lat").val() && $("#marker_lon").val()) {
235       markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
236       url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
237     }
238
239     var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
240
241     // Create "larger map" link
242     var center = bounds.getCenterLonLat();
243     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
244     var epsg900913 = new OpenLayers.Projection("EPSG:900913");
245
246     bounds.transform(epsg4326, epsg900913);
247     var zoom = map.getZoomForExtent(bounds);
248
249     var layers = getMapLayers();
250
251     var text = I18n.t('export.start_rjs.view_larger_map');
252     var escaped = [];
253
254     for (var i = 0; i < text.length; ++i) {
255       var c = text.charCodeAt(i);
256       escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
257     }
258
259     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>';
260
261     $("#export_html_text").val(html);
262
263     if ($("#format_html").prop("checked")) {
264       $("#export_html_text").prop("selected", true);
265     }
266   }
267
268   function formatChanged() {
269     $("#export_commit").show();
270
271     if ($("#format_osm").prop("checked")) {
272       $("#export_osm").show();
273     } else {
274       $("#export_osm").hide();
275     }
276
277     if ($("#format_mapnik").prop("checked")) {
278       $("#mapnik_scale").val(roundScale(map.getScale()));
279       $("#export_mapnik").show();
280     } else {
281       $("#export_mapnik").hide();
282     }
283
284     if ($("#format_html").prop("checked")) {
285       $("#export_html").show();
286       $("#export_commit").hide();
287       $("#export_html_text").prop("selected", true);
288     } else {
289       $("#export_html").hide();
290
291       clearMarker();
292     }
293
294     validateControls();
295   }
296
297   function maxMapnikScale() {
298     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
299     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
300     var epsg900913 = new OpenLayers.Projection("EPSG:900913");
301
302     bounds.transform(epsg4326, epsg900913);
303
304     return Math.floor(Math.sqrt(bounds.getWidth() * bounds.getHeight() / 0.3136));
305   }
306
307   function mapnikImageSize(scale) {
308     var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), $("#maxlon").val(), $("#maxlat").val());
309     var epsg4326 = new OpenLayers.Projection("EPSG:4326");
310     var epsg900913 = new OpenLayers.Projection("EPSG:900913");
311
312     bounds.transform(epsg4326, epsg900913);
313
314     return new OpenLayers.Size(Math.round(bounds.getWidth() / scale / 0.00028),
315                                Math.round(bounds.getHeight() / scale / 0.00028));
316   }
317
318   function roundScale(scale) {
319     var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
320
321     return precision * Math.ceil(scale / precision);
322   }
323
324   function mapnikSizeChanged() {
325     var size = mapnikImageSize($("#mapnik_scale").val());
326
327     $("#mapnik_image_width").html(size.w);
328     $("#mapnik_image_height").html(size.h);
329
330     validateControls();
331   }
332 }