socib / leaflet.timedimension Goto Github PK

View Code? Open in Web Editor NEW

424.0 38.0 135.0 4.84 MB

Add time dimension capabilities on a Leaflet map.

License: MIT License

JavaScript 92.06% CSS 7.94%

timedimension leaflet wms maps javascript jerico-ri

leaflet.timedimension's Introduction

Leaflet TimeDimension

Add time dimension capabilities on a Leaflet map.

Examples and basic usage
API
Requisites
Talks
Bugs, issues and contributions

Examples and basic usage

Checkout the Leaflet TimeDimension Demos.

Basic usage:

<html>
    <head>
        <title>Leaflet TimeDimension Demo</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.control.min.css" />
    </head>
    <body>
        <div id="map" style="height: 100%; width: 100%"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/iso8601.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.timedimension.min.js"></script>
        <script type="text/javascript" src="example.js"></script>
    </body>
</html>

// example.js
var map = L.map('map', {
    zoom: 10,
    center: [38.705, 1.15],
    timeDimension: true,
    timeDimensionOptions: {
        timeInterval: "2014-09-30/2014-10-30",
        period: "PT1H"
    },
    timeDimensionControl: true,
});

var wmsUrl = "https://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
    layers: 'sea_water_velocity',
    format: 'image/png',
    transparent: true,
    attribution: 'SOCIB HF RADAR | sea_water_velocity'
});

// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);

For more control over each object creation, you can create timeDimension objects manually, see Example 9

API

L.Map

This plugin will attach to a Map a TimeDimension object and a related TimeDimension Control if timeDimension and timeDimensionControl options are included.

Option	Type	Default	Description
`timeDimension`	`Boolean`	`false`	Automatically creates a new TimeDimension object linked to the map if set to `true`.
`timeDimensionOptions`	`Object`	`{}`	Options for the TimeDimension object.
`timeDimensionControl`	`Boolean`	`false`	Automatically adds a TimeDimension Control to the map if set to `true`.
`timeDimensionControlOptions`	`Object`	`{}`	Options for the TimeDimension Control object.

L.TimeDimension

TimeDimension object manages the time component of a layer. It can be shared among different layers and it can be added to a map, and become the default timedimension component for any layer added to the map.

In order to include a TimeDimension in the map, add timeDimension: true as an option when creating the map.

Usage example

L.timeDimension().addTo(map);

Creation

Factory	Description
`L.timeDimension(<Object> options?)`

Options

This options can be set up when creating the map with the option timeDimensionOptions.

Option	Type	Default	Description
`times`	`Number`	`null`	It can be: a) An array of times (in milliseconds). b) String of dates separated by commas. c) String formed by `start date`/`end date`/`period`. If null, it will be constructed according to `timeInterval` and `period`
`timeInterval`	`String`	`"P1M/" + today`	String to construct the first available time and the last available time. Format: ISO8601 Time inverval
`period`	`String`	`"P1D"`	Used to construct the array of available times starting from the first available time. Format: ISO8601 Duration
`validTimeRange`	`String`	`undefined`	Filter the array of available times by start hour and end hour (for any date). Format `"HH:MM/HH:MM"`.
`currentTime`	`Number`	Closest available time	Current time to be loaded. Time in ms.
`loadingTimeout`	`Number`	`3000`	Maximum time in milliseconds that the component will wait to apply a new time if synced layers are not ready
`lowerLimitTime`	`Number`	`undefined`
`upperLimitTime`	`Number`	`undefined`

Events

Event	Data	Description
`timeloading`	`time`	Fired when a new time is required to load
`timeload`	`time`	Fired when a all synced layers have been loaded/prepared for a new time (or timeout)
`availabletimeschanged`	`availableTimes, currentTime`	Fired when the list of available times have been updated
`limitschanged`	`lowerLimit, upperLimit`	Fired when range limits changed. Limits are expressed in index value

Methods

Method	Returns	Description
`getAvailableTimes()`	`Array of times`	Array of all the available times of the TimeDimension
`getCurrentTime()`	`time`	Current time of the Time Dimension
`setCurrentTime(<Number> time)`	-	Modify the current time. If the time argument is not among the available times, the previous closest time will be selected
`nextTime(<Number> numSteps, <Boolean> loop)`	-	Move the current time n steps forward in the available times array
`previousTime(<Number> numSteps, <Boolean> loop)`	-	Move the current time n steps backward in the available times array
`prepareNextTimes(<Number> numSteps, <Number> howmany, <Boolean> loop)`	-	Fire 'timeloading' for severals times (in order to pre-load layers)
`registerSyncedLayer(<L.TimeDimension.Layer> layer)`	-	TimeDimension will check if all layers are ready before firing timeload. It will listen to "timeload" event of these layers.
`unregisterSyncedLayer(<L.TimeDimension.Layer> layer)`	-
`setAvailableTimes(<Array> times, <String> mode)`	-	Update available times of the TimeDimension with a new array of times (in ms). Mode : Update modes

