Comments (11)
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'
from leaflet.timedimension.
Hi @bielfrontera,
Yes I did that and still I am getting the same error.
from leaflet.timedimension.
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';
from leaflet.timedimension.
Hi @tejaltar,
the "Maximum call stack size exceeded" error appears because you have imported timedimension twice.
from leaflet.timedimension.
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?
from leaflet.timedimension.
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...
from leaflet.timedimension.
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.
from leaflet.timedimension.
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);
from leaflet.timedimension.
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.
from leaflet.timedimension.
@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
from leaflet.timedimension.
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?
from leaflet.timedimension.
Related Issues (20)
- How can I turn off time dimension control on a layer inside L.Control.layers ?
- Time Control doesn't sync when switching layers HOT 1
- is it possible to change timeinterval after creating map object?
- i need to make time on multi feature linestring
- Is it possible to build the track for a linestring geojson with respect to time iterations?
- Are there any examples integrating with react-leaflet
- [accessibility] Use `<button>` or `<a role="button">`
- [accessibility] Slider/range controls HOT 3
- Feature/limitSliders Labels
- start date and end date is not work with geojson data HOT 2
- Keep circles when time pass HOT 2
- Where are the arrows being generated? HOT 4
- Using the limitSliders to only show specific time interval of whole GeoJSON HOT 1
- stuck at example 12 heatmap
- Does the plugin support a list of times (vs a range)?
- vertical (elevation) dimension and controls HOT 2
- Does a L.timeDimension.layer support click events?
- iso8601-js-period cdn gives 404 HOT 2
- this._timeDimension.getAvailableTimes is not a function
- Control icons not showing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.timedimension.