/**
@module L.PtvLayer
**/
L.PtvLayer = L.PtvLayer || {};
/**
Provides the PTV AbstractOverlay Layer class.
@class L.PtvLayer.AbstractOverlay
@extends L.ILayer
@params {Object} options The options object
@params {String} [options.format] The image format used in tile requests.
@params {String} [options.beforeSend] Function to be called before sending the request with the request object given as first parameter. The (modified) request object must be returned.
@constructor
**/
L.PtvLayer.AbstractOverlay = L.Class.extend({
includes: L.Mixin.Events,
_el1: null,
_el2: null,
_elCur: 0,
_client: null,
_map: null,
_requestObject: null,
/**
Default options used in this class.
@property options
@type Object
**/
options: {
/**
The image format used in tile requests.
@property options.format
@type String
@default "PNG"
**/
format: 'PNG',
/**
Function to be called before sending the request with the request object given as first parameter. The (modified) request object must be returned.
@property options.beforeSend
@type function
@default null
**/
beforeSend: null,
/**
The world bounds for PTV Maps.
@property options.bounds
@type L.LatLngBounds
@default [[85.0, -178.965000], [-66.5, 178.965000]]
**/
bounds: new L.LatLngBounds([[85.0, -178.965000], [-66.5, 178.965000]])
},
/**
Constructor
@method L.PtvLayer.AbstractOverlay
@param {XMapClient} client optional XMapClient object
@param {Object} options optional options object
**/
initialize: function(client, options) {
this._client = client;
if (typeof client !== 'object' ) {
if (typeof XMapClient !== 'function') {
throw Error('The XMapClient object is not accessible globally. Have you loaded "xmap-client.js" properly?');
} else {
this._client = new XMapClient(null, 1);
}
}
L.Util.setOptions(this, options);
},
onAdd: function(map) {
this._map = map;
// create a DOM element and put it into one of the map panes
this._el1 = L.DomUtil.create('img', 'leaflet-tile leaflet-zoom-hide');
this._el2 = L.DomUtil.create('img', 'leaflet-tile leaflet-zoom-hide');
this._el1.style.cssText = '-webkit-transition: none; -moz-transition: none; -o-transition: opacity 0 linear; transition: none;';
this._el2.style.cssText = '-webkit-transition: none; -moz-transition: none; -o-transition: opacity 0 linear; transition: none;';
this._el1.onload = (function(self, el) { return function() { self._setActiveEl.call(self, el); }; })(this, this._el1);
this._el2.onload = (function(self, el) { return function() { self._setActiveEl.call(self, el); }; })(this, this._el2);
map.getPanes().overlayPane.appendChild(this._el1);
map.getPanes().overlayPane.appendChild(this._el2);
map.on({
'moveend': this._update
}, this);
this._update();
},
onRemove: function(map) {
map.off({
'moveend': this._update
}, this);
map.getPanes().overlayPane.removeChild(this._el1);
map.getPanes().overlayPane.removeChild(this._el2);
},
_setActiveEl: function(el) {
if(el === this._el1) {
L.DomUtil.addClass(this._el1, 'leaflet-tile-loaded');
L.DomUtil.removeClass(this._el2, 'leaflet-tile-loaded');
} else {
L.DomUtil.addClass(this._el2, 'leaflet-tile-loaded');
L.DomUtil.removeClass(this._el1, 'leaflet-tile-loaded');
}
},
_update: function() {
var bounds = this._map.getBounds(), mapSize = this._map.getSize(), el = (!this._elCur ? this._el1 : this._el2);
this._elCur = (this._elCur + 1) % 2;
if (this._map.getZoom() > this._map.getMaxZoom() || this._map.getZoom() < this._map.getMinZoom()) {
return;
}
if (this.options.bounds) {
bounds.clip(this.options.bounds);
}
if ( typeof this._client.cancelPendingRequests === 'function') {
this._client.cancelPendingRequests();
}
var se = this._map.project(bounds.getSouthEast()), nw = this._map.project(bounds.getNorthWest());
mapSize.x = Math.max(256, se.x - nw.x);
mapSize.y = Math.max(256, se.y - nw.y);
var tileUrl = this._requestTile(bounds, mapSize, el);
var pos = this._map.latLngToLayerPoint(bounds.getNorthWest());
L.DomUtil.setPosition(el, pos, false);
},
_getRequestObject: function() {
return {
mapSection: {
leftTop: {
"$type": "Point",
point: {
"$type": "PlainPoint",
x: 0,
y: 0
}
},
rightBottom: {
"$type": "Point",
point: {
"$type": "PlainPoint",
x: 0,
y: 0
}
}
},
mapParams: {
showScale: false,
useMiles: false
},
imageInfo: {
format: '',
width: 0,
height: 0
},
layers: [],
includeImageInResponse: true,
callerContext: {
properties: [{
key: "Profile",
value: ""
}, {
"key": "CoordFormat",
"value": "OG_GEODECIMAL"
}]
}
};
},
_requestTile: function(bounds, mapSize, el) {
var self = this, map = this._map, crs = map.options.crs, nw = crs.project(bounds.getNorthWest()), se = crs.project(bounds.getSouthEast()), bbox = new L.LatLngBounds([se.y, nw.x], [nw.y, se.x]);
var req = this._getRequestObject();
req.mapSection.leftTop.point.x = bbox.getNorthWest().lng;
req.mapSection.leftTop.point.y = bbox.getNorthWest().lat;
req.mapSection.rightBottom.point.x = bbox.getSouthEast().lng;
req.mapSection.rightBottom.point.y = bbox.getSouthEast().lat;
req.imageInfo.format = this.options.format;
req.imageInfo.width = mapSize.x;
req.imageInfo.height = mapSize.y;
if (typeof this.options.beforeSend === "function") {
req = this.options.beforeSend(req);
}
this._client.renderMapBoundingBox(req.mapSection, req.mapParams, req.imageInfo, req.layers, req.includeImageInResponse, req.callerContext, (function(el) {
return function(resp, error) {
self._renderMapCallback.call(self, resp, error, el);
};
})(el));
this.fire('loading');
},
_renderMapCallback: function(resp, error, el) {
if (!error) {
el.src = L.PtvUtils.createDataURI(resp.image.rawImage);
} else {
el.src = L.Util.emptyImageUrl;
console.log(error.errorMessage);
}
this.fire('load', {
tile: el,
url: el.src
});
}
});