L.TimeDimension.Layer

TimeDimension.Layer is an abstract Layer that can be managed/synchronized with a TimeDimension. The constructor recieves a layer (of any kind) and options.

Any children class should implement _onNewTimeLoading, isReady and _update functions to react to time changes.

Options

Option	Type	Default	Description
`timeDimension`	`<L.TimeDimension>`	`null`	TimeDimension object which will manage this layer. If it is not defined, the map TimeDimension will be attached when adding this layer to the map.
`opacity`	`Number`	`1`
`zIndex`	`Number`	`1`

Events

Event	Data	Description
`timeload`	`time`	Fires when a the layer has been loaded/prepared for a new time

L.TimeDimension.Layer.WMS

Implements a TimeDimension Layer for a given WMS layer, which can be a L.TileLayer.WMS or a L.NonTiledLayer.WMS.

This component synchronizes the WMS with a TimeDimension, modifying the time parameter in the WMS requests.

Usage example

L.timeDimension.layer.wms(layer).addTo(map);

Creation

Factory	Description
`L.timeDimension.layer.wms(<L.Layer> layer, <Object> options?)`

Options

Option	Type	Default	Description
`cache`	`Number`	`0`
`cacheBackward`	`Number`	`cache` or `0`	Number of layers that can be kept hidden on the map for previous times
`cacheForward`	`Number`	`cache` or `0`	Number of layers that can be kept hidden on the map for future times
`updateTimeDimension`	`Boolean`	`false`	Update the list of available times of the attached TimeDimension with the available times obtained by getCapabilities
`updateTimeDimensionMode`	`String`	`"intersect"`	Operation to merge the available times of the TimeDimension and the layer (intersect, union, replace or extremes). See Update modes
`requestTimeFromCapabilities`	`Boolean`	`false`	Get list of available times for this layer from getCapabilities
`proxy`	`String`	`null`	URL of the proxy used to obtain getCapabilities responses from the WMS server avoiding cross site origin problems
`getCapabilitiesParams`	`Object`	`{}`	Extra parameters needed to create getCapabilities request
`getCapabilitiesUrl`	`String`	`null`	Alternative URL for the GetCapabilities request (useful if using a cache service like GeoWebCache)
`getCapabilitiesLayerName`	`String`	`null`	Alternative layer name for the GetCapabilities request (useful if using a cache service like GeoWebCache)
`setDefaultTime`	`Boolean`	`false`	If true, it will change the current time to the default time of the layer (according to getCapabilities)
`period`	`String`	`null`	Duration between times that will be used to generate the available times of the layer from a time interval. It overwrites the value received in getCapabilities (if not null). Format: ISO8601 Duration
`wmsVersion`	`String`	`layer.options.version` or `"1.1.1"`	WMS version of the layer. Used to construct the getCapabilities request

L.TimeDimension.Layer.GeoJSON

Manages a GeoJSON layer with a TimeDimension. According to GeoJSON specification, geometry coordinates can have only three dimensions: latitude, longitude and elevation. There isn't a standard way to add time dimension information. This plugin will search for some attributes inside properties:

coordTimes, times or linestringTimestamps: array of times that can be associated with a geometry (datestrings or ms). In the case of a LineString, it must have as many items as coordinates in the LineString. (Note: coordTimes is the name of the property recently included at Mapbox toGeoJSON library)
time: time of the feature

This component will create and show new GeoJSON layers which include only those features (or part of them) that are active for the time of the TimeDimension (according to a duration option). These new layers will inherit the baseLayer options. In the case of LineStrings, if addlastPoint option is enabled, a Point feature will be added with the property last (that can be used to customize the marker of this special Point).

Usage example

L.timeDimension.layer.geoJson(layer).addTo(map);

Creation

Factory	Description
`L.timeDimension.layer.geoJson(<L.Layer> layer, <Object> options?)`

Options

Option	Type	Default	Description
`duration`	`String`	`null`	Period of time which the features will be shown on the map after their time has passed. If null, all previous times will be shown. Format: ISO8601 Duration
`addlastPoint`	`Boolean`	`false`	Add a Point at the last valid coordinate of a LineString.
`waitForReady`	`Boolean`	`false`	If `true`, it will wait until the baseLayer is loaded to mark itself as ready. You can use it with layers created using leaflet-omnivore.
`updateTimeDimension`	`Boolean`	`false`	Update the list of available times of the attached TimeDimension with the available times of this GeoJSON
`updateTimeDimensionMode`	`String`	`"extremes"`	Operation to merge the available times of the TimeDimension and the layer (intersect, union, replace or extremes)
`updateCurrentTime`	`Boolean`	`updateTimeDimension`	Automatically change the current time of map to the first available time of the GeoJSON layer.

