From a76761e4d2abeb11d8b33248ab1ac1218265f113 Mon Sep 17 00:00:00 2001 From: feliciaan Date: Thu, 11 Dec 2014 10:20:19 +0100 Subject: [PATCH] Updated google maps library --- leaflet-google.js | 158 ++++++++++++++++++++++++++++++---------------- map.html | 2 + 2 files changed, 107 insertions(+), 53 deletions(-) diff --git a/leaflet-google.js b/leaflet-google.js index 3dddd2c..f1c1dbc 100644 --- a/leaflet-google.js +++ b/leaflet-google.js @@ -1,6 +1,8 @@ /* - * L.TileLayer is used for standard xyz-numbered tile layers. - */ +* Google layer using Google Maps API +*/ + +/* global google: true */ L.Google = L.Class.extend({ includes: L.Mixin.Events, @@ -15,13 +17,19 @@ L.Google = L.Class.extend({ opacity: 1, continuousWorld: false, noWrap: false, + mapOptions: { + backgroundColor: '#dddddd' + } }, - // Possible types: SATELLITE, ROADMAP, HYBRID + // Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN initialize: function(type, options) { L.Util.setOptions(this, options); - this._type = google.maps.MapTypeId[type || 'ROADMAP']; + this._ready = google.maps.Map !== undefined; + if (!this._ready) L.Google.asyncWait.push(this); + + this._type = type || 'SATELLITE'; }, onAdd: function(map, insertAtTheBottom) { @@ -37,20 +45,26 @@ L.Google = L.Class.extend({ this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this); map.on('move', this._update, this); - //map.on('moveend', this._update, this); + + map.on('zoomanim', this._handleZoomAnim, this); + + //20px instead of 1em to avoid a slight overlap with google's attribution + map._controlCorners.bottomright.style.marginBottom = '20px'; this._reset(); this._update(); }, onRemove: function(map) { - this._map._container.removeChild(this._container); - //this._container = null; + map._container.removeChild(this._container); - this._map.off('viewreset', this._resetCallback, this); + map.off('viewreset', this._resetCallback, this); - this._map.off('move', this._update, this); - //this._map.off('moveend', this._update, this); + map.off('move', this._update, this); + + map.off('zoomanim', this._handleZoomAnim, this); + + map._controlCorners.bottomright.style.marginBottom = '0em'; }, getAttribution: function() { @@ -64,45 +78,64 @@ L.Google = L.Class.extend({ } }, + setElementSize: function(e, size) { + e.style.width = size.x + 'px'; + e.style.height = size.y + 'px'; + }, + _initContainer: function() { - var tilePane = this._map._container - first = tilePane.firstChild; + var tilePane = this._map._container, + first = tilePane.firstChild; if (!this._container) { this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left'); - this._container.id = "_GMapContainer"; + this._container.id = '_GMapContainer_' + L.Util.stamp(this); + this._container.style.zIndex = 'auto'; } - if (true) { - tilePane.insertBefore(this._container, first); + tilePane.insertBefore(this._container, first); - this.setOpacity(this.options.opacity); - var size = this._map.getSize(); - this._container.style.width = size.x + 'px'; - this._container.style.height = size.y + 'px'; - } + this.setOpacity(this.options.opacity); + this.setElementSize(this._container, this._map.getSize()); }, _initMapObject: function() { + if (!this._ready) return; this._google_center = new google.maps.LatLng(0, 0); var map = new google.maps.Map(this._container, { - center: this._google_center, - zoom: 0, - mapTypeId: this._type, - disableDefaultUI: true, - keyboardShortcuts: false, - draggable: false, - disableDoubleClickZoom: true, - scrollwheel: false, - streetViewControl: false + center: this._google_center, + zoom: 0, + tilt: 0, + mapTypeId: google.maps.MapTypeId[this._type], + disableDefaultUI: true, + keyboardShortcuts: false, + draggable: false, + disableDoubleClickZoom: true, + scrollwheel: false, + streetViewControl: false, + styles: this.options.mapOptions.styles, + backgroundColor: this.options.mapOptions.backgroundColor }); var _this = this; - this._reposition = google.maps.event.addListenerOnce(map, "center_changed", - function() { _this.onReposition(); }); - - map.backgroundColor = '#ff0000'; + this._reposition = google.maps.event.addListenerOnce(map, 'center_changed', + function() { _this.onReposition(); }); this._google = map; + + google.maps.event.addListenerOnce(map, 'idle', + function() { _this._checkZoomLevels(); }); + //Reporting that map-object was initialized. + this.fire('MapObjectInitialized', { mapObject: map }); + }, + + _checkZoomLevels: function() { + //setting the zoom level on the Google map may result in a different zoom level than the one requested + //(it won't go beyond the level for which they have data). + // verify and make sure the zoom levels on both Leaflet and Google maps are consistent + if (this._google.getZoom() !== this._map.getZoom()) { + //zoom levels are out of sync. Set the leaflet zoom level to match the google one + this._map.setZoom( this._google.getZoom() ); + } }, _resetCallback: function(e) { @@ -113,35 +146,54 @@ L.Google = L.Class.extend({ this._initContainer(); }, - _update: function() { + _update: function(e) { + if (!this._google) return; this._resize(); - var bounds = this._map.getBounds(); - var ne = bounds.getNorthEast(); - var sw = bounds.getSouthWest(); - var google_bounds = new google.maps.LatLngBounds( - new google.maps.LatLng(sw.lat, sw.lng), - new google.maps.LatLng(ne.lat, ne.lng) - ); var center = this._map.getCenter(); var _center = new google.maps.LatLng(center.lat, center.lng); this._google.setCenter(_center); - this._google.setZoom(this._map.getZoom()); - //this._google.fitBounds(google_bounds); + this._google.setZoom(Math.round(this._map.getZoom())); + + this._checkZoomLevels(); }, _resize: function() { var size = this._map.getSize(); - if (this._container.style.width == size.x && - this._container.style.height == size.y) + if (this._container.style.width === size.x && + this._container.style.height === size.y) return; - this._container.style.width = size.x + 'px'; - this._container.style.height = size.y + 'px'; - google.maps.event.trigger(this._google, "resize"); - }, + this.setElementSize(this._container, size); + this.onReposition(); + }, - onReposition: function() { - //google.maps.event.trigger(this._google, "resize"); - } -}); + + _handleZoomAnim: function (e) { + var center = e.center; + var _center = new google.maps.LatLng(center.lat, center.lng); + + this._google.setCenter(_center); + this._google.setZoom(Math.round(e.zoom)); + }, + + + onReposition: function() { + if (!this._google) return; + google.maps.event.trigger(this._google, 'resize'); + } + }); + + L.Google.asyncWait = []; + L.Google.asyncInitialize = function() { + var i; + for (i = 0; i < L.Google.asyncWait.length; i++) { + var o = L.Google.asyncWait[i]; + o._ready = true; + if (o._container) { + o._initMapObject(); + o._update(); + } + } + L.Google.asyncWait = []; + }; diff --git a/map.html b/map.html index c47fca2..5c1cd0e 100644 --- a/map.html +++ b/map.html @@ -3,6 +3,8 @@ Blokken in Gent + +