1 /* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
2 * full list of contributors). Published under the MIT license.
3 * See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
4 * full text of the license. */
8 #jquery.mapquery.mqZoomSlider.js
9 The file containing the mqZoomSlider Widget
11 ### *$('selector')*.`mqZoomSlider([options])`
13 ####**Description**: create a widget to show a zoom slider
16 - **map**: the mapquery instance
21 The mqZoomSlider widget allows us to display a vertical zoom slider.
24 $('#zoomslider').mqZoomSlider({
30 $.template('mqZoomSlider',
31 '<div class="mq-zoomslider ui-widget ui-helper-clearfix ">'+
32 '<div class="mq-zoomslider-slider"></div>'+
35 $.widget("mapQuery.mqZoomSlider", {
37 // The MapQuery instance
46 var element = this.element;
48 //get the mapquery object
49 map = $(this.options.map).data('mapQuery');
51 $.tmpl('mqZoomSlider').appendTo(element);
53 numzoomlevels = map.options.numZoomLevels;
54 $(".mq-zoomslider-slider", element).slider({
57 orientation: 'vertical',
59 value: numzoomlevels - map.center().zoom,
60 slide: function(event, ui) {
61 map.center({zoom:numzoomlevels-ui.value});
63 change: function(event, ui) {
64 map.center({zoom:numzoomlevels-ui.value});
68 {widget:self,map:map,control:element},
72 _destroy: function() {
73 this.element.removeClass(' ui-widget ui-helper-clearfix ' +
77 _zoomEnd: function (element,map) {
78 var slider = element.find('.mq-zoomslider-slider');
79 slider.slider('value',map.options.numZoomLevels-map.center().zoom);
81 _onZoomEnd: function(evt) {
82 evt.data.widget._zoomEnd(evt.data.control,evt.data.map);