L.Control.TimeDimension

Leaflet control to manage a timeDimension. With play|pause, next, back, current time, time slider and speed slider controls.

Usage example

L.control.timeDimension().addTo(map);

Creation

Factory	Description
`L.control.timeDimension(<Object> options?)`

Options

Option	Type	Default	Description
`timeDimension`	`<L.TimeDimension>`	`null`
`styleNS`	`String`	`"leaflet-control-timecontrol"`
`position`	`String`	`"bottomleft"`
`title`	`String`	`"Time Control"`
`backwardButton`	`Boolean`	`true`	Show backward button
`forwardButton`	`Boolean`	`true`	Show forward button
`playButton`	`Boolean`	`true`	Show play/pause button
`playReverseButton`	`Boolean`	`false`
`loopButton`	`Boolean`	`false`	Show loop button to enable/disable loop animation
`displayDate`	`Boolean`	`true`	Show display date control
`timeSlider`	`Boolean`	`true`	Show time slider control
`timeSliderDragUpdate`	`Boolean`	`false`	Update the map when dragging
`limitSliders`	`Boolean`	`false`	Show limit knobs on the time slider to restrict animation range
`limitMinimumRange`	`Number`	`5`	The minimum number of steps allowed in animation range
`speedSlider`	`Boolean`	`true`	Show speed slider control
`minSpeed`	`Number`	`0.1`	Minimum selectable value for speed slider in fps (`1000/transitionTime`)
`maxSpeed`	`Number`	`10`	Maximum selectable value for speed slider in fps
`speedStep`	`Number`	`0.1`	Speed slider step size
`timeSteps`	`Number`	`1`	Number of time steps applied to the TimeDimension (forwards or backwards) in a time change
`autoPlay`	`Boolean`	`false`	Animate the map automatically
`player`	`<L.TimeDimension.Player>`	`undefined`	Attach an existing player to that control
`playerOptions`	`Object`	`{transitionTime: 1000}`	Options for the TimeDimension Player object attached.(Cannot be used with `player` option)
`timeZones`	`Array of strings`	`["UTC", "Local"]`	Clicking on the date cycles between these

L.TimeDimension.Player

Component to animate a map with a TimeDimension, changing the time periodically.

Usage example

var player = new L.TimeDimension.Player({}, timeDimension).addTo(map);

Creation

Factory	Description
`L.TimeDimension.Player(<Object> options?, <L.TimeDimension> timeDimension)`

Options

Option	Type	Default	Description
`transitionTime`	`Number`	`1000`	Milliseconds that the player will wait to check and launch the next time in the TimeDimension
`buffer`	`Number`	`5`	(Number or Function) Number of times forward that will be requested in each iteration. Function callback will be called with 3 parameters (`transitionTime`, `minBufferReady`, `loop`)
`minBufferReady`	`Number`	`1`	If this option is greater than 0, the player will full the buffer every time the number of next ready times (next layers ready) is below this number.
`loop`	`Boolean`	`false`	Loop the animation when it reaches the last available time
`startOver`	`Boolean`	`false`	When the player is at the last position, it start over to the beginning when the user press play

Events

List of events triggered by the player. Register with .on()

Event	Data	Description
`play`	-	When the animation is started/unpaused
`running`	-	When the animation is resuming after a waiting state
`stop`	-	When the animation is stopped/paused
`waiting`	`buffer, available`	When the animation is waiting for some layers to be loaded
`animationfinished`	-	When the animation has reached the end of the timeline (`loop` is disabled)
`loopchange`	`loop`	When the `loop` setting is changed
`speedchange`	`transitionTime, buffer`	When the `transitionTime` setting is changed

Methods

Method	Returns	Description
`start(<Number> numSteps)`	-	Start animation
`stop()`	-	Stop active animation
`pause()`	-	Pause active animation
`release()`	-	Resume animation paused
`getTransitionTime()`	`<Number>`	Return the time interval between two animation steps (in milliseconds)
`setTransitionTime(<Number> transitionTime)`	-	Change the time interval between two animation steps
`isLooped()`	`<Boolean>`	Return the loop state
`setLooped(<Boolean> looped)`	-	Activate/Desactivate the loop state

TimeDimension update modes

Update mode can be one of these values: intersect, union, replace, extremes.

