DisplayingVectorGraphics
It would be useful to display vector graphics in browser for system map purposes. This is a no easy task, however. Research on the best approach to displaying vector graphics follows.
-
Display vectors within OTP technologies (OpenLayers)
-
Retain compatibility with all major browser (excluding IE6)
-
Penalties for flash and plugins (generally not compatible with OpenLayers, anyway)
http://www.amplesdk.com/examples/svg/
Looks interesting. This one is a SVG2VML conversion, but browser-side. Might work. I imagine it would require modification of OpenLayers/ImageLayer.
http://code.google.com/p/svgweb/
This one has some spiffy videos behind it, but suffers from the major problem of flash. It renders svg through flash in IE. OpenLayers places the base layer (divs/img elements) below feature layers (IE, the symbols, labels). This layering would not be possible if the symbol layers were flash objects.
Another "svg in IE" type thing. Raphael adds a cross-platform, scene-graphed canvas-like object you can draw in using Javascript. It might be a good choice, except, again, it will require modification of OpenLayers ImageLayer to work. And it can't do SVG! You have to use Raphael drawing commands. Transforming SVG to that stuff is possible, but again, we're not saving our selves a format conversion or using a forward-looking open-standard.
Display of SVG in IE would probably be possible with Ample. It would be my best bet. However, still have to fix the FF issue (dunno why it doesn't work), and Ample won't help there (generates VML for IE, Firefox thinks VML is as crazy as you and I do).
Original attempt was a PHP app called "vector converter" (http://vectorconverter.sf.net) but its dated (as is VML) and requires PHP4. Getting it tow work is a trick, and the online version of the converter:
doesn't appear to work. Grr.
Vector Converter, has problems. To begin with, the project requires php4. It has an include to wrap it into php5, and I couldn't get it to work without php4. Even then it only works with very simple graphics. I suspect more sophisticated SVGs contain advanced elements or tranforms it dislikes. Vector Converter is based on XSLT, so if we had to perform this conversion a lot, I would just take the transforms from the project, and use something like lxml and python to apply the transforms. Documents might need a little pre-processing to make them simple and standard enough for the Vecter Converter XSL transforms to work properly.
Looking into VML more, its a strange, integrated XML format. It does not use xhtml tags. This is important because the OpenLayers ImageLayer works by creating divs and img elements and moving them around for the panning effect. Point ImageLayer at an SVG and it just sticks it in the src attribute. Modifying ImageLayer to use <v:group> elements would be more work. This is pretty much a deal breaker.
That and VML is being depricated. According to the Microsoft VML to SVG Migration Guide:
"Microsoft expects web sites to transition to SVG in the future"
Whether Microsoft expects to transition to actually supporting SVG is another story.
Another format option is XAML. Another Microsoft meta-lanuage vector format (because there clearly are not enough of these!). This one they made after SVG, because following an open standard would just be insanity (to be fair, VML could have become an intenet standard, but the W3C came up with SVG instead).
Anyway, XAML is very SVG-like. Only with SilverLight can IE display XAML. This is a problem. Its the good old IE6 problem. People without administrator privlidges cannot install SilverLight. They also will not be able to updgrade to IE v2000 (in which MS finally gets around to supporting SVG). So dealbreaker for XAML. People who want to use OpenTripPlanner in a jiffy will not want to have to install SilverLight. So this is not a good option.
Look like the way to go. OpenLayers can already do them and display properly in IE. No need to install SilverLight or other crap. And as a bonus, because they would be real OL features, selection and hover-over events are possible. The big con is 1) probably have to be converted by hand 2) KML may not be as versatile as SVG and may not look exactly the same as the provided system map. For our purposes, probably alright.
KML doesn't support curves (splines, Belzier curves). Symbols, etc need straight-line approximations.
Using Inkscape, I applied the "Modify Path -> add Nodes" extension, requiring 2 segments every 3 pixels. Then I selected each path and chose "make segments into lines". Straightening isn't technically required. Instead, you could just take the path data (IE, ) and treat the "curve to," "Belzier curve to," commands as line-to commands. Straightening does clean up the path data.
Unfortunately, Inkscape does not have a macro function, so these tasks were manual.
System Map Shop Future:
Doing a lot of conversions, I would write an Inkscape extension that applies the "add Nodes" and straighten extensions to all elements in a document. Or if illustrator can do the job, use that.
This Java util exists and may be promising. For now, I'm just trying to do a proof-of-concept. Style KML like the original map. But keep it in mind for the future: