achavi
achavi copied to clipboard
nrenner
Adding Timeline Slider
Really like this project, to show progress in mapping parties. Can we add a timeline slider? Maybe specify the time upper and lower time limit.
That would be a nice feature. But before adding any new stuff, this project urgently needs some refactoring and either switching to Leaflet or upgrading to OL3. Right now I'm working on other projects and I can't really tell when I'll get back to this one.
With html 5 a date picker is given for free. Beware that type="datetime" is no supported everywhere and "datetime-local" is removed from the spec. So we have to use one date and one time input for this and using both info. I would not implement a shim for old browsers, but detect the support of at runtime and build the two inputs.
I have not used Html5 date/datetime inputs, because of limited datetime support and because I don't like splitting date and time. I would prefer some external component that works across browsers and has a common look&feel. With a quick search I found bootstrap-daterangepicker that seems quite nice and also has an option for pre-defined ranges (e.g. a day/week/month ago).
Regarding the timeline slider, I'm not sure if that could be used for datetime range selection (in addition or instead of input fields?), just for the playback of already loaded data, or for both? Problem is that ranges can vary from seconds to years, so the timeline granularity needs to be adjustable (some are by mouse wheel). Some examples I collected:
http://prabhasp.github.io/OSMTimeLapseR/demo/kathmandu_monthly.html http://www.livingwithdragons.com/maps/ohm-highlights/ http://cesiumjs.org/Cesium/Build/Apps/CesiumViewer/index.html http://michaelsteffen.github.io/rides-gl/ http://recallfx.github.io/LeafletPlayback/examples/example_1.html
Opinions/suggestions?
my favorit is http://michaelsteffen.github.io/rides-gl/ ! But I have no idea how to include this in your style of small elements.