Feature request: Timeslider & workflow design ideas

[JaimeLynSchatz]

There's a bit of discussion over on Bugzilla regarding a Javascript widget that will work as a time selector for users of the OHM.

Should we move that discussion over here or keep it on Bugzilla or ... ?

[timwaters]

Keeping links to discussions is good

[JaimeLynSchatz]

Here's this from the mailing list, too, then: https://lists.openstreetmap.org/pipermail/historic/2014-May/000418.html

[muninn]

It must be added to the rails front end: http://wiki.openstreetmap.org/wiki/Rails_port/UI

[muninn]

Suggest we have something simple to get started and then link the date data into the rendering for now.

[JaimeLynSchatz]

Here is a first-first-first draft (a doodle, really...:smile:)

http://jaimelynschatz.github.io/time_slider_mockup.png [[Ed: dead link as of 6-9-2020]]

[susannaanas]

Hi Jaime,

Thanks a lot for the draft. In the Finnish version of the OSM/OHM interface the toolbar is already so crowded that the text gets scrambled on my screen. I would propose adding the controls inside the map area, attached to the search input box.

It may be beneficial to sketch out wireframes of various stages of interaction without thinking too much of the colors or forms. We are trying to tie the interface to that of the Wikimaps tools, especially the MapWarper, and modifying both interfaces to make them feel part of the same experience.

So if you sketch out those I could bounce back with a proposal for an initial look of it.

Cheers, Susanna

2014-05-28 20:28 GMT+03:00 JaimeLynSchatz notifications@github.com:

Here is a first-first-first draft (a doodle, really...[image: :smile:])

http://jaimelynschatz.github.io/time_slider_mockup.png

— Reply to this email directly or view it on GitHubhttps://github.com/OpenHistoricalMap/ohm-website/issues/15#issuecomment-44438800 .

[JaimeLynSchatz]

Thanks for the feedback!

Is there a preferred Wiki way of sharing wireframes and sketches? A particular tool or hand drawn and scanned/photographed or... ?

[susannaanas]

Not that I know of, feel free to invent your own or use the tool of your liking!

Susanna

2014-05-29 5:39 GMT+03:00 JaimeLynSchatz notifications@github.com:

Thanks for the feedback!

Is there a preferred Wiki way of sharing wireframes and sketches? A particular tool or hand drawn and scanned/photographed or... ?

— Reply to this email directly or view it on GitHubhttps://github.com/OpenHistoricalMap/ohm-website/issues/15#issuecomment-44488626 .

[JaimeLynSchatz]

Here's a new mockup. Sorry for the crummy quality. Working on finding some better tools but didn't want to waste too much time on that particular yak.

http://jaimelynschatz.github.io/search_placement.jpg

[susannaanas]

I like that the controls are in that corner.

There are a couple of documents I would like too share with you. The first one is a wild proposal to make the tools in the toolchain share a common layout. There is no single layout to adopt, but maybe the guiding principle is that it would resemble iD a lot. Here's a sketch how MapWarper could look like: https://commons.wikimedia.org/wiki/File:Wm%E2%80%93maps-warp-01.png

Here are some thoughts of what could a control for inputting/querying dates, ranges and epochs be like and what the input would translate into (in regard to the time data type in Wikidata): https://commons.wikimedia.org/wiki/File:Wikimaps_search_input_-_Time.png

Wikidata date data type: https://www.mediawiki.org/wiki/Wikibase/DataModel#Dates_and_times

The style is imaginary, so applying this to some environment would make it look different.

For the time slider: I think it will be important to zoom into different granularities in time and make the interface accommodate to that. So a day in history would have all the space from left to right in the time slider as well as the whole ice age.

I imagine that there will be a time range slider pair (from-to) and a point slider within those bounds. The range slider would set the scene and the point slider would play the show.

For the epochs: We can imagine that there will be an endless number of epochs that are retrieved in all 290 languages of Wikimedia and alternative spelling options. Should the search for an epoch show a hierarchical tree? Does it give a list of possible hits below the search field?

Feel free to disagree!

Susanna

2014-05-29 21:04 GMT+03:00 JaimeLynSchatz notifications@github.com:

Here's a new mockup. Sorry for the crummy quality. Working on finding some better tools but didn't want to waste too much time on that particular yak.

http://jaimelynschatz.github.io/search_placement.jpg

