Leatlet Time-Dimension, Biel Frontera, SOCIB

Leatlet Time-Dimension, Biel Frontera, SOCIB

Summary: Leaflet.TimeDimension is a free, open-source Leaflet.js plugin that enables visualization of spatial data with a temporal dimension. It can manage different types of layers (WMS, GeoJSON, Overlay) and it can be easily extended. It meet some common needs, enabling web maps using observational and forecasting layers generated by a THREDDS server (via ncWMS), animating trajectories of drifters, gliders, follow a simulated oil spill, and other time dependent mapping applications.

Speaker: Biel Frontera was trained as a mathematician, and has spent most of his career developing software. He is a free software enthusiast and has worked for the last 3 years on data visualization and geospatial software issues for SOCIB, the Baleric Islands Coastal Observing and Forecasting System.

1bfb948b87cd5766db6ceac17d854d62?s=128

ESIP Federation

May 12, 2016
Tweet

Transcript

  1. Leaflet.TimeDimension Biel Frontera SOCIB. Balearic Islands Coastal Observing and Forecasting

    System
  2. SOCIB. Distributed Multiplatform Observing System http://www.socib.eu

  3. A multi­platform system with three major subsystems: Observing facilities: fixed

    stations such as oceanographic boys, coastal stations, weather stations and sea level stations. We also have a glider fleet, a mid­size research vessel, profiler drifters and surface drifters and an HF Radar station. The Forecasting and Modelling Facility: An ocean forecasting system representing currents, temperature, salinity and sea level in the western Mediterranean Sea; A meteo­tsunami forecasting system aiming at predicting the occurrence of meteo­ tsunamis ("rissagues") in Ciutadella Harbor (Menorca); A wave forecasting system implemented around the Balearic Islands A Data Centre Facility: general data management system to guarantee international standards, quality assurance and inter­ operability.
  4. None
  5. Scenario : THREDDS Data Server (TDS ) + ncWMS Data

    collected by SOCIB and forecasting data is in generally stored in NetCDF files, and distributed using THREDDS Data Server
  6. Previous work : The Lightweight for NetCDF viewer (Lw4nc2 )

    Switch to map Path to thredds ncWMS service SOCIB HF Radar (3km resolution) Information Style selection Scale selection prettyvec rainbow 14 14 253 Extend 0.4 0 Controls Time selection Variable selection Opacity selection Mo Tu We Th Fr Sa Su 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 08:00:00.000Z Velocity Quality flag for direction Timeseries plotting in a point Transect plotting SOCIB HF Radar (3km resolution) | Data access | More information Marker Size: Marker Spacing: Num color bands: Above max: Upper: Lower: May 2016 + −
  7. LW4NC2 is an application similar to Godiva that allows the

    user to browse through gridded files by variable or date. It also allows the user to extract time series at chosen locations, change styles and perform other visualization tasks. Developed using OpenLayers (v2) Two years ago we added a time animation control This is an app that we currently use at SOCIB, and it is quite complete. But we understand it covers only an specific use case. We wanted to embed map viewers in our websites, and we also needed animations for other kind of map layers, as geojson layers, to be able to animated trajectories of our mobile platforms.
  8. Before developing Leaflet.TimeDimension, we were showing in our website only

    the last available observation of our HF Radar facility.
  9. Now, we can show an animation of the observations, among

    other improvements (see ) http://www.socib.es/? seccion=observingFacilities&facility=radar + -    2015­09­01T00:00:00.000Z 5fps  Leaflet (http://leafletjs.com) | Data by OpenStreetMap (http://openstreetmap.org), under ODbL (http://www.openstreetmap.org/copyright)., SOCIB HF Radar
  10. Or we can animate the trajectories of a bunch of

    surface drifters… This is the example of a campaign in the alboran sea. http://test.socib.es/en/facilities/observing­facilities/lagrangian­platforms/
  11. None
  12. Dive into Leaflet.Timedimension https://github.com/socib/Leaflet.TimeDimension

  13. Leaflet.Timedimension contributions

  14. Leaflet.Timedimension : basic code examples Basic example with a WMS

    Layer: v a r m a p = L . m a p ( ' m a p ' , { t i m e D i m e n s i o n : t r u e , t i m e D i m e n s i o n C o n t r o l : t r u e , } ) ; v a r o c e a n F o r e c a s t i n g W M S = " h t t p : / / t h r e d d s . s o c i b . e s / t h r e d d s / w m s / o p e r a t i o n a l _ m o d e l s / o c e a n o g r a p h i c a l / h y d r o d y n a m i c s / m o d e l _ r u n _ a g g r e g a t i o n / w m o p / w m o p _ b e s t . n c d " ; v a r t e m p e r a t u r e L a y e r = L . t i l e L a y e r . w m s ( o c e a n F o r e c a s t i n g W M S , { l a y e r s : ' t e m p ' , f o r m a t : ' i m a g e / p n g ' , t r a n s p a r e n t : t r u e , s t y l e s : ' b o x f i l l / s s t _ 3 6 ' } ) ; v a r t e m p e r a t u r e T i m e L a y e r = L . t i m e D i m e n s i o n . l a y e r . w m s ( t e m p e r a t u r e L a y e r , { u p d a t e T i m e D i m e n s i o n : t r u e , } ) . a d d T o ( m a p ) ;
  15. Leaflet.Timedimension : basic code examples Basic example with a GeoJSON

    Layer: v a r m a p = L . m a p ( ' m a p ' , { t i m e D i m e n s i o n : t r u e , t i m e D i m e n s i o n C o n t r o l : t r u e , } ) ; $ . g e t J S O N ( ' d a t a / e x a m p l e . g e o j s o n ' , f u n c t i o n ( d a t a ) { v a r g e o J s o n L a y e r = L . g e o J s o n ( d a t a ) ; v a r g e o J s o n T i m e L a y e r = L . t i m e D i m e n s i o n . l a y e r . g e o J s o n ( g e o J s o n L a y e r , { u p d a t e T i m e D i m e n s i o n : t r u e , d u r a t i o n : ' P T 2 0 M ' , } ) ; g e o J s o n T i m e L a y e r . a d d T o ( m a p ) ; m a p . f i t B o u n d s ( g e o J s o n L a y e r . g e t B o u n d s ( ) ) ; } ) ;
  16. Remarks about GeoJSON According to GeoJSON specification, geometry coordinates can

    have only three dimensions: latitude, longitude and elevation. So, there isn't a standard way to fill time dimension information in GeoJSON format. Leaflet.TimeDimension searchs for these properties to get time information of each feature: time, times, coordTimes or linestringTimestamps
  17. Leaflet.TimeDimension : create new timedimension layer types TimeDimension.Layer is an

    abstract Layer that can be synchronized with a TimeDimension. The constructor recieves a layer (of any kind) and options. The plugin is shipped with GeoJSON and WMS TimeDimension layers (seen before). That classes can be extended, or you can create a new class than should implement at least this three methods: _onNewTimeLoading, isReady and _update TimeDimension.Layer.CircleLabelMarker is an example of this (we will see later at example13)
  18. Leaflet.TimeDimension : interact with time v a r m a

    p = L . m a p ( ' m a p ' , { t i m e D i m e n s i o n : t r u e , t i m e D i m e n s i o n C o n t r o l : t r u e , } ) ; / / M o d i f y t h e c u r r e n t t i m e m a p . t i m e D i m e n s i o n . s e t C u r r e n t T i m e ( n e w D a t e ( ) . g e t T i m e ( ) ) ; / / L i s t e n t o t i m e d i m e n s i o n e v e n t s / / t i m e l o a d : F i r e d w h e n a a l l s y n c e d l a y e r s h a v e b e e n l o a d e d / p r e p a r e d f o r a n e w t i m e ( o r t i m e o u t ) m a p . t i m e D i m e n s i o n . o n ( ' t i m e l o a d ' , f u n c t i o n ( d a t a ) { / / E x a m p l e : u p d a t e h t m l e l e m e n t s w h e n t i m e i s c h a n g e d v a r c u r r e n t D a t e = n e w D a t e ( m a p . t i m e D i m e n s i o n . g e t C u r r e n t T i m e ( ) ) ; / / o r d a t a . t i m e v a r d a t e E l e m e n t = $ ( " # d a t e " ) ; d a t e E l e m e n t . f i n d ( ' s p a n . m a p d a t e ' ) . h t m l ( c u r r e n t D a t e . f o r m a t ( " d d / m m / y y y y " , t r u e ) ) ; d a t e E l e m e n t . f i n d ( ' s p a n . m a p t i m e ' ) . h t m l ( c u r r e n t D a t e . f o r m a t ( " H H : M M " , t r u e ) ) ; d a t e E l e m e n t . s h o w ( ) ; } ) ;
  19. Leaflet.Timedimension : basic code examples Let's comment some examples from

    http://apps.socib.es/Leaflet.TimeDimension/examples/
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. Leaflet.TimeDimension meets folium! Folium is a Python package that allows

    you to manipulate your data in Python, then visualize it in on a Leaflet map via Folium. i m p o r t f o l i u m g e o _ d a t a = { " t y p e " : " F e a t u r e C o l l e c t i o n " , " f e a t u r e s " : [ ] } m = f o l i u m . M a p ( [ 0 , 3 ] , z o o m _ s t a r t = 2 ) f o l i u m . G e o J s o n ( g e o _ d a t a ) . a d d _ t o ( m ) m
  29. + - Leaflet (http://leafletjs.com) | Data by OpenStreetMap (http://openstreetmap.org), under

    ODbL (http://www.openstreetmap.org/copyright).
  30. f r o m f o l i u m

    i m p o r t p l u g i n s m = f o l i u m . M a p ( [ 0 , 3 ] , z o o m _ s t a r t = 2 ) t g j = p l u g i n s . T i m e s t a m p e d G e o J s o n ( g e o _ d a t a ) m . a d d _ c h i l d r e n ( t g j )
  31. + -    2015­07­01T00:00:00.000Z 5fps  Leaflet (http://leafletjs.com)

    | Data by OpenStreetMap (http://openstreetmap.org), under ODbL (http://www.openstreetmap.org/copyright).
  32. Leaflet.TimeDimension in use HF RADAR: WAVE FORECAST: MEDCLIC PROJECT: NEW

    SOCIB WEBSITE (soon) http://www.socib.es/?seccion=observingFacilities&facility=radar http://www.socib.es/?seccion=modelling&facility=sapo http://medclic.es/en/instrumentos/modelado­y­prediccion/
  33. Questions ?

  34. Thank you!