JAVASCRIPT 24
Google.js Guest on 1st May 2021 03:41:35 PM
  1. /*
  2.  * Google layer using Google Maps API
  3.  */
  4.  
  5. /* global google: true */
  6.  
  7. L.Google = L.Layer.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.             var _this = this;
  28.  
  29.             this._ready = L.Google.isGoogleMapsReady();
  30.  
  31.             L.Util.setOptions(this, options);
  32.  
  33.             this._googleApiPromise = this._ready ? Promise.resolve(window.google) : L.Google.createGoogleApiPromise();
  34.  
  35.             this._googleApiPromise
  36.             .then(function () {
  37.                   _this._ready = true;
  38.                   _this._initMapObject();
  39.                   _this._update();
  40.             });
  41.  
  42.             this._type = type || 'SATELLITE';
  43.       },
  44.  
  45.       onAdd: function (map, insertAtTheBottom) {
  46.             var _this = this;
  47.             this._googleApiPromise
  48.             .then(function () {
  49.                   _this._map = map;
  50.                   _this._insertAtTheBottom = insertAtTheBottom;
  51.  
  52.                   // create a container div for tiles
  53.                   _this._initContainer();
  54.                   _this._initMapObject();
  55.  
  56.                   // set up events
  57.                   map.on('viewreset', _this._reset, _this);
  58.  
  59.                   _this._limitedUpdate = L.Util.throttle(_this._update, 150, _this);
  60.                   map.on('move', _this._update, _this);
  61.  
  62.                   map.on('zoomanim', _this._handleZoomAnim, _this);
  63.  
  64.                   // 20px instead of 1em to avoid a slight overlap with google's attribution
  65.                   map._controlCorners.bottomright.style.marginBottom = '20px';
  66.  
  67.                   _this._reset();
  68.                   _this._update();
  69.             });
  70.       },
  71.  
  72.       onRemove: function (map) {
  73.             map._container.removeChild(this._container);
  74.  
  75.             map.off('viewreset', this._reset, this);
  76.  
  77.             map.off('move', this._update, this);
  78.  
  79.             map.off('zoomanim', this._handleZoomAnim, this);
  80.  
  81.             map._controlCorners.bottomright.style.marginBottom = '0em';
  82.       },
  83.  
  84.       getAttribution: function () {
  85.             return this.options.attribution;
  86.       },
  87.  
  88.       setOpacity: function (opacity) {
  89.             this.options.opacity = opacity;
  90.             if (opacity < 1) {
  91.                   L.DomUtil.setOpacity(this._container, opacity);
  92.             }
  93.       },
  94.  
  95.       setElementSize: function (e, size) {
  96.             e.style.width = size.x + 'px';
  97.             e.style.height = size.y + 'px';
  98.       },
  99.  
  100.       _initContainer: function () {
  101.             var tilePane = this._map._container,
  102.                   first = tilePane.firstChild;
  103.  
  104.             if (!this._container) {
  105.                   this._container = L.DomUtil.create('div', 'leaflet-google-layer');
  106.                   this._container.id = '_GMapContainer_' + L.Util.stamp(this);
  107.                   this._container.style.zIndex = 'auto';
  108.             }
  109.  
  110.             tilePane.insertBefore(this._container, first);
  111.  
  112.             this.setOpacity(this.options.opacity);
  113.             this.setElementSize(this._container, this._map.getSize());
  114.       },
  115.  
  116.       _initMapObject: function () {
  117.             if (!this._ready || !this._container) return;
  118.             this._google_center = new google.maps.LatLng(0, 0);
  119.             var map = new google.maps.Map(this._container, {
  120.                   center: this._google_center,
  121.                   zoom: 0,
  122.                   tilt: 0,
  123.                   mapTypeId: google.maps.MapTypeId[this._type],
  124.                   disableDefaultUI: true,
  125.                   keyboardShortcuts: false,
  126.                   draggable: false,
  127.                   disableDoubleClickZoom: true,
  128.                   scrollwheel: false,
  129.                   streetViewControl: false,
  130.                   styles: this.options.mapOptions.styles,
  131.                   backgroundColor: this.options.mapOptions.backgroundColor
  132.             });
  133.  
  134.             var _this = this;
  135.             this._reposition = google.maps.event.addListenerOnce(map, 'center_changed',
  136.                   function () { _this.onReposition(); });
  137.             this._google = map;
  138.            
  139.             if (gsValues['map_traffic'] == true)
  140.             {
  141.                   var traffic_layer = new google.maps.TrafficLayer();
  142.                   traffic_layer.setMap(map);
  143.             }
  144.  
  145.             google.maps.event.addListenerOnce(map, 'idle',
  146.                   function () { _this._checkZoomLevels(); });
  147.             google.maps.event.addListenerOnce(map, 'tilesloaded',
  148.                   function () { _this.fire('load'); });
  149.             // Reporting that map-object was initialized.
  150.             this.fire('MapObjectInitialized', {mapObject: map});
  151.       },
  152.  
  153.       _checkZoomLevels: function () {
  154.             //setting the zoom level on the Google map may result in a different zoom level than the one requested
  155.             //(it won't go beyond the level for which they have data).
  156.             // verify and make sure the zoom levels on both Leaflet and Google maps are consistent
  157.             if ((this._map.getZoom() !== undefined) && (this._google.getZoom() !== Math.round(this._map.getZoom()))) {
  158.                   //zoom levels are out of sync. Set the leaflet zoom level to match the google one
  159.                   this._map.setZoom(this._google.getZoom());
  160.             }
  161.       },
  162.  
  163.       _reset: function () {
  164.             this._initContainer();
  165.       },
  166.  
  167.       _update: function () {
  168.             if (!this._google) return;
  169.             this._resize();
  170.  
  171.             var center = this._map.getCenter();
  172.             var _center = new google.maps.LatLng(center.lat, center.lng);
  173.  
  174.             this._google.setCenter(_center);
  175.             if (this._map.getZoom() !== undefined)
  176.                   this._google.setZoom(Math.round(this._map.getZoom()));
  177.  
  178.             this._checkZoomLevels();
  179.       },
  180.  
  181.       _resize: function () {
  182.             var size = this._map.getSize();
  183.             if (this._container.style.width === size.x &&
  184.                         this._container.style.height === size.y)
  185.                   return;
  186.             this.setElementSize(this._container, size);
  187.             this.onReposition();
  188.       },
  189.  
  190.  
  191.       _handleZoomAnim: function (e) {
  192.             var center = e.center;
  193.             var _center = new google.maps.LatLng(center.lat, center.lng);
  194.  
  195.             this._google.setCenter(_center);
  196.             this._google.setZoom(Math.round(e.zoom));
  197.       },
  198.  
  199.  
  200.       onReposition: function () {
  201.             if (!this._google) return;
  202.             google.maps.event.trigger(this._google, 'resize');
  203.       }
  204. });
  205.  
  206. L.Google.isGoogleMapsReady = function () {
  207.       return !!window.google && !!window.google.maps && !!window.google.maps.Map;
  208. };
  209.  
  210. // backwards compat
  211. L.Google.asyncInitialize = L.Google.isGoogleMapsReady;
  212.  
  213. L.Google.maxApiChecks = 10;
  214.  
  215. L.Google.apiCheckIntervalMilliSecs = 500;
  216.  
  217. L.Google.createGoogleApiPromise = function () {
  218.       var checkCounter = 0;
  219.       var intervalId = null;
  220.  
  221.       return new Promise(function (resolve, reject) {
  222.             intervalId = setInterval(function () {
  223.                   if (checkCounter >= L.Google.maxApiChecks && !L.Google.isGoogleMapsReady()) {
  224.                         clearInterval(intervalId);
  225.                         return reject(new Error('window.google not found after max attempts'));
  226.                   }
  227.                   if (L.Google.isGoogleMapsReady()) {
  228.                         clearInterval(intervalId);
  229.                         return resolve(window.google);
  230.                   }
  231.                   checkCounter++;
  232.             }, L.Google.apiCheckIntervalMilliSecs);
  233.       });
  234. };

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.