Created
October 24, 2014 11:18
-
-
Save gijs/9bb05786eb2cbb57c1af to your computer and use it in GitHub Desktop.
Leaflet.AnimatedImageOverlay.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* L.AnimatedImageOverlay is used to overlay an animation of images over the map (to specific geographical bounds). | |
*/ | |
L.AnimatedImageOverlay = L.Class.extend({ | |
includes: L.Mixin.Events, | |
options: { | |
opacity: 1 | |
}, | |
initialize: function (image, bounds, options) { // (imageObject, LatLngBounds, Object) | |
this._image = image; | |
this._bounds = L.latLngBounds(bounds); | |
L.setOptions(this, options); | |
}, | |
onAdd: function (map) { | |
this._map = map; | |
// if (!this._image) { | |
// this._initImage(); | |
// } | |
map._panes.overlayPane.appendChild(this._image); | |
map.on('viewreset', this._reset, this); | |
if (map.options.zoomAnimation && L.Browser.any3d) { | |
map.on('zoomanim', this._animateZoom, this); | |
} | |
this._reset(); | |
}, | |
onRemove: function (map) { | |
map.getPanes().overlayPane.removeChild(this._image); | |
map.off('viewreset', this._reset, this); | |
if (map.options.zoomAnimation) { | |
map.off('zoomanim', this._animateZoom, this); | |
} | |
}, | |
addTo: function (map) { | |
map.addLayer(this); | |
return this; | |
}, | |
setOpacity: function (opacity) { | |
this.options.opacity = opacity; | |
this._updateOpacity(); | |
return this; | |
}, | |
// TODO remove bringToFront/bringToBack duplication from TileLayer/Path | |
bringToFront: function () { | |
if (this._image) { | |
this._map._panes.overlayPane.appendChild(this._image); | |
} | |
return this; | |
}, | |
bringToBack: function () { | |
var pane = this._map._panes.overlayPane; | |
if (this._image) { | |
pane.insertBefore(this._image, pane.firstChild); | |
} | |
return this; | |
}, | |
setUrl: function (url) { | |
this._url = url; | |
this._image = this._image; | |
}, | |
getAttribution: function () { | |
return this.options.attribution; | |
}, | |
_initImage: function () { | |
this._image = L.DomUtil.create('img', 'leaflet-image-layer'); | |
if (this._map.options.zoomAnimation && L.Browser.any3d) { | |
L.DomUtil.addClass(this._image, 'leaflet-zoom-animated'); | |
} else { | |
L.DomUtil.addClass(this._image, 'leaflet-zoom-hide'); | |
} | |
this._updateOpacity(); | |
//TODO createImage util method to remove duplication | |
// L.extend(this._image, { | |
// galleryimg: 'no', | |
// onselectstart: L.Util.falseFn, | |
// onmousemove: L.Util.falseFn, | |
// onload: L.bind(this._onImageLoad, this), | |
// src: this._url | |
// }); | |
}, | |
_animateZoom: function (e) { | |
var map = this._map, | |
image = this._image, | |
scale = map.getZoomScale(e.zoom), | |
nw = this._bounds.getNorthWest(), | |
se = this._bounds.getSouthEast(), | |
topLeft = map._latLngToNewLayerPoint(nw, e.zoom, e.center), | |
size = map._latLngToNewLayerPoint(se, e.zoom, e.center)._subtract(topLeft), | |
origin = topLeft._add(size._multiplyBy((1 / 2) * (1 - 1 / scale))); | |
image.style[L.DomUtil.TRANSFORM] = | |
L.DomUtil.getTranslateString(origin) + ' scale(' + scale + ') '; | |
}, | |
_reset: function () { | |
var image = this._image, | |
topLeft = this._map.latLngToLayerPoint(this._bounds.getNorthWest()), | |
size = this._map.latLngToLayerPoint(this._bounds.getSouthEast())._subtract(topLeft); | |
L.DomUtil.setPosition(image, topLeft); | |
image.style.width = size.x + 'px'; | |
image.style.height = size.y + 'px'; | |
}, | |
_onImageLoad: function () { | |
this.fire('load'); | |
}, | |
_updateOpacity: function () { | |
L.DomUtil.setOpacity(this._image, this.options.opacity); | |
} | |
}); | |
L.animatedImageOverlay = function (image, bounds, options) { | |
console.log('image', image, 'bounds:', bounds); | |
return new L.AnimatedImageOverlay(image, bounds, options); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment