Property 'timeDimension' does not exist on type 'typeof control'

[tejaltar]

When I am trying to use L.control.timeDimension( {
autoPlay: false,
displayDate: true,
timeZones: ["Local"],
playerOptions: {
transitionTime: 500,
loop: true,
buffer: 10
}
}) it gives following error:
Property 'timeDimension' does not exist on type 'typeof control'.
It is searching timeDimension option in control namespace of index.d.ts file of leaflet node module folder.
Do I need to install any specific version of leaflet?

[bielfrontera]

Hi @tejaltar,
have you installed and import leaflet-timedimension?

$ npm install leaflet-timedimension@latest

and:

import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet-timedimension/dist/leaflet.timedimension.src.js'
import 'leaflet-timedimension/dist/leaflet.timedimension.control.css'

[tejaltar]

Hi @bielfrontera,

Yes I did that and still I am getting the same error.

[tejaltar]

Hi @bielfrontera,

When I imported timeDimension using following:

import 'leaflet-timedimension/dist/leaflet.timedimension.src.js'
import 'leaflet-timedimension/dist/leaflet.timedimension.control.css'

I am getting following error:
ERROR RangeError: Maximum call stack size exceeded at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1209) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212) at NewClass._update [as _originalUpdate] (leaflet.timedimension.src.js:1212)

But, if I use this everything works perfectly but L.control.timeDimension does not work.

import '../../../../vendors/leaflet-timedimension/dist/leaflet.timedimension.src.js';
import '../../../../vendors/leaflet-timedimension/dist/leaflet.timedimension.control.css';

[bielfrontera]

Hi @tejaltar,
the "Maximum call stack size exceeded" error appears because you have imported timedimension twice.

[tejaltar]

Hi @bielfrontera,

Even after installing and importing leaflet-timedimension I getting "Property 'timeDimension' does not exist on type 'typeof control'." error. Is there anything else I need to do?

[bielfrontera]

Can you check if there are some other messages in the console?
Or can you copy here the whole javascript file? There is something missing here, but I do not know what...

[tejaltar]

Hi @bielfrontera,

I added following properties to map object while creating L.Map and timedimension is working:

timeDimension: true,
    timeDimensionControl: true,
    // PT1H = 1 hour, PT1M = 1 min
    timeDimensionOptions: {
      timeInterval: this.getUTC(this.endDate).toISOString() + '/PT1H',
      period: 'PT5M'
    },
    timeDimensionControlOptions: {
      autoPlay: false,
      displayDate: true,
      timeZones: ["Local"],
      playerOptions: {
        transitionTime: 500,
        loop: true,
        buffer: 10
      }
    }

I want to hide and show timecontrol bar as per user's selection. Can you suggest some way to do it?
Since, I am working for a company I will not be able to share my code file.

[bielfrontera]

If you want to add and remove manually the control, you can create the map with the option timeDimensionControl: false and create the control yourself (adding and removing it when necessary).

Basic example: the control is created, added to the map, removed 3 seconds later and, finally, added again.

let timeControl = L.control.timeDimension({
  autoPlay: false,
  displayDate: true,
  timeZones: ["Local"],
  playerOptions: {
    transitionTime: 500,
    loop: true,
    buffer: 10,
  },
});
map.addControl(timeControl);

setTimeout(function () {
  map.removeControl(timeControl);
}, 3000);

setTimeout(function () {
  map.addControl(timeControl);
}, 6000);

[tejaltar]

After installing leaflet-timedimension package does it update the index.d.ts file in node-modules?

Control namespace in index.d.ts file is as follows:

export namespace control {
    function zoom(options?: Control.ZoomOptions): Control.Zoom;

    function attribution(options?: Control.AttributionOptions): Control.Attribution;

    function layers(baseLayers?: Control.LayersObject, overlays?: Control.LayersObject, options?: Control.LayersOptions): Control.Layers;

    function scale(options?: Control.ScaleOptions): Control.Scale;
}

Since timeDimension is not available here, it is giving me error.

I have installed leaflet-timedimension and importing it as follows:

import '../../../../vendors/leaflet-timedimension/dist/leaflet.timedimension.src.js';
import '../../../../vendors/leaflet-timedimension/dist/leaflet.timedimension.control.css';

when I add timeDimension to Map object it is working fine but when I try to add and remove it using L.control.timeDimension it gives me "Property 'timeDimension' does not exist on type 'typeof control'." error.

[bielfrontera]

@tejaltar: i did not realise that you are using typescript (my fault, you mentioned index.d.ts on your first comment).

I'm not very familiar with type definitions, but it is something that we should add to this project. There is an open issue about this topic (see #109 and #131).

I've seen that @mano92fuentesjimenez has added the typescript definitions on their fork (see https://github.com/CFA-Meteorologia/Leaflet.TimeDimension/blob/master/src/definitions.d.ts). I don't know if Manuel would like to send us a PR to add it to the project. Or upload the definitions to DefinitelyTyped

[tejaltar]

I installed leaflet-timedimension-scoped package but I am getting following error:

Error: node_modules/leaflet-timedimension-scoped/src/definitions.d.ts:98:16 - error TS2300: Duplicate identifier 'Map'.

98   export class Map {
                  ~~~

  node_modules/@types/leaflet/index.d.ts:1774:14
    1774 export class Map extends Evented {
                      ~~~
    'Map' was also declared here.

Also, I wanted to create tileLayer where URI for that layer should include the current time selected from the timeControl. How can I do that?