ngx-leaflet-tutorial-plugins
ngx-leaflet-tutorial-plugins copied to clipboard
Custom TimeDimension layer, Angular and ngx-leaflet
Hi Guys,
First, I want to thank you for your amazing job. I found the tutorial quite useful.
I am having some problem trying to create a Custom TimeDimension layer with angular. I am new to typescript and I will really appreciate any help.
This is my vanilla javascript code which works in my javascript leaflet project.
var myLayer = L.TimeDimension.Layer.myLayer = L.TimeDimension.Layer.extend({
initialize: function(options) {
this._currentLoadedTime = 0;
var layer = new L.imageOverlay("img/transparent.gif", imageBounds, {opacity: 0.2} );
L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);
this._baseURL = options.baseURL || null;
this._dataMode = options.dataMode || null;
},
onAdd: function(map) {
L.TimeDimension.Layer.prototype.onAdd.call(this, map);
map.addLayer(this._baseLayer);
if (this._timeDimension) {
this._getUrlForDataModelImage(this._timeDimension.getCurrentTime());
currentTimeSelected = this._timeDimension.getCurrentTime();
}
},
_onNewTimeLoading: function(ev) {
this._getUrlForDataModelImage(ev.time);
currentTimeSelected = ev.time;
return;
},
isReady: function(time) {
currentTimeSelected = time;
return (this._currentLoadedTime == time);
},
_update: function() {
this._baseLayer.setUrl(this._getUrlForDataModelImage(this._timeDimension.getCurrentTime()));
return true;
},
_getUrlForDataModelImage: function(time) {
//CREATES THE URL WHERE DATA CAN BE OBTAINED
return "url" //private url
}
});
//usage
L.timeDimension.layer.myLayer = function(options) {
return new L.TimeDimension.Layer.myLayer(options);
};
I know this is like 4 months later, but what's the specific issue you are having?
Creating a custom layer is probably more of a StackOverflow question. But, if you tag it with ngx-leaflet, I and others keep an eye on that feed.