www/plugins/gis/lib/leaflet/plugins/Google.js

   1 /*
   2  * Google layer using Google Maps API
   3  */
   4
   5 /* global google: true */
   6
   7 L.Google = L.Class.extend({
   8         includes: L.Mixin.Events,
   9
  10         options: {
  11                 minZoom: 0,
  12                 maxZoom: 18,
  13                 tileSize: 256,
  14                 subdomains: 'abc',
  15                 errorTileUrl: '',
  16                 attribution: '',
  17                 opacity: 1,
  18                 continuousWorld: false,
  19                 noWrap: false,
  20                 mapOptions: {
  21                         backgroundColor: '#dddddd'
  22                 }
  23         },
  24
  25         // Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN
  26         initialize: function(type, options) {
  27                 L.Util.setOptions(this, options);
  28
  29                 this._ready = google.maps.Map !== undefined;
  30                 if (!this._ready) L.Google.asyncWait.push(this);
  31
  32                 this._type = type || 'SATELLITE';
  33         },
  34
  35         onAdd: function(map, insertAtTheBottom) {
  36                 this._map = map;
  37                 this._insertAtTheBottom = insertAtTheBottom;
  38
  39                 // create a container div for tiles
  40                 this._initContainer();
  41                 this._initMapObject();
  42
  43                 // set up events
  44                 map.on('viewreset', this._resetCallback, this);
  45
  46                 this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
  47                 map.on('move', this._update, this);
  48
  49                 map.on('zoomanim', this._handleZoomAnim, this);
  50
  51                 //20px instead of 1em to avoid a slight overlap with google's attribution
  52                 map._controlCorners.bottomright.style.marginBottom = '20px';
  53
  54                 this._reset();
  55                 this._update();
  56         },
  57
  58         onRemove: function(map) {
  59                 map._container.removeChild(this._container);
  60
  61                 map.off('viewreset', this._resetCallback, this);
  62
  63                 map.off('move', this._update, this);
  64
  65                 map.off('zoomanim', this._handleZoomAnim, this);
  66
  67                 map._controlCorners.bottomright.style.marginBottom = '0em';
  68         },
  69
  70         getAttribution: function() {
  71                 return this.options.attribution;
  72         },
  73
  74         setOpacity: function(opacity) {
  75                 this.options.opacity = opacity;
  76                 if (opacity < 1) {
  77                         L.DomUtil.setOpacity(this._container, opacity);
  78                 }
  79         },
  80
  81         setElementSize: function(e, size) {
  82                 e.style.width = size.x + 'px';
  83                 e.style.height = size.y + 'px';
  84         },
  85
  86         _initContainer: function() {
  87                 var tilePane = this._map._container,
  88                         first = tilePane.firstChild;
  89
  90                 if (!this._container) {
  91                         this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
  92                         this._container.id = '_GMapContainer_' + L.Util.stamp(this);
  93                         this._container.style.zIndex = 'auto';
  94                 }
  95
  96                 tilePane.insertBefore(this._container, first);
  97
  98                 this.setOpacity(this.options.opacity);
  99                 this.setElementSize(this._container, this._map.getSize());
 100         },
 101
 102         _initMapObject: function() {
 103                 if (!this._ready) return;
 104                 this._google_center = new google.maps.LatLng(0, 0);
 105                 var map = new google.maps.Map(this._container, {
 106                     center: this._google_center,
 107                     zoom: 0,
 108                     tilt: 0,
 109                     mapTypeId: google.maps.MapTypeId[this._type],
 110                     disableDefaultUI: true,
 111                     keyboardShortcuts: false,
 112                     draggable: false,
 113                     disableDoubleClickZoom: true,
 114                     scrollwheel: false,
 115                     streetViewControl: false,
 116                     styles: this.options.mapOptions.styles,
 117                     backgroundColor: this.options.mapOptions.backgroundColor
 118                 });
 119
 120                 var _this = this;
 121                 this._reposition = google.maps.event.addListenerOnce(map, 'center_changed',
 122                         function() { _this.onReposition(); });
 123                 this._google = map;
 124
 125                 google.maps.event.addListenerOnce(map, 'idle',
 126                         function() { _this._checkZoomLevels(); });
 127                 //Reporting that map-object was initialized.
 128                 this.fire('MapObjectInitialized', { mapObject: map });
 129         },
 130
 131         _checkZoomLevels: function() {
 132                 //setting the zoom level on the Google map may result in a different zoom level than the one requested
 133                 //(it won't go beyond the level for which they have data).
 134                 // verify and make sure the zoom levels on both Leaflet and Google maps are consistent
 135                 if (this._google.getZoom() !== this._map.getZoom()) {
 136                         //zoom levels are out of sync. Set the leaflet zoom level to match the google one
 137                         this._map.setZoom( this._google.getZoom() );
 138                 }
 139         },
 140
 141         _resetCallback: function(e) {
 142                 this._reset(e.hard);
 143         },
 144
 145         _reset: function(clearOldContainer) {
 146                 this._initContainer();
 147         },
 148
 149         _update: function(e) {
 150                 if (!this._google) return;
 151                 this._resize();
 152
 153                 var center = this._map.getCenter();
 154                 var _center = new google.maps.LatLng(center.lat, center.lng);
 155
 156                 this._google.setCenter(_center);
 157                 this._google.setZoom(Math.round(this._map.getZoom()));
 158
 159                 this._checkZoomLevels();
 160         },
 161
 162         _resize: function() {
 163                 var size = this._map.getSize();
 164                 if (this._container.style.width === size.x &&
 165                     this._container.style.height === size.y)
 166                         return;
 167                 this.setElementSize(this._container, size);
 168                 this.onReposition();
 169         },
 170
 171
 172         _handleZoomAnim: function (e) {
 173                 var center = e.center;
 174                 var _center = new google.maps.LatLng(center.lat, center.lng);
 175
 176                 this._google.setCenter(_center);
 177                 this._google.setZoom(Math.round(e.zoom));
 178         },
 179
 180
 181         onReposition: function() {
 182                 if (!this._google) return;
 183                 google.maps.event.trigger(this._google, 'resize');
 184         }
 185 });
 186
 187 L.Google.asyncWait = [];
 188 L.Google.asyncInitialize = function() {
 189         var i;
 190         for (i = 0; i < L.Google.asyncWait.length; i++) {
 191                 var o = L.Google.asyncWait[i];
 192                 o._ready = true;
 193                 if (o._container) {
 194                         o._initMapObject();
 195                         o._update();
 196                 }
 197         }
 198         L.Google.asyncWait = [];
 199 };