view/theme/diabook/js/jquery.mapquery.mqZoomSlider.js

   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. */
   5
   6
   7 /**
   8 #jquery.mapquery.mqZoomSlider.js
   9 The file containing the mqZoomSlider Widget
  10
  11 ### *$('selector')*.`mqZoomSlider([options])`
  12 _version added 0.1_
  13 ####**Description**: create a widget to show a zoom slider
  14
  15  + **options**:
  16   - **map**: the mapquery instance
  17
  18 >Returns: widget
  19
  20
  21 The mqZoomSlider widget allows us to display a vertical zoom slider.
  22
  23
  24      $('#zoomslider').mqZoomSlider({
  25         map: '#map'
  26      });
  27
  28  */
  29 (function($) {
  30 $.template('mqZoomSlider',
  31     '<div class="mq-zoomslider ui-widget ui-helper-clearfix ">'+
  32     '<div class="mq-zoomslider-slider"></div>'+
  33     '</div>');
  34
  35 $.widget("mapQuery.mqZoomSlider", {
  36     options: {
  37         // The MapQuery instance
  38         map: undefined
  39
  40     },
  41     _create: function() {
  42         var map;
  43         var zoom;
  44         var numzoomlevels;
  45         var self = this;
  46         var element = this.element;
  47
  48         //get the mapquery object
  49         map = $(this.options.map).data('mapQuery');
  50
  51         $.tmpl('mqZoomSlider').appendTo(element);
  52
  53         numzoomlevels = map.options.numZoomLevels;
  54         $(".mq-zoomslider-slider", element).slider({
  55            max: numzoomlevels,
  56            min:2,
  57            orientation: 'vertical',
  58            step: 1,
  59            value: numzoomlevels - map.center().zoom,
  60            slide: function(event, ui) {
  61                map.center({zoom:numzoomlevels-ui.value});
  62            },
  63            change: function(event, ui) {
  64                map.center({zoom:numzoomlevels-ui.value});
  65            }
  66        });
  67        map.bind("zoomend",
  68             {widget:self,map:map,control:element},
  69             self._onZoomEnd);
  70
  71     },
  72     _destroy: function() {
  73         this.element.removeClass(' ui-widget ui-helper-clearfix ' +
  74                                  'ui-corner-all')
  75             .empty();
  76     },
  77     _zoomEnd: function (element,map) {
  78         var slider = element.find('.mq-zoomslider-slider');
  79         slider.slider('value',map.options.numZoomLevels-map.center().zoom);
  80     },
  81     _onZoomEnd: function(evt) {
  82         evt.data.widget._zoomEnd(evt.data.control,evt.data.map);
  83     }
  84 });
  85 })(jQuery);