replace It replaces available times with only the new ones (from layer or setAvailableTimes).
union It adds new times and merge them to existing ones.
intersect It keeps only the time shared in both existing and new ones.
extremes It can recompute periodic times according to options.period and extreme values of the set.

Requisites

leaflet
iso8601-js-period
For the TimeDimension Control:
- Glyphicons Halflings

Talks

Leaflet.TimeDimension: ¡esto se anima!(esp) 10as Jornadas SIG libre. Girona 2016 | Video | Slides
Leaflet.TimeDimension webinar (eng) Interoperability and Technology/Tech Dive Webinar Series from ESIP | Video | Slides

Bugs, issues and contributions

Contributions and criticisms are welcome.

If you have any doubt or problem, please fill an issue!

If you fix something or want to add some contribution, many thanks in advance!

leaflet.timedimension's People

Contributors

Stargazers

Watchers

Forkers

neogis-de gijs eflowbeach fox91 r1m geosensorweblab rsignell-usgs chingchai tdamsma huangsong leaflet-forks guanml sanga epifanio diversoft vdemin ev4debug thdtjsdn a434828920 ameyc apulverizer mdartic jekuno patlmi arita37 tehgoti egurin diegomonteiro jerry-goodboy dajinchu ailong acrosby 13581803628 akshay-hegde leo137 litzebauer gesaleh murb jewijaya dodolooking cmarioherrera amirlb bigbri64 wxusa acvanzant beihl fullergalway jschristensen zefno vvnsze eduardocastanho devdattat ekkelenkamp fizzi fragosus pfgoting chezulkhairi fabchi nbiswasuw geofbaum terrabrasilis darkat viveksundarrajan shinnobi soiqualang hossein-madadi jagatmachines chiangmg84 maddan mattyfri3 nubiofs kaka10te btweller rschigas liyingben yeshwanth95 ezhaohongwei sd19surf bernaldani badajos hopkina bmoss6 am2222 cnr-ismar andradeclavero lynnting hhpp123 eoneed millee12 snakano0121 yangjing524 predicteur songsong1996 ccci-code nygula tolumbas brieden pedrodrim cfa-meteorologia portbcnjoantorres

leaflet.timedimension's Issues

Does not work with Jquery in noConflict mode

The use of global $ prevents the use of the library with jquery.noConflict().

Maybe you should wrap this in

(function($) { 
 //code
})(jQuery );

or use jQuery variable instead

Common features

Hi,
is a little time that I use this plugin and I write some things that could be useful to many developers:

why not use tags git for the versions?
why dependencies are written in the README.md and not in package.json?

One piece of advice I can give is to make the plugin also available through bower and not only as a package npm.

If you agree I can give you a hand to do some of the things that I have suggested.

add timedimension

i have several issues with the plugin

i do have a wms service with time dimension enabled, but the control shows "no time available"
when i set some options i got javascript-error
"ReferenceError: nezasa is not defined

