search

nrenner / achavi

achavi - Augmented OSM Change Viewer - alpha
MIT License
41 stars 15 forks source link

Adding Timeline Slider #1

Open neogeomat opened 10 years ago

neogeomat commented 10 years ago

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.

nrenner commented 10 years ago

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.

neogeomat commented 10 years ago

Yes, i'm also stuck in between leaflet and ol3 for my projects.

nrenner commented 10 years ago

Still no slider, but you now can specify a start and end date/time, see my diary entry.

ghost commented 9 years ago

I would vote for a date picker.

HolgerJeromin commented 9 years ago

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.

nrenner commented 9 years ago

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?

ghost commented 9 years ago

my favorit is http://michaelsteffen.github.io/rides-gl/ ! But I have no idea how to include this in your style of small elements.