Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ohm users can select time range with a TimeSlider #15

Open
JaimeLynSchatz opened this issue May 13, 2014 · 27 comments

Comments

Projects
None yet
4 participants
@JaimeLynSchatz
Copy link

commented May 13, 2014

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

This comment has been minimized.

Copy link
Member

commented May 16, 2014

Keeping links to discussions is good

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented May 16, 2014

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

@ghost

This comment has been minimized.

Copy link

commented May 27, 2014

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

@ghost

This comment has been minimized.

Copy link

commented May 27, 2014

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

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented May 28, 2014

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

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

@susannaanas

This comment has been minimized.

Copy link

commented May 28, 2014

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: 😄])

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


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

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented May 29, 2014

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

This comment has been minimized.

Copy link

commented May 29, 2014

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//issues/15#issuecomment-44488626
.

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented May 29, 2014

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

This comment has been minimized.

Copy link

commented May 30, 2014

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
#15 (comment)
.

@susannaanas

This comment has been minimized.

Copy link

commented May 30, 2014

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
#15 (comment)
.

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented May 31, 2014

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

This comment has been minimized.

Copy link

commented Jun 1, 2014

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
#15 (comment)
.

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented Jun 4, 2014

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

This comment has been minimized.

Copy link
Member

commented Jun 4, 2014

👍

@JaimeLynSchatz

This comment has been minimized.

Copy link
Author

commented Jul 10, 2014

@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.

screenshot of mock error message
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! 👂

@ghost

This comment has been minimized.

Copy link

commented Jul 10, 2014

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

This comment has been minimized.

Copy link
Author

commented Jul 10, 2014

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

This comment has been minimized.

Copy link
Author

commented Jul 15, 2014

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

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

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

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? 😄 )

@timwaters

This comment has been minimized.

Copy link
Member

commented Jul 16, 2014

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

@timwaters

This comment has been minimized.

Copy link
Member

commented Jul 16, 2014

'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

This comment has been minimized.

Copy link
Author

commented Jul 16, 2014

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

@timwaters

This comment has been minimized.

Copy link
Member

commented Jul 16, 2014

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

This comment has been minimized.

Copy link
Author

commented Jul 21, 2014

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

screenshot of layer placeholder with missing data

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

This comment has been minimized.

Copy link
Author

commented Jul 21, 2014

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

This comment has been minimized.

Copy link
Member

commented Jul 21, 2014

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

This comment has been minimized.

Copy link
Author

commented Jul 22, 2014

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.