Travel Mapping

Web Design Discussion => General Web Design Discussion => Topic started by: Jim on June 30, 2019, 10:22:46 pm

Title: Better edge/connection popups
Post by: Jim on June 30, 2019, 10:22:46 pm
I've worked some today on improving the popups that appear when you click on an edge/connection on a map.  Much of it has so far been deciphering and streamlining some of the existing code.  Nothing should have changed in HDX, but in the HB and on Mapview, you should now be able to get at least some meaningful and hopefully correct information.

Try out this version by going to any of the maps from the tmtest.teresco.org instance of the site.

Relevant issue: https://github.com/TravelMapping/Web/issues/228
Title: Re: Better edge/connection popups
Post by: mapcat on July 01, 2019, 12:17:25 am
Great new feature! The only odd behavior I've noticed so far is that occasionally the map shifts seemingly randomly after clicking on a segment. I.e., clicking on a segment in the center of the map may result in that segment moving to the edge of the map when the popup appears.

Edit: Eric mentioned the same behavior in the issue comments.
Title: Re: Better edge/connection popups
Post by: michih on July 01, 2019, 10:28:13 am
Thanks :) In HB, the units conversion doesn't apply to the popup. The number of positions after decimal point should be identical on the site (2 vs. 4)
Title: Re: Better edge/connection popups
Post by: CharlotteAllisonCDTG on July 01, 2019, 11:50:58 am
I went to the test web address.  Since I live just off GA 223 in Grovetown, Georgia, I looked at that page.  When I clicked on it, the map showed a spot in the Albany, NY area!  When I clicked on the junctions on the left side of the page, the map jumped to the correct area.  However, the junctions don't have any markers to click on.  Therefore, I can't test this feature out.   :-[
Title: Re: Better edge/connection popups
Post by: michih on July 01, 2019, 01:03:38 pm
Same here. No graph at all. Anything must have been changed in the last 2 hours.
Title: Re: Better edge/connection popups
Post by: Jim on July 01, 2019, 01:33:05 pm
Yes, active development today and I broke it.  Should be back soon.
Title: Re: Better edge/connection popups
Post by: Jim on July 02, 2019, 02:46:23 pm
Several improvements this afternoon.  Mostly in mapview behavior.  Check it out on tmtest.

Main flaws I am aware of:

- only the "topmost" polyline's info is used for concurrencies.  So the highest tier route, and within that, the one latest in the DB.

- Everything is miles, does not honor units preferences (waiting until the end to consider that).
Title: Re: Better edge/connection popups
Post by: Jim on July 02, 2019, 05:01:38 pm
Route names including HB links are now in the connection popups.  I think it's working on all but I'm happy to have people test.

Next idea: somehow highlight the Polyline on the map (maybe make it more opaque and/or wider or put some partially transparent Polyline on top of it) while the corresponding popup is showing.  I don't think this is hard.
Title: Re: Better edge/connection popups
Post by: Jim on July 02, 2019, 10:04:27 pm
Polyline highlighting now works everywhere I've tried.  A black but partially transparent and double width polyline is drawn over the selected segment.  I think it looks sharp as is, but I'm open to ideas on how to improve and of course let me know if anything appears broken.  This is all still on the tmtest.teresco.org version of the server.
Title: Re: Better edge/connection popups
Post by: yakra on July 02, 2019, 10:59:20 pm
An option to click for a list of travelers would be nice. Maybe a JavaScript alert; something with we could copy & paste would be ideal.
Title: Re: Better edge/connection popups
Post by: mapcat on July 03, 2019, 09:14:10 am
The highlighting looks good. How about making links in popups open in a new tab?



Title: Re: Better edge/connection popups
Post by: Jim on July 03, 2019, 09:37:57 am
The highlighting looks good. How about making links in popups open in a new tab?

Good idea.  Done.
Title: Re: Better edge/connection popups
Post by: michih on July 04, 2019, 02:21:56 pm
Polyline highlighting now works everywhere I've tried.
Route names including HB links are now in the connection popups.

Works fine. Is it possible to highlight the same segment in HB too?
Title: Re: Better edge/connection popups
Post by: Jim on July 04, 2019, 11:01:37 pm
Polyline highlighting now works everywhere I've tried.
Route names including HB links are now in the connection popups.

Works fine. Is it possible to highlight the same segment in HB too?

You mean in the HB window that pops up?  I think that would take some effort, but if it's a feature you think would be useful, I'd say put it in a GitHub issue in the Web repository.
Title: Re: Better edge/connection popups
Post by: michih on July 05, 2019, 09:27:40 am
I'd say put it in a GitHub issue in the Web repository.

https://github.com/TravelMapping/Web/issues/312
Title: Re: Better edge/connection popups
Post by: Jim on July 05, 2019, 02:12:03 pm
The main functionality here is now live on the production site.  If there are additional features of interest that don't already have GitHub issues, please create them.
Title: Re: Better edge/connection popups
Post by: oscar on July 05, 2019, 08:42:30 pm
Maybe a related new problem with the HB -- when I call up a route (in this particular case, new MD 206 -- but same issue for other routes), using my regular username oscar, instead of a map centered on the requested route, it's centered on the Siena College campus. When I click one of the waypoints listed in the HB's left column, it takes me to the right map location, but doesn't show any of the waypoints or associated popups.
Title: Re: Better edge/connection popups
Post by: Jim on July 05, 2019, 09:13:40 pm
@oscar: try a shift-reload to make sure your browser isn't caching old versions of any Javascript files.
Title: Re: Better edge/connection popups
Post by: oscar on July 05, 2019, 09:43:00 pm
That worked. Thanx.
Title: Re: Better edge/connection popups
Post by: mapcat on July 06, 2019, 05:22:17 pm
The main functionality here is now live on the production site.  If there are additional features of interest that don't already have GitHub issues, please create them.

Okay, here's one: https://github.com/TravelMapping/Web/issues/316

Shift-click to select multiple segments in mapview, produce .list entry in popup
Title: Re: Better edge/connection popups
Post by: Jim on July 09, 2019, 02:19:58 pm
Thinking about this modification: force the popup window to be at the northernmost point on the connection/edge (which would necessarily be an endpoint or shaping point) so it doesn't obscure any of the actual Polyline.  Opinions?
Title: Re: Better edge/connection popups
Post by: michih on July 09, 2019, 04:04:55 pm
I'm not sure whether I like or dislike it more. I think it would look odd when the segment is vertical. But I'd like to see it live an play with it.
Title: Re: Better edge/connection popups
Post by: mapcat on July 09, 2019, 07:02:44 pm
Thinking about this modification: force the popup window to be at the northernmost point on the connection/edge (which would necessarily be an endpoint or shaping point) so it doesn't obscure any of the actual Polyline.  Opinions?
Go for it. The need to close the popup to select another segment slightly annoyed me.
Title: Re: Better edge/connection popups
Post by: yakra on July 14, 2019, 09:44:07 am
Not implemented yet, I presume?
https://github.com/TravelMapping/Web/issues/327

I'm not sure whether I like or dislike it more.
Seconded.
Title: Re: Better edge/connection popups
Post by: Jim on July 14, 2019, 11:04:59 am
I haven't done it yet.
Title: Re: Better edge/connection popups
Post by: Jim on July 15, 2019, 08:52:25 pm
tmtest has the "put the popup at the northernmost point on the Polyline" mentioned above.

I think it's an improvement, but would leave it as it is on the production server if there's a lot of preference expressed for the old way.
Title: Re: Better edge/connection popups
Post by: Jim on July 15, 2019, 09:14:53 pm
As part of my attempt to address https://github.com/TravelMapping/Web/issues/327 I've also changed it so at zoom levels 12 and up, it does not force the popup at the northernmost point.
Title: Re: Better edge/connection popups
Post by: michih on July 16, 2019, 01:09:59 pm
Since it's only at zoom level 12 and down, it's fine to me! I'm also sure that it would be bad with higher zoom levels. I'd leave it as-is and bring it to the production server.
Title: Re: Better edge/connection popups
Post by: yakra on July 16, 2019, 01:28:47 pm
Sounds like a good compromise, best-of-both-worlds approach.
Is a compromise really best-of-both-worlds though? Maybe I mean "second-best-of-both-worlds approach." Bleah. Semantics.
Title: Re: Better edge/connection popups
Post by: michih on July 16, 2019, 02:46:09 pm
Is a compromise really best-of-both-worlds though? Maybe I mean "second-best-of-both-worlds approach."

I think it is the best solution since we have different use-cases.
Title: Re: Better edge/connection popups
Post by: yakra on July 16, 2019, 05:36:12 pm
LOL, I was just poking fun at my own poor use of language there.
(If we're able to actually get the best of both worlds, and neither "world" has to settle for second-best, then by definition there's not really any need to compromise.
OTOH, if we are compromising, that implies that both worlds are settling for less.)


But seriously, I haven't tried out the new enhancement myself yet, just read the discussion & michih's reviews & description of how it works.
And it sounds pretty good, for what we're working with.

How about this?
Test whether the northernmost point is inside the viewport.
If so, then open the popup at the northernmost point.
If not, then open the popup at the click location.
Would this work?
Title: Re: Better edge/connection popups
Post by: Jim on July 16, 2019, 07:32:13 pm
How about this?
Test whether the northernmost point is inside the viewport.
If so, then open the popup at the northernmost point.
If not, then open the popup at the click location.
Would this work?

I like the idea, but I think the test is complicated a bit by the fact that we'd want to make sure that not only the northernmost point is in the viewport, but whether it's far enough down from the top that there's room for the popup without an automatic pan to get it on.

I'm planning to leave what I have for now.  Once we can get that on the production site, we'll see what people think of the current behavior.
Title: Re: Better edge/connection popups
Post by: yakra on July 17, 2019, 10:49:12 am
A quick comparison Firefox <-> Chromium shows the popup to be the same height. Assuming the CSS gets this uniform across browsers...
Pixel position <-> latitude can be converted similar to
https://github.com/yakra/tmtools/blob/master/tmg2html/tmg2html.cpp#L417
https://github.com/yakra/tmtools/blob/master/tmg2html/tmg2html.cpp#L420-L421
https://github.com/yakra/tmtools/blob/master/tmg2html/tmg2html.cpp#L562
That's the basic idea, it'd be a little different in a Leaflet setting.
Don't take this as me clamoring for this feature though, I'm just overthinking it for fun.