— Reply to this email directly or view it on GitHub https://github.com/OpenHistoricalMap/ohm-website/issues/15#issuecomment-44563754 .

[susannaanas]

To complement the Wikidata date stuff:

An event or an epoch can be described with two dates: start date and end date, so there is no need to try to make it with one date entry alone.

Susanna

2014-05-30 13:12 GMT+03:00 Susanna Ånäs susanna.anas@gmail.com:

I like that the controls are in that corner.

There are a couple of documents I would like too share with you. The first one is a wild proposal to make the tools in the toolchain share a common layout. There is no single layout to adopt, but maybe the guiding principle is that it would resemble iD a lot. Here's a sketch how MapWarper could look like: https://commons.wikimedia.org/wiki/File:Wm%E2%80%93maps-warp-01.png

Here are some thoughts of what could a control for inputting/querying dates, ranges and epochs be like and what the input would translate into (in regard to the time data type in Wikidata): https://commons.wikimedia.org/wiki/File:Wikimaps_search_input_-_Time.png

Wikidata date data type: https://www.mediawiki.org/wiki/Wikibase/DataModel#Dates_and_times

The style is imaginary, so applying this to some environment would make it look different.

For the time slider: I think it will be important to zoom into different granularities in time and make the interface accommodate to that. So a day in history would have all the space from left to right in the time slider as well as the whole ice age.

I imagine that there will be a time range slider pair (from-to) and a point slider within those bounds. The range slider would set the scene and the point slider would play the show.

For the epochs: We can imagine that there will be an endless number of epochs that are retrieved in all 290 languages of Wikimedia and alternative spelling options. Should the search for an epoch show a hierarchical tree? Does it give a list of possible hits below the search field?

Feel free to disagree!

Susanna

2014-05-29 21:04 GMT+03:00 JaimeLynSchatz notifications@github.com:

Here's a new mockup. Sorry for the crummy quality. Working on finding some

better tools but didn't want to waste too much time on that particular yak.

http://jaimelynschatz.github.io/search_placement.jpg

— Reply to this email directly or view it on GitHub https://github.com/OpenHistoricalMap/ohm-website/issues/15#issuecomment-44563754 .

[JaimeLynSchatz]

Yes, I threw in some sample epochs as a sort of lorem ipsum. A hierarchy could be very useful, letting the user drill down into more specific time periods.

I'm still waiting for the code for the slider, and will work on integrating that in as soon as I have it.

Do we have some consensus that this is how I should proceed? (With the skidder being an option of the search box?)

[susannaanas]

I am preparing wireframes and getting ready to discuss this, but I think a key thing we should consider: Maybe OHM should always show a choice of time as a default. (Just leaving out the extra click)

Susanna

2014-05-31 23:19 GMT+03:00 JaimeLynSchatz notifications@github.com:

Yes, I threw in some sample epochs as a sort of lorem ipsum. A hierarchy could be very useful, letting the user drill down into more specific time periods.

I'm still waiting for the code for the slider, and will work on integrating that in as soon as I have it.

Do we have some consensus that this is how I should proceed? (With the skidder being an option of the search box?)

— Reply to this email directly or view it on GitHub https://github.com/OpenHistoricalMap/ohm-website/issues/15#issuecomment-44758674 .

[JaimeLynSchatz]

Here's where I am now. Slaying a bug that won't let the slider portion load.

http://jaimelynschatz.github.io/text-no-slider.png

[timwaters]

:thumbsup:

[JaimeLynSchatz]

@muninn (and anyone else who wants to chime in! :D)

After much head-bashing and far too many failed attempts, if I'm understanding the code here in the Geocoder controller properly, I think that even for a first step of rendering a map linked to the year, I need to use the results window (where the red mock "error" message is now in the image below) to generate a link to the map for the user to click on. I haven't found another way to tell the site which map we want to see.

I think I can find a way to just get a link in there without generating an entire results list. This is a half step away from our discussion this week on just making the map render. If you know of another way to tackle this, I'm all :ear: ears! :ear:

[muninn]

Jaime,

if I read the code correctly, you don't need the results window as much as inject some value for time into

https://github.com/OpenHistoricalMap/ohm-website/blob/master/app/assets/javascripts/leaflet.map.js.erb

this is what actually drives the loading of the layers and formats the tile urls.

The geocoder is what updates the lat/long based on a search but the leaflet is what loads the layer. The answer should be in there, Tim added the 2008/2009 views in there.

