a6b10821e868bc603da0b1d4e0bff296cf945818
[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     // Geo URI
124
125     var $geoUriSection = $('<div>')
126       .attr('class', 'section share-geo-uri')
127       .appendTo($ui);
128
129     $('<h4>')
130       .text(I18n.t('javascripts.share.geo_uri'))
131       .appendTo($geoUriSection);
132
133     $('<div>')
134       .appendTo($geoUriSection)
135       .append($('<a>')
136         .attr('id', 'geo_uri'));
137
138     // Image
139
140     var $imageSection = $('<div>')
141       .attr('class', 'section share-image')
142       .appendTo($ui);
143
144     $('<h4>')
145       .text(I18n.t('javascripts.share.image'))
146       .appendTo($imageSection);
147
148     $('<div>')
149       .attr('id', 'export-warning')
150       .attr('class', 'deemphasize')
151       .text(I18n.t('javascripts.share.only_standard_layer'))
152       .appendTo($imageSection);
153
154     $form = $('<form>')
155       .attr('id', 'export-image')
156       .attr('class', 'standard-form')
157       .attr('action', '/export/finish')
158       .attr('method', 'post')
159       .appendTo($imageSection);
160
161     $('<div>')
162       .attr('class', 'form-row')
163       .appendTo($form)
164       .append(
165         $('<label>')
166           .attr('for', 'image_filter')
167           .append(
168             $('<input>')
169               .attr('id', 'image_filter')
170               .attr('type', 'checkbox')
171               .bind('change', toggleFilter))
172           .append(I18n.t('javascripts.share.custom_dimensions')));
173
174     $('<div>')
175       .attr('class', 'form-row')
176       .appendTo($form)
177       .append(
178         $('<label>')
179           .attr('for', 'mapnik_format')
180           .text(I18n.t('javascripts.share.format')))
181       .append($('<select>')
182         .attr('name', 'mapnik_format')
183         .attr('id', 'mapnik_format')
184         .append($('<option>').val('png').text('PNG').prop('selected', true))
185         .append($('<option>').val('jpeg').text('JPEG'))
186         .append($('<option>').val('svg').text('SVG'))
187         .append($('<option>').val('pdf').text('PDF')));
188
189     $('<div>')
190       .attr('class', 'form-row')
191       .appendTo($form)
192       .append($('<label>')
193         .attr('for', 'mapnik_scale')
194         .text(I18n.t('javascripts.share.scale')))
195       .append('1 : ')
196       .append($('<input>')
197         .attr('name', 'mapnik_scale')
198         .attr('id', 'mapnik_scale')
199         .attr('type', 'text')
200         .on('change', update));
201
202     ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
203       $('<input>')
204         .attr('id', 'mapnik_' + name)
205         .attr('name', name)
206         .attr('type', 'hidden')
207         .appendTo($form);
208     });
209
210     $('<input>')
211       .attr('name', 'format')
212       .attr('value', 'mapnik')
213       .attr('type', 'hidden')
214       .appendTo($form);
215
216     $('<p>')
217       .attr('class', 'deemphasize')
218       .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
219       .appendTo($form);
220
221     $('<input>')
222       .attr('type', 'submit')
223       .attr('value', I18n.t('javascripts.share.download'))
224       .appendTo($form);
225
226     locationFilter
227       .on('change', update)
228       .addTo(map);
229
230     marker.on('dragend', movedMarker);
231     map.on('move', movedMap);
232     map.on('moveend layeradd layerremove', update);
233
234     options.sidebar.addPane($ui);
235
236     $ui
237       .on('hide', hidden);
238
239     function hidden() {
240       map.removeLayer(marker);
241       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
242       locationFilter.disable();
243       update();
244     }
245
246     function toggle(e) {
247       e.stopPropagation();
248       e.preventDefault();
249
250       $('#mapnik_scale').val(getScale());
251       marker.setLatLng(map.getCenter());
252
253       update();
254       options.sidebar.togglePane($ui, button);
255       $('.leaflet-control .control-button').tooltip('hide');
256     }
257
258     function toggleMarker() {
259       if ($(this).is(':checked')) {
260         marker.setLatLng(map.getCenter());
261         map.addLayer(marker);
262         map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
263       } else {
264         map.removeLayer(marker);
265         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
266       }
267       update();
268     }
269
270     function toggleFilter() {
271       if ($(this).is(':checked')) {
272         locationFilter.setBounds(map.getBounds().pad(-0.2));
273         locationFilter.enable();
274       } else {
275         locationFilter.disable();
276       }
277       update();
278     }
279
280     function movedMap() {
281       marker.setLatLng(map.getCenter());
282       update();
283     }
284
285     function movedMarker() {
286       if (map.hasLayer(marker)) {
287         map.off('move', movedMap);
288         map.on('moveend', updateOnce);
289         map.panTo(marker.getLatLng());
290       }
291     }
292
293     function updateOnce() {
294       map.off('moveend', updateOnce);
295       map.on('move', movedMap);
296       update();
297     }
298
299     function escapeHTML(string) {
300       var htmlEscapes = {
301         '&': '&amp;',
302         '<': '&lt;',
303         '>': '&gt;',
304         '"': '&quot;',
305         "'": '&#x27;'
306       };
307       return string === null ? '' : (string + '').replace(/[&<>"']/g, function(match) {
308         return htmlEscapes[match];
309       });
310     }
311
312     function update() {
313       var bounds = map.getBounds();
314
315       $('#link_marker')
316         .prop('checked', map.hasLayer(marker));
317
318       $('#image_filter')
319         .prop('checked', locationFilter.isEnabled());
320
321       // Link / Embed
322
323       $('#short_input').val(map.getShortUrl(marker));
324       $('#long_input').val(map.getUrl(marker));
325       $('#short_link').attr('href', map.getShortUrl(marker));
326       $('#long_link').attr('href', map.getUrl(marker));
327
328       var params = {
329         bbox: bounds.toBBoxString(),
330         layer: map.getMapBaseLayerId()
331       };
332
333       if (map.hasLayer(marker)) {
334         var latLng = marker.getLatLng().wrap();
335         params.marker = latLng.lat + ',' + latLng.lng;
336       }
337
338       $('#embed_html').val(
339         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
340           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
341           '" style="border: 1px solid black"></iframe><br/>' +
342           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '">' +
343           escapeHTML(I18n.t('javascripts.share.view_larger_map')) + '</a></small>');
344
345       // Geo URI
346
347       $('#geo_uri')
348         .attr('href', map.getGeoUri(marker))
349         .html(map.getGeoUri(marker));
350
351       // Image
352
353       if (locationFilter.isEnabled()) {
354         bounds = locationFilter.getBounds();
355       }
356
357       var scale = $("#mapnik_scale").val(),
358         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
359                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
360         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
361
362       $('#mapnik_minlon').val(bounds.getWest());
363       $('#mapnik_minlat').val(bounds.getSouth());
364       $('#mapnik_maxlon').val(bounds.getEast());
365       $('#mapnik_maxlat').val(bounds.getNorth());
366
367       if (scale < maxScale) {
368         scale = roundScale(maxScale);
369         $("#mapnik_scale").val(scale);
370       }
371
372       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
373       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
374
375       if (map.getMapBaseLayerId() === 'mapnik') {
376         $('#export-image').show();
377         $('#export-warning').hide();
378       } else {
379         $('#export-image').hide();
380         $('#export-warning').show();
381       }
382     }
383
384     function select() {
385       $(this).select();
386     }
387
388     function getScale() {
389       var bounds = map.getBounds(),
390         centerLat = bounds.getCenter().lat,
391         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
392         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
393         pixelsPerMeter = map.getSize().x / meters,
394         metersPerPixel = 1 / (92 * 39.3701);
395       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
396     }
397
398     function roundScale(scale) {
399       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
400       return precision * Math.ceil(scale / precision);
401     }
402
403     return $container[0];
404   };
405
406   return control;
407 };