if (nezasa === undefined) {"

my javascript code:

    var mapOptions = {
        center: L.latLng(52.022501, 4.438992),
        zoom: 12,
        timeDimension: true,
        timeDimensionControl: true,
        timeDimensionOptions: {
            timeInterval: "2015-04-29/2015-05-01"
            }
    };
var map = L.map('map', mapOptions);

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var mywms = L.tileLayer.wms("http://localhost:8080/geoserver/Mannus/wms", {
    layers: 'Mannus:meetdata',
    format: 'image/png',
    transparent: true
});
map.addLayer(mywms);

var testTimeLayer = L.timeDimension.layer.wms(mywms);
testTimeLayer.addTo(map);

Map center following moving marker

It would be great, on the gpx/kml esample, to let user choose between "general view" of the path (map is zoomd to see the whole path, as is now), or "detail view" (where map zoom and autocenter on actual marker, and follow it while it's moving with map.panto function).
I tried to do something for the "following" option adding to the .js file:

var vInterval = setInterval(function(){
map.panTo(marker.getLatLng()); // pan the map to follow the marker
}, 100);
but it's not perfect...(maybe the map move faster than the interval time)?
Besides, how can put an option, or better an icon switch for this choice, inside the map (something like the icon used for fullscreen switch)?
Thanx a lot

Player get stuck if jumping during animation

If you start to play an animation then jump in the timeline while the buffer is filling, it can get stuck on waiting for the buffer to be filled.
Clicking pause/play again restarts the loading and continue.

Reproduced on Example 1

Rewind on play

When the animation finishes (and loop is disabled) the time slider stays at the end position (which is ok).
If the user then clicks the play button nothing happens.

Expected: The animation rewinds to the start and the playback restarts.

Performance with many markers

I have a performance issue when Leaflet.TimeDimension shows many markers. To demonstrate this I created a jsbin which draws circleMarkers on a single canvas:
http://playground-leaflet.rhcloud.com/rus/1/edit?html,output

If you have a look at the time display of the player UI element you can see that the performance initially is good. It significantly drops when you move the slider to the end of the timeline.

For my use case I need to show ALL previous markers (as in the jsbin example). I suppose that Leaflet.TimeDimensiom currently keeps some stateful information for each marker it displays which results in this performance drop. Can you help me locating the according bottleneck?

I would expect that Leaflet.TimeDimension only draws the according marker to the canvas and then forgets everything about it when it advances to the next step.

Extending not replacing the _update method

Hey,
I've got another question regarding your plugin. I would like to extend the L.Control.TimeDimension._update method, without touching your library. I thought about doing it like this:
https://gist.github.com/trillerpfeife/f1c29c8c958b6be221289c6c069d7796
but this way is somehow not working.
Do you have any idea?

Have a nice day ☀️,
trillerpfeife

Can dragging slider update the layer?

Thanks for this nice plugin!

I would like to drag the slider to see the changes, without releasing it. Is it already possible - didn't find it in the docs!

Can't show Pulse icon (in example9)

Hi,

thank you and congratulations for your well done job and support.
I'd like to ask you how to change default icon with a simple pulsing icon. I've read issue before about custom marker...but wasn't helpful because..yes, i can change icon and his property without problems...but when i try to pulse icon ...tha page freeze and no icon is shown. I can't find the problem...maybe interference?
I ask to you...hope you can find a solution...!

Added L.Icon.Pulse.js e L.Icon.Pulse.css to example9.html and then changed L.icon with L.icon.pulse on example9.js...
/*
var icon = L.icon({
iconUrl: 'img/bluedot.png',
iconSize: [18, 18],
color:'red',
iconAnchor: [10, 10]
});
/
var icon = L.icon.pulse({iconSize:[20,20],color:'red'});
var customLayer = L.geoJson(null, {
pointToLayer: function (feature, latLng) {
if (feature.properties.hasOwnProperty('last')) {
//marker = new L.userMarker(location.latlng, {pulsing:true, accuracy:100, smallIcon:true}).addTo(map);
//marker.setLatLng(location.latlng);
//marker.setAccuracy(location.accuracy);
//return marker;
//return new L.marker(latLng,{icon: pulsingIcon});
/
return L.circleMarker(latLng, {
fillColor: 'red',
fillOpacity: 0.5,
stroke: false,
radius: 3
});
*/
return new L.Marker(latLng, {
icon: icon
});
}
return L.circleMarker(latLng);
}
});

var gpxLayer = omnivore.gpx('data/tr.gpx', null, customLayer).on('ready', function() {
map.fitBounds(gpxLayer.getBounds(), {
paddingBottomRight: [40, 40]
});
});

I tried also L.Usermarker plugin...but the problem seem no to be solved.
Thanx again...hope my problem can improve your plugin :-)
Andrea

index.zip

TimeDimension without using MapServer

Hello,
I'm try use the TimeDimension to animate and show images of radar in Brasil, but i'm not have a MapServer. It's possible use the TimeDimension to make that?

Time Dimension with Leaflet Git version and non integer zoom cause flicker

Dear All,
the new beta of leaflet introduces some parameter to change granularity of zoom level (zoomDelta) and allow you to have zoom with fractional value.
When a fractional zoom level is set, the time dimension animation flicker when change step. You can see and example in the following image.

Loading JSON with date/time

Hello,
I have been trying to tie a JSON file with a date field to the Time Dimension Layer but haven't been able to do so. Is there a particular way I need to name or call the time component for it to be recognized?
From the GeoJSON portion of the documentation, I get it searches for some keywords, but I'm not sure how it would work for a regular JSON... I seem to be missing how to link the timeDimension with the data itself...

In a way, I am trying to replicate Example 12 but loading some JSON data obtained from a local database. My JSON has a date field like "yyyy-mm-dd", not like "yyyy-mm-ddThh:mm:ss" in the example, and I am not querying the database for each data change but getting all the dates from a single request. Is there a way to do this or do I have to make new ajax requests for every date so the previous layer is removed and a new one is added?

Thanks a lot!

Support for WMTS

Are there any plans to support tiled wms layers?

Js error in execution on google chrome

Hello.

I created a script using your plugin to animate the radar images to Rio de Janeiro. When I run this script in Mozilla all goes well, but the Chrome don't understand that the dates of the images are already in UTC and decreases 3 hours date I step to him . You know a way to solve this? The link to the page : http://200.20.53.8/alertadecheias/radar_animation/

Thank you

Control layer output map

