Stefan Breunig 2c07d2b803 only update the GMaps part that require updating.
Even when the zoom doesn’t change by repeatedly calling setZoom,
Firefox shows network operations. These can be avoided, although
this doesn’t improve the performance much when using the GMaps
layers.
2013-03-12 10:12:31 +01:00

159 lines
4.3 KiB
JavaScript

/*
* L.TileLayer is used for standard xyz-numbered tile layers.
*/
L.Google = L.Class.extend({
includes: L.Mixin.Events,
options: {
minZoom: 0,
maxZoom: 18,
tileSize: 256,
subdomains: 'abc',
errorTileUrl: '',
attribution: '',
opacity: 1,
continuousWorld: false,
noWrap: false,
},
// Possible types: SATELLITE, ROADMAP, HYBRID, INGRESS
initialize: function(type, options, styles) {
L.Util.setOptions(this, options);
if(type === 'INGRESS') {
type = 'ROADMAP';
this._styles = [{featureType:"all", elementType:"all", stylers:[{visibility:"on"}, {hue:"#131c1c"}, {saturation:"-50"}, {invert_lightness:true}]}, {featureType:"water", elementType:"all", stylers:[{visibility:"on"}, {hue:"#005eff"}, {invert_lightness:true}]}, {featureType:"poi", stylers:[{visibility:"off"}]}, {featureType:"transit", elementType:"all", stylers:[{visibility:"off"}]}];
} else {
this._styles = null;
}
this._type = google.maps.MapTypeId[type || 'SATELLITE'];
},
onAdd: function(map, insertAtTheBottom) {
this._map = map;
this._insertAtTheBottom = insertAtTheBottom;
// create a container div for tiles
this._initContainer();
this._initMapObject();
this._map.options.zoomAnimation = false;
// set up events
//~ map.on('viewreset', this._resetCallback, this);
map.on('move', this._update, this);
this._reset();
this._update();
},
onRemove: function(map) {
this._map._container.removeChild(this._container);
//this._container = null;
//~ this._map.off('viewreset', this._resetCallback, this);
this._map.options.zoomAnimation = true;
this._map.off('move', this._update, this);
//this._map.off('moveend', this._update, this);
},
getAttribution: function() {
return this.options.attribution;
},
setOpacity: function(opacity) {
this.options.opacity = opacity;
if (opacity < 1) {
L.DomUtil.setOpacity(this._container, opacity);
}
},
_initContainer: function() {
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";
}
if (true) {
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';
}
},
_initMapObject: function() {
this._google_center = new google.maps.LatLng(0, 0);
var map = new google.maps.Map(this._container, {
center: this._google_center,
zoom: 0,
styles: this._styles,
tilt: 0,
mapTypeId: this._type,
disableDefaultUI: true,
keyboardShortcuts: false,
draggable: false,
disableDoubleClickZoom: true,
scrollwheel: false,
streetViewControl: false
});
var _this = this;
this._reposition = google.maps.event.addListenerOnce(map, "center_changed",
function() { _this.onReposition(); });
map.backgroundColor = '#ff0000';
this._google = map;
this._lastZoomPosition = null;
this._lastMapPosition = null;
},
_resetCallback: function(e) {
this._reset(e.hard);
},
_reset: function(clearOldContainer) {
this._initContainer();
},
_update: function() {
this._resize();
// update map position if required
var newCenter = this._map.getCenter();
if(this._lastMapPosition !== newCenter) {
var _center = new google.maps.LatLng(newCenter.lat, newCenter.lng);
this._google.setCenter(_center);
}
this._lastMapPosition = newCenter;
// update zoom level if required
var newZoom = this._map.getZoom();
if(this._lastZoomPosition !== newZoom) {
this._google.setZoom(this._map.getZoom());
}
this._lastZoomPosition = newZoom;
},
_resize: function() {
var size = this._map.getSize();
if (parseInt(this._container.style.width) == size.x &&
parseInt(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");
},
onReposition: function() {
//google.maps.event.trigger(this._google, "resize");
}
});