Add time dimension capabilities on a Leaflet map.

Checkout the Leaflet TimeDimension Demos. Basic example:

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 testWMS = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var testLayer = L.nonTiledLayer.wms(testWMS, {
    layers: 'sea_water_velocity',
    format: 'image/png',
    transparent: true,
    styles: 'prettyvec/rainbow',
    markerscale: 15,
    markerspacing: 20,
    abovemaxcolor: "extend",
    belowmincolor: "extend",
    colorscalerange: "0,0.4",
    attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
var testTimeLayer = L.timeDimension.layer.wms(testLayer);
testTimeLayer.addTo(map);

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

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.

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

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.

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.

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 an 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 that 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).

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

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

• iso8601-js-period
• For the TimeDimension Control:
  • jquery
  • jquery UI
  • glyphicons

Contributions and criticism 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!