d43bc8ad26665dd64ead12a4962f5655a1324f12
[rails.git] / app / assets / javascripts / leaflet.share.js
1 L.OSM.share = function (options) {
2   var control = L.control(options),
3     marker = L.marker([0, 0], {draggable: true}),
4     locationFilter = new L.LocationFilter({
5       enableButton: false,
6       adjustButton: false
7     });
8
9   control.onAdd = function (map) {
10     var $container = $('<div>')
11       .attr('class', 'control-share');
12
13     var button = $('<a>')
14       .attr('class', 'control-button')
15       .attr('href', '#')
16       .attr('title', 'Share')
17       .html('<span class="icon share"></span>')
18       .on('click', toggle)
19       .appendTo($container);
20
21     var $ui = $('<div>')
22       .attr('class', 'share-ui');
23
24     $('<div>')
25       .attr('class', 'sidebar_heading')
26       .appendTo($ui)
27       .append(
28         $('<a>')
29           .text(I18n.t('javascripts.close'))
30           .attr('class', 'sidebar_close')
31           .attr('href', '#')
32           .bind('click', toggle))
33       .append(
34         $('<h4>')
35           .text(I18n.t('javascripts.share.title')));
36
37     // Link / Embed
38
39     var $linkSection = $('<div>')
40       .attr('class', 'section share-link')
41       .appendTo($ui);
42
43     $('<h4>')
44       .text(I18n.t('javascripts.share.link'))
45       .appendTo($linkSection);
46
47     var $form = $('<form>')
48       .attr('class', 'standard-form')
49       .appendTo($linkSection);
50
51     $('<div>')
52       .attr('class', 'form-row')
53       .appendTo($form)
54       .append(
55         $('<label>')
56           .attr('for', 'link_marker')
57           .append(
58             $('<input>')
59               .attr('id', 'link_marker')
60               .attr('type', 'checkbox')
61               .bind('change', toggleMarker))
62           .append(I18n.t('javascripts.share.include_marker')));
63
64     $('<div>')
65       .attr('class', 'share-tabs')
66       .appendTo($form)
67       .append($('<a>')
68         .attr('class', 'active')
69         .attr('for', 'long_input')
70         .attr('id', 'long_link')
71         .text(I18n.t('javascripts.share.long_link')))
72       .append($('<a>')
73         .attr('for', 'short_input')
74         .attr('id', 'short_link')
75         .text(I18n.t('javascripts.share.short_link')))
76       .append($('<a>')
77         .attr('for', 'embed_html')
78         .attr('href', '#')
79         .text(I18n.t('javascripts.share.embed')))
80       .on('click', 'a', function(e) {
81         e.preventDefault();
82         var id = '#' + $(this).attr('for');
83         $linkSection.find('.share-tabs a')
84           .removeClass('active');
85         $(this).addClass('active');
86         $linkSection.find('.share-tab')
87           .hide();
88         $linkSection.find('.share-tab:has(' + id + ')')
89           .show()
90           .find('input, textarea')
91           .select();
92       });
93
94     $('<div>')
95       .attr('class', 'form-row share-tab')
96       .css('display', 'block')
97       .appendTo($form)
98       .append($('<input>')
99         .attr('id', 'long_input')
100         .attr('type', 'text')
101         .on('click', select));
102
103     $('<div>')
104       .attr('class', 'form-row share-tab')
105       .appendTo($form)
106       .append($('<input>')
107         .attr('id', 'short_input')
108         .attr('type', 'text')
109         .on('click', select));
110
111     $('<div>')
112       .attr('class', 'form-row share-tab')
113       .appendTo($form)
114       .append(
115         $('<textarea>')
116           .attr('id', 'embed_html')
117           .on('click', select))
118       .append(
119         $('<p>')
120           .attr('class', 'deemphasize')
121           .text(I18n.t('javascripts.share.paste_html'))
122           .appendTo($linkSection));
123
124     // Image
125
126     var $imageSection = $('<div>')
127       .attr('class', 'section share-image')
128       .appendTo($ui);
129
130     $('<h4>')
131       .text(I18n.t('javascripts.share.image'))
132       .appendTo($imageSection);
133
134     $form = $('<form>')
135       .attr('class', 'standard-form')
136       .attr('action', '/export/finish')
137       .attr('method', 'post')
138       .appendTo($imageSection);
139
140     $('<div>')
141       .attr('class', 'form-row')
142       .appendTo($form)
143       .append(
144         $('<label>')
145           .attr('for', 'image_filter')
146           .append(
147             $('<input>')
148               .attr('id', 'image_filter')
149               .attr('type', 'checkbox')
150               .bind('change', toggleFilter))
151           .append(I18n.t('javascripts.share.custom_dimensions')));
152
153     $('<div>')
154       .attr('class', 'form-row')
155       .appendTo($form)
156       .append(
157         $('<label>')
158           .attr('for', 'mapnik_format')
159           .text(I18n.t('javascripts.share.format')))
160       .append($('<select>')
161         .attr('name', 'mapnik_format')
162         .attr('id', 'mapnik_format')
163         .append($('<option>').val('png').text('PNG').prop('selected', true))
164         .append($('<option>').val('jpeg').text('JPEG'))
165         .append($('<option>').val('svg').text('SVG'))
166         .append($('<option>').val('pdf').text('PDF')));
167
168     $('<div>')
169       .attr('class', 'form-row')
170       .appendTo($form)
171       .append($('<label>')
172         .attr('for', 'mapnik_scale')
173         .text(I18n.t('javascripts.share.scale')))
174       .append('1 : ')
175       .append($('<input>')
176         .attr('name', 'mapnik_scale')
177         .attr('id', 'mapnik_scale')
178         .attr('type', 'text')
179         .on('change', update));
180
181     ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
182       $('<input>')
183         .attr('id', 'mapnik_' + name)
184         .attr('name', name)
185         .attr('type', 'hidden')
186         .appendTo($form);
187     });
188
189     $('<input>')
190       .attr('name', 'format')
191       .attr('value', 'mapnik')
192       .attr('type', 'hidden')
193       .appendTo($form);
194
195     $('<p>')
196       .attr('class', 'deemphasize')
197       .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
198       .appendTo($form);
199
200     $('<input>')
201       .attr('type', 'submit')
202       .attr('value', I18n.t('javascripts.share.download'))
203       .appendTo($form);
204
205     locationFilter
206       .on('change', update)
207       .addTo(map);
208
209     map.on('moveend layeradd layerremove', update);
210     marker.on('dragend', update);
211
212     options.sidebar.addPane($ui);
213
214     $ui
215       .on('hide', hidden);
216
217     function hidden() {
218       map.removeLayer(marker);
219       locationFilter.disable();
220       update();
221     }
222
223     function toggle(e) {
224       e.stopPropagation();
225       e.preventDefault();
226
227       $('#mapnik_scale').val(getScale());
228       marker.setLatLng(map.getCenter());
229
230       update();
231       options.sidebar.togglePane($ui, button);
232     }
233
234     function toggleMarker() {
235       if ($(this).is(':checked')) {
236         marker.setLatLng(map.getCenter());
237         map.addLayer(marker);
238       } else {
239         map.removeLayer(marker);
240       }
241       update();
242     }
243
244     function toggleFilter() {
245       if ($(this).is(':checked')) {
246         if (!locationFilter.getBounds().isValid()) {
247           locationFilter.setBounds(map.getBounds().pad(-0.2));
248         }
249
250         locationFilter.enable();
251       } else {
252         locationFilter.disable();
253       }
254       update();
255     }
256
257     function update() {
258       if (map.hasLayer(marker)) {
259         map.panTo(marker.getLatLng());
260       }
261
262       var bounds = map.getBounds();
263
264       $('#link_marker')
265         .prop('checked', map.hasLayer(marker));
266
267       $('#image_filter')
268         .prop('checked', locationFilter.isEnabled());
269
270       // Link / Embed
271
272       $('#short_input').val(map.getShortUrl(marker));
273       $('#long_input').val(map.getUrl(marker));
274       $('#short_link').attr('href', map.getShortUrl(marker));
275       $('#long_link').attr('href', map.getUrl(marker));
276
277       var params = {
278         bbox: bounds.toBBoxString(),
279         layer: map.getMapBaseLayerId()
280       };
281
282       if (map.hasLayer(marker)) {
283         params.marker = marker.getLatLng().lat + ',' + marker.getLatLng().lng;
284       }
285
286       $('#embed_html').val(
287         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
288           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
289           '" style="border: 1px solid black"></iframe><br/>' +
290           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '</a></small>');
291
292       // Image
293
294       if (locationFilter.isEnabled()) {
295         bounds = locationFilter.getBounds();
296       }
297
298       var scale = $("#mapnik_scale").val(),
299         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
300                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
301         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
302
303       $('#mapnik_minlon').val(bounds.getWest());
304       $('#mapnik_minlat').val(bounds.getSouth());
305       $('#mapnik_maxlon').val(bounds.getEast());
306       $('#mapnik_maxlat').val(bounds.getNorth());
307
308       if (scale < maxScale) {
309         scale = roundScale(maxScale);
310         $("#mapnik_scale").val(scale);
311       }
312
313       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
314       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
315     }
316
317     function select() {
318       $(this).select();
319     }
320
321     function getScale() {
322       var bounds = map.getBounds(),
323         centerLat = bounds.getCenter().lat,
324         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
325         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
326         pixelsPerMeter = map.getSize().x / meters,
327         metersPerPixel = 1 / (92 * 39.3701);
328       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
329     }
330
331     function roundScale(scale) {
332       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
333       return precision * Math.ceil(scale / precision);
334     }
335
336     return $container[0];
337   };
338
339   return control;
340 };