Hi,
The plugin works with L.control.layers. Is it possible to work from outside the map without L.control.layers (For example with buttons)?
Thanks

Layers with different timeDimensionOptions

Dear all,
is there a way to handle layers with different options like timeInterval and period?
I would like to show only a layer at the time and switch beetween the availables (that have different time interval) without reload my page. Can I use the 'overlayadd' and 'overlayremove' event of the map and set the new time dimension options?
thanks a lot
Claudio

Play button does not work till speed slider fps button is pressed once.

This is great plugin, I appreciate your efforts.

I am try to get the play button to work but have to first click the fps, speed slider button to get it to work.

Properly handle player control removal

TODO : Remove all listeners on map, timedimension, player.
This will allow playerControl.remove /add
You can assign it to me 😄

Hide/Show a NonTiledLayer can break buffering animation

Reproduced on example4 with current code 9af6721.

If you add a Control.Layers to this example :

L.control.layers({}, {'test': testTimeLayer}).addTo(map);

Scenario :

Set FPS to ~4,
start animation,
deselect the test layer,
wait 5 steps,
reselect.

❗ Buffer is stuck Waiting until buffer is loaded. 0 of 5 loaded
Manually stepping forward will release the buffer.

Panning and zooming doesn't clear the cache of timesteps

When I pan or zoom while playing, the cached images are still used at the different zoom/location. Is there a way to clear the cache of images?

Software to mount images

Hello.
My question is not about the plugin, but I would like to know what software you use to create images with the data models. I know the Grads , but his images seem to be much better than it generates.

If you can help , I am grateful .

Support for geometrycollections?

Is there support for GeometryCollections and not just a single Geometry for GeoJSON formatting?

Wrong fps label

When displaying the speed slider the knob has a middle position (10fps), but the label shows "1fps". The correct value is displayed as soon as I move the slider manually.

Tested with the following values:

transitionTime: 100
minSpeed:      0.1
maxSpeed:      20

Setting custom style in Example 12

Hi,
Hope I am here at the correct address, please otherwise delete this issue!

