bluehalo / ngx-leaflet-tutorial-plugins

MIT License
22 stars 10 forks source link

Custom TimeDimension layer, Angular and ngx-leaflet #14

Open ErikaHD opened 6 years ago

ErikaHD commented 6 years ago

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); 
};
reblace commented 5 years ago

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.