On Jul 10, 2014, at 12:58 PM, JaimeLynSchatz notifications@github.com wrote:

@muninn (and anyone else who wants to chime in! :D)

After much head-bashing and far too many failed attempts, if I'm understanding the code here in the Geocoder controller properly, I think that even for a first step of rendering a map linked to the year, I need to use the results window (where the red mock "error" message is now in the image below) to generate a link to the map for the user to click on. I haven't found another way to tell the site which map we want to see.

I think I can find a way to just get a link in there without generating an entire results list. This is a half step away from our discussion this week on just making the map render. If you know of another way to tackle this, I'm all ears!

— Reply to this email directly or view it on GitHub.

[JaimeLynSchatz]

I will jump back in to leaflet.map.js.erb. I must have given up too quickly there. I'll update as soon as I have something good to show! :)

[JaimeLynSchatz]

An update: Users are able to select the 2008 and 2009 Burning Man maps using the Year field in the Time Search form:

This action loads the 2008 Burning Man map layer and centers the map on that location:

The procedure above works for the 2009 Burning Man map, as well. It does not work for any other year yet, as shown below:

After battling a few bugs (including a Javascript syntax error that took entirely too long to hunt down because it manifested as a Rails error!), I'm back on track to get maps outside of Burning Man working. (It's a bit of a hack to make them appear the way they do.)

My question for @muninn and for anyone else who wants to give input, where can I find the data for other maps? I understand the the 'H' layer currently available is for 2013. It's so similar to 2014 that I'm not seeing a lot of difference when loaded. Should I keep looking through to find areas where the effects can be seen? (So I can be sure I'm actually achieving something with my hacks? :smile: )

[timwaters]

i like the idea of changing the map with the sliders, and using the sliders to search for data.

[timwaters]

'H' layer currently available is for 2013.

No the H layer is the whole OpenHistoricalMap data - everything, all years, on one tile layer. it's always going to be current and up to date to today.

where can I find the data for other maps

Do you mean data for other time periods?

Have a look in Estonia and in NYC, Seattle.

[JaimeLynSchatz]

:thumbsup: for the tips above and to Rob's "look over there in the server :point_right: !!!" over Google Chat. I'll have something good to post soon!

[timwaters]

Great point for external observers. A lot of discussion happens off github, and you can usually find us in IRC on oftc net on #ohm

[JaimeLynSchatz]

After lots of digging around in the code and multiple Leaflet tutorials, I'm still stuck here.

The error in the console is for the missing value for {t}. I'm working on sending the year through the {t}, just not there yet.

If there's something really obvious that I'm missing, please feel free to chime in!

---

---

UPDATE: I may have found a sticking point (or the place where I need to be. Not sure yet.) Over in the [https://github.com/OpenHistoricalMap/ohm-website/blob/master/vendor/assets/leaflet/leaflet.js leaflet.js] file (lines 2886 - 2893), the format for map urls is defined as such:

getTileUrl: function (tilePoint) {
            return L.Util.template(this._url, L.extend({
                s: this._getSubdomain(tilePoint),
                z: tilePoint.z,
                x: tilePoint.x,
                y: tilePoint.y
            }, this.options));
        },

Are we going to extend Leaflet here or am I way off-base?

[JaimeLynSchatz]

Adding a link to @nomoregrapes code for an OHM with highlights. The post in the mailing list didn't have a GitHub link but his blog post did.

[timwaters]

Oh yes! Thanks - I have forked it into this organisation :)

As for the Leaflet thing - I think that the Tiles get X Y and Z but we might end up passing in year also. Currently we dont use year for the 2008 tile sets though. I suppose we could hardcode those, and adapt that function?

[JaimeLynSchatz]

@timwaters: From the way I understand it, we're bringing in the 2008 and 2009 tiles by using the layer code at the end of the url, right? I've been trying to emulate that with the year layer but I'm not getting the data across properly and I'm not really sure where I should be pulling it in. (I haven't even been able to get something sensible to come across in the little thumbnail in the key on the right hand side of the screen.) (got that!) Am I being oblivious or was there a real trick to it?

[jeffreyameyer]

For people still on this ticket, we now have a timeslider.

Will be changing this to on-hold & good discussion of timeslider.

[jeffreyameyer]

This is a good thread, but going to close it to clean things up a bit.