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