Leaflet.TimeDimension and customised heat maps

Hi All,

I am trying to use Leaflet.TimeDimesion library on my heatmap.js project. I have tried to follow example 12 and I tried to create a heat map with 1 data point (so I can understand how the library works and avoid getting distracted with data). Unfortunately, all the different ways I have tried to do this throws the following error:

main.js:97 Uncaught RangeError: Maximum call stack size exceeded at new L.TimeDimension.Layer.HeatMapTemperature (main.js:97) I guess I am doing something wrong. I am new to JavaScript and I would really appreciate any help.

Thank you

//main.js file Date.prototype.format = function (mask, utc) { return dateFormat(this, mask, utc); };

L.TimeDimension.Layer.HeatMapTemperature = L.TimeDimension.Layer.extend({

initialize: function(options) {

console.log("Inside initialize");
    var heatmapTemperatureCfg = this._getHeatmapOptions(heatmatOptions || {});
    var layer = new HeatmapOverlay(heatmapTemperatureCfg);

    L.TimeDimension.Layer.prototype.initialize.call(this, layer, options);

    this._currentLoadedTime = 0;
    this._currentTimeData = {
        max: this.options.heatmapMax || 50,
        data: [{latitude: 53.3498, longitude:-6.2603, value: 40}]
    };
    this._baseURL = this.options.baseURL || null;
    this._period = this.options.period || "P1M";
},

_getHeatmapOptions: function(options) {
    var config = {};
    var defaultConfig = {
        "radius": 20,
        "maxOpacity": 0.35,
        "scaleRadius": false,
        "useLocalExtrema": false,
        "gradient": {
            0.5: '#000066',
            0.55: '#7300e6',
            0.6: '#0000ff',
            0.7: '#66ffff',
            0.8: '#66ff33',
            0.9: '#ffff00',
            0.95: '#ffa500',
            1.0 : '#ff0000'
          },
        latField: 'latitude',
        lngField: 'longitude',
        valueField: 'value'

    };
    for (var attrname in defaultConfig) {
        config[attrname] = defaultConfig[attrname];
    }
    for (var attrname in options) {
        config[attrname] = options[attrname];
    }
    return config;
},

onAdd: function(map) {
    L.TimeDimension.Layer.prototype.onAdd.call(this, map);
    map.addLayer(this._baseLayer);
    if (this._timeDimension) {
        this._getDataForTime(this._timeDimension.getCurrentTime());
    }
},

 _onNewTimeLoading: function(ev) {
    this._getDataForTime(ev.time);
    return;
},

isReady: function(time) {
    return (this._currentLoadedTime == time);
},

_update: function() {
     this._baseLayer.setData(this._currentTimeData);
     return true;
 },

_getDataForTime: function(time) {
    if (!this._baseURL || !this._map) {
        return;
    }
    this._currentTimeData.data = [{latitude: 53.3498, lng:-6.2603, value: 100}]
}

});

L.TimeDimension.Layer.HeatMapTemperature = function(options) { return new L.TimeDimension.Layer.HeatMapTemperature(options); }

//Creates a baseLayer i.e. world map var baseLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', { maxZoom: 22, ext: 'png' });

// SETTING THE BOUNDS OF THE MAP SO IT CANT GO OUTSIDE THESE REGIONS AND THEN WITHIN THE MAP SETTING THE MAXBOUNDS TO THESE BOUNDS.
// set bounds of map
var topLeft = L.latLng(62.5, -21.75);
var bottomRight = L.latLng(34.5, 18.5);
var bounds = L.latLngBounds(topLeft, bottomRight);

var currentTime = new Date();
currentTime.setUTCDate(1, 0, 0, 0, 0);

 // initialize the map on the "map" div with a given center and zoom
var map = new L.map('map', {    //L. it means that we are dealing with leaflet commands
    center: new L.latLng(53.1424, -7.6921), //here your put ireland coordinates
    zoom: 7, //the scale we are mapping
    zoom: 0, //the scale we are mapping
    minZoom: 6, //makes smaller the images
    maxZoom: 8, //makes bigger the images
    ZoomControl: false,
    maxBounds: bounds,
    timeDimension: true,
    timeDimensionOptions: {//t
        TimeInterval: "2018-06-07/2018-06-07",
        period: "P1M",
        //currentTime: currentTime,
        timeDimensionControl: true,
    }
});
map.addLayer(baseLayer);

var layerTemperature = L.TimeDimension.Layer.HeatMapTemperature({baseURL:""}); layerTemperature.addTo(map);

L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({ _getDisplayDateFormat: function(date){ return date.format("ddd - HH:MM"); } });

console.log("hello");

var timeDimensionControl = new L.Control.TimeDimensionCustom({ speedSlider: false, backwardButton: false, forwardButton: false, timeSlider: false, //position: 'topleft', displayDate: true, playerOptions: { buffer: 1, minBufferReady: -1, transitionTime: 900, // 1500 loop: true, startOver: true } });

map.addControl(this.timeDimensionControl);

//html file <!doctype html>

socib / Leaflet.TimeDimension

Leaflet.TimeDimension and customised heat maps #152