Based on example 12, I tried to load GeoJson data including several polygons and draw them using GeoJson prototype instead of heatmap. (http://apps.socib.es/Leaflet.TimeDimension/examples/example12.html)
Now I want to assign each polygon his own color based on a field in the GeoJson file (properties.color). The default examples I found (defining a style function, setStyle) I did not get working.
Is there a best practise to assign style attributes to layer in combination with TimeDimension and the step by step loading procedure of example 12?

Allow subdomain dispatch on NonTiledLayer

When loading a lot of timed layers, it can be useful to be able to dispatch browser requests on different subdomains like it's done for tiles on Tilelayers.
I don't think this should be added in this plugin code, but anyway, if someone needs it :

L.NonTiledLayer.WMS.mergeOptions({
  subdomains: 'abc'
});

L.NonTiledLayer.WMS.include({

  _originalGetTileUrl: L.NonTiledLayer.WMS.prototype.getImageUrl,

  getImageUrl: function () {
    var url = this._originalGetTileUrl.apply(this, arguments);
    return L.Util.template(url, {
      s: this._getSubdomain(this.wmsParams.time),
    });
  },

  _getSubdomain: function (time) {
    var index = 0,
      date, sub = '';

    if (time && this.options.subdomains.length > 0) {
      date = new Date(time);
      //Arbitrary algorithm to get different subdomain for different time, but should be reproductible in order to allow browser cache
      index = (this.options.layers.length + date.getMinutes() + date.getHours()) % this.options.subdomains.length;
      sub = this.options.subdomains[index];
    }
    return sub;
  }
});

L.NonTiledLayer.WMS.addInitHook(function () {
  if (typeof this.options.subdomains === 'string') {
    this.options.subdomains = this.options.subdomains.split('');
  }
});

Then declare a L.NonTiledLayer.WMS with an URL like http://{s}.myWMS.com/...

Allow dragging the slider to instantly updating the map

I wonder if its possible to implement a function to drag the slider which instantly updated the map?!
Is this possible?
Have a nice Day

Handle WMS with "?" in url

Dear all,
I need to use the TimeDimension plugin for leaflet with a WMS server that has a special token in the request (var urlWMS = "https://myurl.com/wms?token=password";)

In Layer WMS i change those lines in _requestTimeDimensionFromCapabilities function:
Row 234
var wms = this._baseLayer.getURL(); var url = wms + "?service=WMS&version=" + this._wmsVersion + "&request=GetCapabilities";
with
var url = wms; if (wms.indexOf('?') > -1) url += '&' else ulr += '?' url += "service=WMS&version=" + this._wmsVersion + "&request=GetCapabilities";

With this code, the url will generate correctly without the double '?'.
I hope you can add this modification in the main code.
Claudio

Dynamic Update of Time Slider Extents from Features

This is a feature request, would it be possible to have an additional URL, perhaps attached to the tileDimensionOptions, with a WFS url, layer name, time_column, etc that would be interpreted for updateTimeDimension? That way, the timeslider would only show the times of what's visible. WFS formats that would be easy to parse are CSVs, or GeoJSON.

My use-case is a whole lot of satellite images, over a very long time series. This is the perfect plugin to use as it has the ability to play through available images. However, if a large satellite archive is used, the time slider isn't really relevant. But if only the images in leaflet display are used to determine the time controller, animations would be very slick and extremely dynamic to the data available. Using WFS seems the simplest way to go about this. I think most of the changes would be around getTimesFromLayerCapabilities, with an additional options added with WFS url, WFS column, and name of WFS layer.

TimeDimension compatibility with Leaflet 1.0 beta 1

Dear developer,
thanks a lot for your great plugin.
Do you plan to add support for Leaflet 1.0 beta 1 to TimeDimension?
I try to upgrade the js in your example but I give an "callback not define" error in javascript into the main leaflet code.
Thanks a lot
Claudio

Bower dependencies too restrictive

After #20, which is a good thing, I was about to do it myself.
May I suggest :

"dependencies": {
    "iso8601-js-period": "*",
    "leaflet": "~0.7.4 || ~1.0.0",
    "jquery": "1.x || 2.x"
    "jquery-ui": ">=1.10"
  }

Because you use almost use nothing from jquery ($.ajax), you don't need a specific version.
You also support leaflet 1.0

About example 9

Hi
Your Leaflet applications are wonderful! I am a beginner of leaflet and interested in your leaflet example 9 . I tried to open 'example9.html' after your entire folder was downloaded(I didn't change anything) . However , there's no track shows on the map. Time slider shows 'Time not available' . Please see the attached file below:

I really want to play with this example. Could you tell me how to figure that issue?

Thanks a lot.

Xavier

Be notified when the layer has been updated

It would be nice to be notified when the layer has been updated. So that it's possible to adjust the map bounding box.

Player layout is broken on touch enabled devices

When leaflet detects a touch device, it changes its own appearance (bigger buttons,...).
This also break TimeDimension CSS rules. Even on desktop with touch screen.

You can simulate this by adding leaflet-touch class to the leaflet map container

overlay animated path+points layer

Hi
would it be possible to make example9 work with a GEOjson file?
This is because usually, other than the animated path (polyline, loaded from gpx or kml), it would be useful to show a overlay layer with the single points (each one with popup enabled to show date,location and fix number)...and it seems possible only with geoJson (or not?). I'm thinking to convert my gpx file in a geoJson (like attached, adding datetime values..) and then use:

var overlayMaps = {
"GPX Layer": gpxTimeLayer,
"pt": jsonLayer
};

...but then i'll have 2 similar file with coords in my projects...and is not a good solution. All gps data should be in a single file, that serve both animated path overlay and single points layer (usr can choose if enable both or each one)
Another solution would be to find a way to extract single points from the gpx file you use and base my extra overlay layer on this...but is it possible?
tr.zip

Timedimension on IE /Edge - Blink, Flicker behaviour

When you change the value of FPS, the behaviour in IE/Edge is different from Chrome, FF, Opera.
The wms layers transition is not smooth, with a blinky/flickery transition (It could potentially trigger an epilepsy attack on some users).
Do you know were in the Timedimension code we can try to get this behaviour fixed?

Play and cache

Hi,
I found an error when i playing and move the map (or change zoom).
The plugin save in cache the next X layers that are currently visible, and when i move the map don't load the new tiles until the cache is empty.

Customizing the marker

How can I change the marker of the 'current position' without overwriting the marker-icon.png :) ?

BTW: I'm speaking of the addlastPoint: true option

Somehow one needs to replace this with e.g. a custom marker:

var marker = L.marker([lat, lon]);
var icon = L.icon({
    iconUrl: './path-to-im/test.png',            
    iconSize: [24, 24],
    iconAnchor: [10, 10]
});
marker.setIcon(icon);
marker.addTo(vrpMap);

Style layer

Hi,
In example 6, the layer is smoothing (areafill style)
Example 1: contour lines
I have found that there are other filters for ncWMS. How I can install these filters in Thredds? Only exist in the file ImageProducer.java "BOXFILL, VECTOR, CONTOUR, BARB, STUMPVEC, TRIVEC, LINEVEC, FANCYVEC, PRETTYVEC"
Thanks

updateTimeDimension

I forked your repo and tried to re-create a radar layer for the US. I ran into an issue when I added the updateTimeDimensions: true to get realtime updates...

The error I have is in this function this._availableTimes is empty. I tried increasing the loadingTimeout, but that didn't seem to help :
_newTimeIndexLoaded: function() {
if (this._loadingTimeIndex == -1) {
return;
}
var time = this._availableTimes[this._loadingTimeIndex]; // <---- Time is undefined because this._availableTimes is empty [].

Not sure if you have any insight, but here is my code:
https://github.com/eflowbeach/MobileWeather/blob/master/js/mobileweather.js#L51

Player buffer usage is odd

What's the intended behavior for the buffer ?
It's seems like the player wait until the buffer is filled then start playing and load the next time.
But it waits until the next time is loaded (buffer filled again). So we have 4 layers preloaded but never used because we always wait for 5.

Am I missing something ?
Because I expected it to load 5, then play until the buffer is empty while preloading up to 5 layers ahead of current time.

NonTiledLayer not correctly initialised if hidden with cache

Using

leaflet 1.0b2. with L.control.layers.
ptv-logistics/Leaflet.NonTiledLayer@9cd29a2

I have 3 timedimension layer based on NonTiledWMS layer with cache setting set to 10.

If you navigate forward with one layer unchecked, then check it and play enough manually with the player, you end up with img tag with no URL and thus your layer is not displayed.
(not able to produce a systematic scenario but more or less 4 steps forward, check the layer then 8 backward, then 9 steps forward)

Reproduced on example 6 with leaflet 1.0, latest NTL and cache setting to 10 for each layers.

AutoPlay

Hello
Not long ago, I try to run my animation with autoplay . But it did not work. I looked in the examples of you and saw that there also is not working.
You have disabled this function ?
The link of my application is : http://200.20.53.8/alertadecheias/radar_animation/index.html

Thank you very much.

Movie loop example?

Is there an example that shows how to create an animation loop?

I'm thinking that a user might want to set a start time, a stop time, and number of frames for the animation, then play the movie over and over.

And hopefully after the first time the frames would be cached and would be fast.

Is this possible?

Loading GeoJSON step by step

Hi @bielfrontera,
you can at the time, load the various steps of a GeoJSON, as with a WMS layer?

I'll explain:
I have a GeoJSON that contains a lot of data (tens of MB).
You can load a file (eg index.json) containing an array of dates (eg ["20151202T220000Z","20151202T230000Z"]), and then load the various GeoJSON necessary (eg 20151202T220000Z.geojson, 20151202T230000Z.geojson, etc.)?

Backward playing

Is it possible to make the L.TimeDimension.Player to buffer also for backward playing? I sometimes need to play times backward.

Sliders not working on mobile

Time and Speed sliders are not working with touch event (jquery UI related).

I propose two solutions for this problem :

Use an input[type=range]
- Pro : easy, native
- Cons : not supported on IE < 10 without polyfill
Implement a custom slider with L.draggable like kartena/Leaflet.zoomslider
- Pro : No dependency
- Cons : harder to maintain

Any thought on that @bielfrontera ?

CSS for slider should be selectable

Currently we have
leaflet-control-timecontrol timecontrol-slider as css class for the time slider and
leaflet-control-timecontrol timecontrol-slider timecontrol-speed for the FPS slider. So one cannot easily select the time slider without selecting also the FPS slider

Hide marker for current time

I use the duration option of L.TimeDimension.Layer.GeoJSON with a null value to show all previous times. Is there an easy way to show all previous times except of the current time?

Accessors + documentation

It would be nice to extend the API documentation to explicitly point out how to access the TimeDimension object and the TimeDimension Control:

timeDimension        = map.timeDimension    
timeDimensionControl = map.timeDimensionControl

(Currently it's only documented how to attach them to L.Map through timeDimension: true and timeDimensionControl: true)

The same for accessing the player:
player = timeDimensionControl._player

Am I right that there's no public accessor for the player yet?

socib / leaflet.timedimension Goto Github PK

leaflet.timedimension's Introduction

Leaflet TimeDimension

Examples and basic usage

API

L.Map

L.TimeDimension

Usage example

Creation

Options

Events

Methods

L.TimeDimension.Layer

Options

Events

L.TimeDimension.Layer.WMS

Usage example

Creation

Options

L.TimeDimension.Layer.GeoJSON

Usage example

Creation

Options

L.Control.TimeDimension

Usage example

Creation

Options

L.TimeDimension.Player

Usage example

Creation

Options

Events

Methods

TimeDimension update modes

Requisites

Talks

Bugs, issues and contributions

leaflet.timedimension's People

Contributors

Stargazers

Watchers

Forkers

leaflet.timedimension's Issues

Recommend Projects

Recommend Topics

Recommend Org