bluehalo / bluehalo/ngx-leaflet-tutorial-plugins

Custom TimeDimension layer, Angular and ngx-leaflet

Open
#14 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
21
Forks
9
PR merge metrics
No merged PRs in 30d

Description

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.

```javascript
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);
};

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.