]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.share.js
Hide search marker/object when closing sidebar
[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     marker.on('dragend', movedMarker);
210     map.on('move', movedMap);
211     map.on('moveend layeradd layerremove', update);
212
213     options.sidebar.addPane($ui);
214
215     $ui
216       .on('hide', hidden);
217
218     function hidden() {
219       map.removeLayer(marker);
220       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
221       locationFilter.disable();
222       update();
223     }
224
225     function toggle(e) {
226       e.stopPropagation();
227       e.preventDefault();
228
229       $('#mapnik_scale').val(getScale());
230       marker.setLatLng(map.getCenter());
231
232       update();
233       options.sidebar.togglePane($ui, button);
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 update() {
278       var bounds = map.getBounds();
279
280       $('#link_marker')
281         .prop('checked', map.hasLayer(marker));
282
283       $('#image_filter')
284         .prop('checked', locationFilter.isEnabled());
285
286       // Link / Embed
287
288       $('#short_input').val(map.getShortUrl(marker));
289       $('#long_input').val(map.getUrl(marker));
290       $('#short_link').attr('href', map.getShortUrl(marker));
291       $('#long_link').attr('href', map.getUrl(marker));
292
293       var params = {
294         bbox: bounds.toBBoxString(),
295         layer: map.getMapBaseLayerId()
296       };
297
298       if (map.hasLayer(marker)) {
299         var latLng = marker.getLatLng().wrap();
300         params.marker = latLng.lat + ',' + latLng.lng;
301       }
302
303       $('#embed_html').val(
304         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
305           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
306           '" style="border: 1px solid black"></iframe><br/>' +
307           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '</a></small>');
308
309       // Image
310
311       if (locationFilter.isEnabled()) {
312         bounds = locationFilter.getBounds();
313       }
314
315       var scale = $("#mapnik_scale").val(),
316         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
317                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
318         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
319
320       $('#mapnik_minlon').val(bounds.getWest());
321       $('#mapnik_minlat').val(bounds.getSouth());
322       $('#mapnik_maxlon').val(bounds.getEast());
323       $('#mapnik_maxlat').val(bounds.getNorth());
324
325       if (scale < maxScale) {
326         scale = roundScale(maxScale);
327         $("#mapnik_scale").val(scale);
328       }
329
330       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
331       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
332     }
333
334     function select() {
335       $(this).select();
336     }
337
338     function getScale() {
339       var bounds = map.getBounds(),
340         centerLat = bounds.getCenter().lat,
341         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
342         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
343         pixelsPerMeter = map.getSize().x / meters,
344         metersPerPixel = 1 / (92 * 39.3701);
345       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
346     }
347
348     function roundScale(scale) {
349       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
350       return precision * Math.ceil(scale / precision);
351     }
352
353     return $container[0];
354   };
355
356   return control;
357 };