Travel Mapping

Web Design Discussion => General Web Design Discussion => Topic started by: theFXexpert on February 16, 2021, 06:45:49 pm

Title: SVG Banners
Post by: theFXexpert on February 16, 2021, 06:45:49 pm
TM has been without proper banners long enough so I spent the last week coding up an implementation for dynamically generating SVG banners. I tried to write it in a way that is hopefully modular so different variations can be easily added. It should also account for routes that have multiple banners like those Alt Truck routes in PA. I made a pull request for a simple beta implementation on clinched.php:

https://github.com/TravelMapping/Web/pull/631

My dev environment for php stuff has been dismantled for a while since I have been mainly using other languages recently, so the server-side code is mostly untested. I at least tested preg_split() to make sure it worked as expected in the w3schools editor.

The result should output similar to this on clinched.php
(https://i.imgur.com/yNId4U2.png)

The svg templates are based on the svgs found in Wikimedia Commons: https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates (https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates)
Title: Re: SVG Banners
Post by: Jim on February 16, 2021, 07:47:55 pm
Thanks for this contribution.  I've got it up on tmstage.teresco.org for some testing, but it's looking good to me.
Title: Re: SVG Banners
Post by: theFXexpert on February 16, 2021, 08:28:45 pm
I had forgotten future Interstates were their own system and forgot to include them in the switch statement along side usai.
Title: Re: SVG Banners
Post by: Jim on February 16, 2021, 09:38:53 pm
I had forgotten future Interstates were their own system and forgot to include them in the switch statement along side usai.

Added, thanks.
Title: Re: SVG Banners
Post by: mapcat on February 17, 2021, 06:53:52 am
Thanks for this contribution.  I've got it up on tmstage.teresco.org for some testing, but it's looking good to me.

Agreed!

In VA we're treating "Wye" as a banner, and "Wye" still shows up in text above the routes since there's no corresponding Wye plate in the new set. And there probably shouldn't be one, since those routes are marked with a Y in the shield under the number. Should we change how we handle wyes?
Title: Re: SVG Banners
Post by: Jim on February 17, 2021, 08:46:50 am
Thanks for this contribution.  I've got it up on tmstage.teresco.org for some testing, but it's looking good to me.

Agreed!

In VA we're treating "Wye" as a banner, and "Wye" still shows up in text above the routes since there's no corresponding Wye plate in the new set. And there probably shouldn't be one, since those routes are marked with a Y in the shield under the number. Should we change how we handle wyes?

This is related to how we will handle the routes like NY's US 20A, which should get the A in the shield and have no banner.
Title: Re: SVG Banners
Post by: theFXexpert on February 17, 2021, 10:53:06 am
Right. I was thinking VA wyes should have the Y on the shield later on, so I left them unmodified for now.
Title: Re: SVG Banners
Post by: Jim on February 17, 2021, 04:11:42 pm
I've put the banners on the main site.
Title: Re: SVG Banners
Post by: mapmikey on February 17, 2021, 08:26:22 pm
Right. I was thinking VA wyes should have the Y on the shield later on, so I left them unmodified for now.

Froggie made specific Y shields for our Virginia Highways Page.  You are welcome to use them if that would be helpful (these would be the only ones that will ever be on TM as all the unposted wye routes will fail one of the criteria):

http://www.vahighways.com/shields/1dvao6ysm.gif
http://www.vahighways.com/shields/va132y.gif
http://www.vahighways.com/shields/va180y.gif
http://www.vahighways.com/shields/va205y.gif
http://www.vahighways.com/shields/va300y.gif (will be added as one of the quasi-posted routes)

Title: Re: SVG Banners
Post by: Jim on February 17, 2021, 11:30:52 pm
I created templates and added code to use them for usava "Y" routes.  See what you think on tmstage.teresco.org.  I think maybe the route number font could be scaled up a bit.
Title: Re: SVG Banners
Post by: the_spui_ninja on February 18, 2021, 12:56:33 am
The svg templates are based on the svgs found in Wikimedia Commons: https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates (https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates)
Are the SC, SD, and VT variants going to be added in as well?
Title: Re: SVG Banners
Post by: mapcat on February 18, 2021, 09:08:35 am
I created templates and added code to use them for usava "Y" routes.  See what you think on tmstage.teresco.org.  I think maybe the route number font could be scaled up a bit.

Comparing this (https://tmstage.teresco.org/hb/showroute.php?units=miles&u=mapcat&r=va.va132wyewil) to this (https://www.google.com/maps/@37.2774548,-76.698942,3a,75y,318.31h,91.04t/data=!3m6!1e1!3m4!1sO1cDNWoTlG9-Wy78qfYf7A!2e0!7i16384!8i8192), I think you're right that the font could be just a little bigger.

Will these eventually appear on showroute as well?
Title: Re: SVG Banners
Post by: Jim on February 18, 2021, 09:24:27 am
I just made the fonts bigger in the Y shields, both for the number and the Y trying to look more like that 132Y.

The banners should get to other places that use shields: https://github.com/TravelMapping/Web/issues/632 . I'll look into it as time permits unless @theFXexpert beats me to it.
Title: Re: SVG Banners
Post by: theFXexpert on February 18, 2021, 11:13:16 am
The svg templates are based on the svgs found in Wikimedia Commons: https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates (https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates)
Are the SC, SD, and VT variants going to be added in as well?
They were coded in initially but, I found an issue causing border colors to not be customized properly and submitted a fix https://github.com/TravelMapping/Web/pull/634

I just made the fonts bigger in the Y shields, both for the number and the Y trying to look more like that 132Y.
Yes. I think that looks a lot better!
Title: Re: SVG Banners
Post by: the_spui_ninja on February 18, 2021, 11:18:51 am
The svg templates are based on the svgs found in Wikimedia Commons: https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates (https://commons.wikimedia.org/wiki/Commons:WikiProject_U.S._Roads/Auxiliary_plates)
Are the SC, SD, and VT variants going to be added in as well?
They were coded in initially but, I found an issue causing border colors to not be customized properly and submitted a fix https://github.com/TravelMapping/Web/pull/634
Cool, you don't have to worry about the WY variant because there's no bannered state routes, and there probably won't be in the future.
Title: Re: SVG Banners
Post by: theFXexpert on February 20, 2021, 01:00:06 pm
Pull request made to add banners to showroute.php https://github.com/TravelMapping/Web/pull/635
Title: Re: SVG Banners
Post by: Jim on February 20, 2021, 02:00:45 pm
Pull request made to add banners to showroute.php https://github.com/TravelMapping/Web/pull/635

Just tried it out on tmstage, all looks good so it's live on the main site.  Thanks!
Title: Re: SVG Banners
Post by: mapcat on February 20, 2021, 02:53:01 pm
Pull request made to add banners to showroute.php https://github.com/TravelMapping/Web/pull/635 (https://github.com/TravelMapping/Web/pull/635)

Just tried it out on tmstage, all looks good so it's live on the main site.  Thanks!

These look great. The banner text (Bus, Alt, etc) below the shields in showroute is redundant now. Can the text be removed selectively from regions where the new banners have been added (since it's probably useful in other parts of the world)?
Title: Re: SVG Banners
Post by: yakra on February 22, 2021, 10:22:57 am
Should ALT be change to ALTERNATE?

First bypass I checked out was ME US1BypPor (https://travelmapping.net/hb/showroute.phpr=me.us001byppor) -- I think the hyphenated BY-PASS is the way it's done locally, but overall nationwide, is one-word BYPASS more common?
Title: Re: SVG Banners
Post by: theFXexpert on February 22, 2021, 12:37:58 pm
The MUTCD allows for either ALT or ALTERNATE to be used, but I went with ALT for readability and conciseness.

I have seen the shorthand ALT in the field more in the south. Although PA tends to prefer the spelled out ALTERNATE. VA seems to use both.

The MUTCD specifies a hyphenated BY-PASS.
https://mutcd.fhwa.dot.gov/pdfs/2009r1r2/mutcd2009r2chpt2d.pdf
Title: Re: SVG Banners
Post by: the_spui_ninja on February 22, 2021, 05:17:40 pm
The MUTCD allows for either ALT or ALTERNATE to be used, but I went with ALT for readability and conciseness.
All the bannered ALT routes I've been on (the ones that weren't US XXA) were signed as US XX ALT, at least on the reassurance shields. Wyoming, however, does something weird and sticks the banner inside the shield (https://www.google.com/maps/@44.6893361,-108.9156955,3a,15y,285.28h,83.37t/data=!3m6!1e1!3m4!1s_TgdrnddaeLRYBlE4rOqMg!2e0!7i13312!8i6656) for some reason (I don't expect anyone to code this in, I saw it when I was checking to see if ALT or ALTERNATE was more frequent in my experience and I thought it was funny).
Title: Re: SVG Banners
Post by: yakra on May 27, 2021, 10:06:48 pm
OK, this is weird.

(https://i.postimg.cc/CZR26q1x/me-us001altpor-lab2.png) (https://postimg.cc/CZR26q1x) lab2

(https://i.postimg.cc/yg9b7C0q/me-us001altpor-noreaster.png) (https://postimg.cc/yg9b7C0q) noreaster

Side-by-side tabs in Firefox.
Chromium behaves the same.
Chrome displays both properly.

Both servers have the same commits checked out (https://travelmapping.net/logs/siteupdate.log):
HighwayData @ 5b319bb8200c6c4f5bd6af6813b95e90a3633a92
UserData @ 88f9db2284d97df12af9ee2a6a003b48b2d162cf
...and when I save the page as an HTML file, the only diffs are in the map API keys and the order of users with underscores in their names in the dropdown menu.

yakra:Web is at e1f6abe314ce81fd6145a9b9d12e0dd48a8a5f35, synced to
TravelMapping:Web at 22111cd303de3d540a39059cd8909ca299e09b4e,
functionally the same.
Their contents (outside of .git) are the same per
for item in tm/Web/*; do diff -r $item y$item; done

Is there a missing or modified SVG or CSS or something?
I copied the files over to the server directory with a modified version of updateserver.sh, shown below:
(https://i.postimg.cc/QVpWg0px/tmux-updateserver.gif) (https://postimg.cc/QVpWg0px)
I ran it with --shields, --fonts, and with no switches at all.
I don't think it should have missed anything.

And why does Chrome render it properly?

Any ideas?
Title: Re: SVG Banners
Post by: yakra on May 28, 2021, 11:42:12 pm
NOW IT LOOKS FINE AND I DIDN'T CHANGE ANYTHING
Title: Re: SVG Banners
Post by: theFXexpert on May 29, 2021, 10:56:37 am
Maybe you had an old version of the travelmapping.css in the lab2 instance cached in Firefox/Chromium.