Clinched Routes Highway Shields

[theFXexpert]

My process has been to take a commons SVG and open it in Inkscape. Save it as an optimized SVG. Then I use Notepad++ to manually strip any other unnecessary items. I wasn't aware an SVG minifier existed.
I then copy the code to the clinched.php page with Chrome's inspect element tools to check if the numbers looks alright. I usually adjust the font size to an appropriate looking size with Notepad++. It's important to add ' like so: font-family="'Roadgeek 2014 Series D'" otherwise the font won't render.

I was looking at your commits; the changes to shieldgen.php are not necessary since essentially the same code is executed in the default case. I also have an upcoming change to that file that will handle 4-digit shields in a more modular fashion.

[Jim]

This is excellent.  Please be sure to keep credits.php up to date with any new sources, which of course need to be ones that permit our project to reuse/derive.

[rschen7754]

This is excellent.  Please be sure to keep credits.php up to date with any new sources, which of course need to be ones that permit our project to reuse/derive.

Should we list the shield templates? Unlike most Wikimedia images, these are licensed public domain since they are MUTCD, so no attribution is necessary.

We may run into trouble on some of the US toll road logos (only on Wikipedia under fair use) and a few random countries (Mexico, Australia). Most of Europe uses some form of text on a solid rectangle, and Commons has some imitation shields for Canada that don't include the copyrighted elements.

[theFXexpert]

I also have an upcoming change to that file that will handle 4-digit shields in a more modular fashion.

Now submitted -> https://github.com/TravelMapping/Web/pull/124

Also includes HI, NM, OR, and SD shields.

[mapcat]

How should we handle Tennessee? One design for all routes, or should we develop some additional code to identify routes as always primary, always secondary, and both?

[mvak36]

Added KS, MI, MN, MO, NE (doesn't include links/spurs), NV, OH, UT, and WY shields to the pull request.

Thank You for doing that. I like it a lot.

[mvak36]

Added KS, MI, MN, MO, NE (doesn't include links/spurs), NV, OH, UT, and WY shields to the pull request.

How about these for the Links and Spurs?
https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways#/media/File:N_LINK_Blank.svg
https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways#/media/File:N_SPUR_Blank.svg

I got them from https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways

[michih]

I tried to figure out how it works. Here's my first shield: https://github.com/TravelMapping/Web/pull/126/commits/b26024db8dcbf5a149bba9dea13fd8fccac30a2f.

1. Downloaded a desired orginal file from wikimedia (here, German Bundesstraße 1) to your local machine.
2. Upload the file to http://www.svgminify.com/
3. Press "Start"
4. Press "Download resulting SVG"
5. Open "result.svg" on my local machine with a text editor, e.g. Notepad++

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="120px" width="200px" version="1.1" viewBox="-100 0 200 120">
<g fill-rule="evenodd">
<rect rx="22.2" ry="22.2" height="120" width="200" y="0" x="-100" fill="#F0CA00"/>
<rect rx="18" ry="18" height="112" width="192" y="4.25" x="-95.8"/>
<rect rx="11" ry="11" height="97.5" width="178" y="11.2" x="-88.8" fill="#F0CA00"/>
<path id="PfadE" d="m-0.069 94.2v-57.2l-9.6 7v-10.3l9.6-6.9h9.7v67.4h-9.7z"/>
</g>
</svg>
6. Figure out (trial and error) the line representing the number to be deleted (deleting lines and preview in web browser by saving and double-clicking of the file or use "Launch in..." feature of Notepad++). The line to be deleted is:

Code: [Select]

<path id="PfadE" d="m-0.069 94.2v-57.2l-9.6 7v-10.3l9.6-6.9h9.7v67.4h-9.7z"/>
7. Add the following lines within <g></g> (fill element must contain the color required for drawing the number):

Code: [Select]

<text letter-spacing="0px" text-anchor="middle" word-spacing="0px" text-align="center" font-size="425px" line-height="125%" y="492.5" x="299.90381" font-family="&apos;Roadgeek 2014 Series D&apos;" fill="#ffffff"><tspan y="492.5" x="299.90381">***NUMBER***</tspan></text>
8. Check file in web browser.

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="120px" width="200px" version="1.1" viewBox="-100 0 200 120">
<g fill-rule="evenodd">
<rect rx="22.2" ry="22.2" height="120" width="200" y="0" x="-100" fill="#F0CA00"/>
<rect rx="18" ry="18" height="112" width="192" y="4.25" x="-95.8"/>
<rect rx="11" ry="11" height="97.5" width="178" y="11.2" x="-88.8" fill="#F0CA00"/>
<text letter-spacing="0px" text-anchor="middle" word-spacing="0px" text-align="center" font-size="425px" line-height="125%" y="492.5" x="299.90381" font-family="&apos;Roadgeek 2014 Series D&apos;" fill="#ffffff"><tspan y="492.5" x="299.90381">***NUMBER***</tspan></text>
</g>
</svg>
9. Rename file to "template_deub.svg" (bold = system name)
10. Upload to GitHub web repository "shields" folder
11. Hope and pray because I've no idea if it will work...

[rschen7754]

I tried to figure out how it works. Here's my first shield: https://github.com/TravelMapping/Web/pull/126/commits/b26024db8dcbf5a149bba9dea13fd8fccac30a2f.

1. Downloaded a desired orginal file from wikimedia (here, German Bundesstraße 1) to your local machine.
2. Upload the file to http://www.svgminify.com/
3. Press "Start"
4. Press "Download resulting SVG"
5. Open "result.svg" on my local machine with a text editor, e.g. Notepad++

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="120px" width="200px" version="1.1" viewBox="-100 0 200 120">
<g fill-rule="evenodd">
<rect rx="22.2" ry="22.2" height="120" width="200" y="0" x="-100" fill="#F0CA00"/>
<rect rx="18" ry="18" height="112" width="192" y="4.25" x="-95.8"/>
<rect rx="11" ry="11" height="97.5" width="178" y="11.2" x="-88.8" fill="#F0CA00"/>
<path id="PfadE" d="m-0.069 94.2v-57.2l-9.6 7v-10.3l9.6-6.9h9.7v67.4h-9.7z"/>
</g>
</svg>
6. Figure out (trial and error) the line representing the number to be deleted (deleting lines and preview in web browser by saving and double-clicking of the file or use "Launch in..." feature of Notepad++). The line to be deleted is:

Code: [Select]

<path id="PfadE" d="m-0.069 94.2v-57.2l-9.6 7v-10.3l9.6-6.9h9.7v67.4h-9.7z"/>
7. Add the following lines within <g></g> (fill element must contain the color required for drawing the number):

Code: [Select]

<text letter-spacing="0px" text-anchor="middle" word-spacing="0px" text-align="center" font-size="425px" line-height="125%" y="492.5" x="299.90381" font-family="&apos;Roadgeek 2014 Series D&apos;" fill="#ffffff"><tspan y="492.5" x="299.90381">***NUMBER***</tspan></text>
8. Check file in web browser.

Code: [Select]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="120px" width="200px" version="1.1" viewBox="-100 0 200 120">
<g fill-rule="evenodd">
<rect rx="22.2" ry="22.2" height="120" width="200" y="0" x="-100" fill="#F0CA00"/>
<rect rx="18" ry="18" height="112" width="192" y="4.25" x="-95.8"/>
<rect rx="11" ry="11" height="97.5" width="178" y="11.2" x="-88.8" fill="#F0CA00"/>
<text letter-spacing="0px" text-anchor="middle" word-spacing="0px" text-align="center" font-size="425px" line-height="125%" y="492.5" x="299.90381" font-family="&apos;Roadgeek 2014 Series D&apos;" fill="#ffffff"><tspan y="492.5" x="299.90381">***NUMBER***</tspan></text>
</g>
</svg>
9. Rename file to "template_deub.svg" (bold = system name)
10. Upload to GitHub web repository "shields" folder
11. Hope and pray because I've no idea if it will work...

If there's a file marked "template" available, that's what you want to use, such as those in https://commons.wikimedia.org/wiki/Category:Highway_shield_templates. That has the route number not saved as a path already, which makes the process easier.

[Jim]

The changes in the pull requests submitted recently for shield generation are now live on the site.  I've spot tested and all seems good so far.

[michih]

The changes in the pull requests submitted recently for shield generation are now live on the site.  I've spot tested and all seems good so far.

'Germany Bundesstraßen' shield doesn't work: http://tm.teresco.org/shields/clinched.php?u=michih&cort=traveled
Only B1 to B9 are replaced but w/o number.

I think I've mistaken white and black. fill="#ffffff" --> fill="#000000" (I'll change it) but the number is not visible at all...
Some regions have 2 svg files. What's "_wide"? Are these used for routes with more than 1 digit? How do I have to modify the svg file?

[michih]

If there's a file marked "template" available, that's what you want to use, such as those in https://commons.wikimedia.org/wiki/Category:Highway_shield_templates. That has the route number not saved as a path already, which makes the process easier.

There is one (> click <) but it's quite old. For instance, the color (yellow) is a little bit different.

[theFXexpert]

How should we handle Tennessee? One design for all routes, or should we develop some additional code to identify routes as always primary, always secondary, and both?

A good question.
Option 1 would just be to use the primary shield for everything.

Option 2 would be to use both, but would require that:
    A: The shield generator check against a list of route numbers and spit out the appropriate shield(s) This item will probably take the most work.
    B: Support the display of more than one shield in the hb and the clinched.php page. It looks like all that will need to be done would be to simply put the 2nd shield in the same span element and adjust the width on the hb page. What needs to be figured out is how to return two shields at once with php.

Added KS, MI, MN, MO, NE (doesn't include links/spurs), NV, OH, UT, and WY shields to the pull request.

How about these for the Links and Spurs?
https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways#/media/File:N_LINK_Blank.svg
https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways#/media/File:N_SPUR_Blank.svg

I got them from https://en.wikipedia.org/wiki/List_of_Nebraska_Connecting_Link,_Spur,_and_Recreation_Highways

I knew about the templates, I haven't done them yet since they require extra programming to filter out the prefix and display the appropriate shield. Same with Texas loops and spurs; which also needs to account for NASA 1.

'Germany Bundesstraßen' shield doesn't work: http://tm.teresco.org/shields/clinched.php?u=michih&cort=traveled
Only B1 to B9 are replaced but w/o number.

I think I've mistaken white and black. fill="#ffffff" --> fill="#000000" (I'll change it) but the number is not visible at all...
Some regions have 2 svg files. What's "_wide"? Are these used for routes with more than 1 digit? How do I have to modify the svg file?

Check the x, y, and font-size attributes and make sure the numbers are centered on the shield.

The program requires a wide shield for route numbers larger than 2 characters. Otherwise the default is used. In this case, you can just copy the SVG and rename it with "_wide".

[Jim]

CHM had the capability to display multiple shields for the same route, and cycled through them when displayed.  One example:

http://cmap.m-plex.com/hb/hwymap.php?sys=cantch&rg=all&gr=p&r=on.tchott&showint=0&dl=0

[michih]

Check the x, y, and font-size attributes and make sure the numbers are centered on the shield.
The program requires a wide shield for route numbers larger than 2 characters. Otherwise the default is used. In this case, you can just copy the SVG and rename it with "_wide".

Thanks. My "text line template" had totally difference positions, the text was far away from the shield... I think I got it and have submitted svg and _wide.svg file.

Is it possible to use different fonts? Any limit?