Route Map Creator - v2.1 (Updated 27/08/2011)

[jvassie]

So due to a quiet period at work, I dedicated some time to doing a spot of research into the multitude of JQuery plugins out there. I stumbled across a picture which caught my eye.



So I did some further digging, and discovered a rather clever way of drawing a subway map (based on the style of London Underground's very own), using a mixture of HTML5s new Canvas feature, CSS and jQuery. I jumped on the opportunity to develop it further, and made a few modifications of my own to the plugin, adding a couple of little features. I then created a very basic form to 'control' the map creator, and a somewhat pseudo-language for 'describing' the routes. Feeding this into a PHP script to parse and convert it into the needed format for the jQuery plugin.

The result can be seen by following this link:

http://www.jvassie.net/map/index.php (Hosting provided by Zernebok Ltd)

What I would suggest at first is clicking the 'Default' button which will fill in the appropriate fields with some example data, all of which is self explanitary, aside from the route description, which I will go into further detail about shortly.

First a word of caution, this is the first version of this interface/program, and as such is very basic, created in a few hours of spare time at work one day. As far as I am aware, there shouldn't be any bugs with the interface I have created, but of course if you find any, or have any queries and/or suggestions, please do feel free to speak up.

The plugin itself wasn't designed specifically to cater for the purpose I intend it to, but it should suffice for the majority of cases, and there is scope for extending it as I can, but please make sure the suggestions hasnt already been accounted for beforehand, it will save some hassle.

So, if you clicked on Default and then Create Map, you should see a basic two line map appear on the right hand side.

When creating your map, it will be easier to turn the grid and grid numbers On, by checking the respective Yes radio buttons on the form. Please note, the numbers refer to the 'line' below or to the right of the number itself, this should become apparent when you turn the grid and numbers on.

So onto the 'interesting' bit, describing the route. First, an outline of the format.

{[Route 1,#FF0000,true,0,0]
[2,2,,interchange,,A,S]
[5,2,,station,,B,S]
[9,2,,interchange,,C,S]}

Above is a 'complete' route description, which I have taken from the default settings. It describes the red line on the map. I will run through this line by line.

A route description is enclosed in curly brackets { }
Route 'parameters' and Markers are enclosed in square brackets [ ]
Marker values are comma seperated.

The first parameter in the route is what you might consider the route 'header'.

[Route 1,#FF0000,true,0,0]

Route 1 - This is the name of the route, which should be unique
#FF0000 - This is a hex colour which obviously colours the route on the map (some popular hex codes are at the bottom of the form)
true - This is either true or false, and controls wether or not this route is shown on the map legend
0 - X-offset for entire route, not currently functioning as expected, leave at 0
0 - Y-offset for entire route, not currently functioning as expected, leave at 0

And so that finishes the route header, now we move on to individual markers/route coords

As you might have guessed, the system uses a co-ordinate based system, but it also caters for decmal points, 7.15 is perfectly acceptable, as is 8.0

[2,2,,interchange,,A,S]

2 - X-Coord of the route point
2 - Y-coord of the route point
blank - This is used to describe a curve, more detail on this later. Values either N, E, S or W (or blank of course)
interchange - This describes what type of marker, station, @station, interchange, @interchange or leave it blank - More info later
blank - This describes the station size, leave blank for normal, format is h for horizontal, or v for vertical, followed by a number

(this is a measurement in line widths) - eg h3 or v5
A - label for the marker, will only show if the type of marker isnt blank
S - label position relative to marker, possible values N, NE, E, SE, S, SW, W, NW

And that essentially covers the language for describing a route!

Some Useful Pointers

Curves:

-When specifying a point, its important to remember (particularly for curves) that the coords refer to the 'end' of the segment of line.
-The direction of the curve is the direction it travels before the turn, for example try creating a map with this route description:

{[Route 1,#FF0000,true,0,0]
[2,2,,interchange,,A,S]
[3,3,E,,,,]
[3,5,,,,,]
[4,6,S,interchange,,B,S]}

You'll notice the track goes East before turning, and then goes South before turning again. Easy concept once youve got your mind around it.

Diagonals:

-Currently you only get nice rounded ends when the line is 'truly' diagonal, ie going from say [2,2] to [5,5] and the curve will always be from horizontal into or out of the diagonal.

Marker Types:

-placing @ before the marker type will mean the route wont pass through that point, but will just place a marker at that location.
-only interchanges can have a size specified

'Saving' your Map:

-Currently the only way to save your map is to print screen it and save it via MS Paint or some such

Future Changes Planned:

*New type of marker, just a simple perpendicular line that protrudes slightly.
*Specifying colours of markers more specifically
*Add vertical-to-diagonal curve support
*Add export to .png option
*Allow opening map in new window for print-screening

If you have a suggestion, please make sure it isnt on this list before asking.

Hope this is of use to you guys out there!

Version 1.1

- Have removed the need to seperate route 'parameters' by pipes
- Updated default code to reflect that
- Fixed alignment issue with N label position

Version 2.0

- You can now Register and Login as a user of the site
- New site structure and look
- New splash screen

Version 2.1

- Route descriptions now include a new 'global' settings set for the map, in the form:

[40,12,10,true,true,8,false,false]

40 - cellsize
12 - columns
10 - rows
true - grid
true - gridnumbers
8 - linewidth
false - debug
false - show legend

If you paste in your existing routes, and click create, your new route description will show your global map settings!

[Kevo00]

Wow, that's very neat. I can see myself having hours of fun with this designing tube maps.

[FooBar]

Very nice indeed! Played around with it a bit; works rather well, although I have a few suggestions...

First one is more likely a bug than a suggestion. When I set a label to be displayed to the N(orth), it puts it on top of the marker rather than above it. If you suspect this to be a problem of my browser, I'm using Fx6.

And then a real suggestion: I'd remove the need for the pipes altogether. To me it doesn't seem harder to parse just ][ than ]|[ as separator.

It also would be useful to save the "configuration settings" (cell size through legend) also as plain text above the route description in a single text area. That way you can easily copy the complete map definition to a text file and save it on your computer. And copy it back later to continue working on the map. Or alternatively an option to download the map definition to a file together with an option to upload it again.


Other than that I don't have any remarks. The tool works simple enough to be very effective. You can basically just draw a sketch on grid paper and use that to code it as a computer generated map. I dare say you can create maps with this quicker than e.g. Visio!


Actually I'm now pondering how hard it would be to write this fully in PHP using e.g. the GD library...

[jvassie]

Version 1.1

- Have removed the need to seperate route 'parameters' by pipes
- Updated default code to reflect that
- Fixed alignment issue with N label position

[Kevo00]

Knocked up the Bedford-Bletchley line and connections in an hour. One bug - the 6 on line 6 looks a bit like a 5 to me.

Code: Select all

{
[Bedford-Bletchley Line,#FF0000,true,0,0]
[5,24,,interchange,,Bletchley,E]
[5,23,,,,]
[6,22,,,,]
[7,22,,station,,Fenny Stratford,S]
[9,21,,station,,Bow Brickhill,S]
[12,20,,station,,Woburn Sands,S]
[14,19,,station,,Aspley Guise,S]
[16,18,,station,,Ridgmont,SE]
[18,16,,station,,Lidlington,SE]
[20,14,,station,,Millbrook,E]
[21,12,,station,,Stewartby,E]
[22,10,,station,,Kempston Hardwick,E]
[22,9,,,,]
[23,8,,,,]
[24,8,,,,]
[25,7,E,station,,Bedford St. Johns,E,]
[25,6,,,,]
[24,5,,,,]
[23,5,,interchange,,Bedford,W]

}
{
{[West Coast Main Line,#00FF00,true,0,0]
[3,14,,interchange,,Stations to Crewe and the North,E]
[4,18,,interchange,,Milton Keynes Central,E]
[5,24,S,interchange,,Bletchley,E]
[6,29,E,station,,Leighton Buzzard,E]
[7,34,E,interchange,,Stations to London Euston,E]

{
}
{[Midland Main Line,#0000FF,true,0,0]
[21,1,,interchange,,Stations to Sheffield via the Midlands,W]
[23,5,,interchange,,Bedford,W]
[26,13,,station,,Flitwick,E]
[26,19,,interchange,,Stations to London St. Pancras via Luton,W]

[Level Crossing]

The N, NE, and NW alignments are still 'flying in the air', unfortunately.

Bug.PNG (3.55 KiB) Viewed 4604 times

Note that the 'Waterford' station is aligned SW.

[noofnoof]

Is it too much to ask for the ability to export as an SVG?

Code: Select all

{
[Ipswich Line,#00FF60,true,0,0]
[11,2,,interchange,,Roma St,N]
[9,2,,station,,Milton,S]
[8,2,,station,,Auchenflower,N]
[7,2,,station,,Toowong,S]
[6,3,W,station,,Taringa,W]
[6,4,,station,,Indooroopilly,W]
[6,5,,station,,Chelmer,W]
[6,6,,station,,Graceville,W]
[6,7,,station,,Sherwood,W]
[6,8.5,,interchange,,Corinda,W]
[6,9.25,,station,,Oxley,W]
[6,10,,station,,Darra,W]
[5,11,S,station,,Wacol,N]
[4,11,S,station,,Gailes - Goodna - Redbank - Riverview - Dinmore - Ebbw Vale - Bundma - Booval - East Ipswich - Ipswich ,S]
}
{[Beenleigh Line,#FF0000,true,0,0]
[11,1.75,,interchange,, ,S]
[10,3,W,station,, ,E]
[10,3.75,,station,, ,E]
[10,4.5,,station,, ,E]
[10,5.25,,station,,Dutton Park,W]
[10,6,,station,,Fairfield,E]
[10,6.75,,station,,Yeronga,E]
[10,7.5,,interchange,,Yeerongpilly,E]
}
{[Tennyson Line,#FF9900,true,0,0]
[9.5,7.5,,interchange,, ,E]
[8.25,8,S,,,,]
[7.75,8,,station,,Tennyson,S]
[7.25,8,W,,,,]
[6.25,8.5,W,Interchange,, ,S]
}
{
[Gold Coast Line,#FFFF00,true,0,0]
[11,2.25,,interchange,, ,S]
[9.75,3,W,station,, ,E]
[9.75,3.75,,station,, ,E]
[9.75,4.5,,station,, ,E]
[9.75,7.5,,interchange,, ,E]
}
{[Cleveland Line,#990066,true,0,0]
[11,2.5,,interchange,, ,S]
[10.25,3,W,station,,South Brisbane,E]
[10.25,3.75,,station,,South Bank,E]
[10.25,4.5,,station,,Park Road,E]
[11.5,5.25,S,station,,Buranda,SE]
}
{
[Richlands Line,#00FF60,true,0,0]
[6,10,,station,, ,W]
[6,11.5,,Interchange,,Richlands,E]}

try that out for size

[Ameecher]

I like this

The browser by still reads v1.0 though

[noofnoof]

maybe you should have the ability to save it to the website, and the ability for people to submit them so other people can view them. it'd be good to be able to see other peoples work on the page.

[jvassie]

I like this

The browser by still reads v1.0 though

Glad you like it!

Have fixed the title of website to v1.1, thanks for pointing that out!

[Leanden]

When i run this, it places the station names, but doesnt draw any lines. Its not my code because all im doing is Ctrl+Cing other peoples code.

[jvassie]

When i run this, it places the station names, but doesnt draw any lines. Its not my code because all im doing is Ctrl+Cing other peoples code.

Which browser are you running? Sounds to me like your browser doesn't support Canvas (new in HTML5), or alternatively, you have JavaScript turned off, which needs to be on in order for the program to work.

[Leanden]

Im using Google Chrome, and at work i had the same issue using IE 8.

[Level Crossing]

Chrome works for me.

[planetmaker]

Nice thing

But I get a bit funky results with this:

Code: Select all

{[Route 1,#FF0000,true,0,0]
[2,2,,interchange,,A,S]
[5,2,,station,,B,S]
[9,2,,interchange,,C,S]}

{[Route 2,#FFFF00,true,0,0]
[2,2,,interchange,,A,S]
[3,3,,,,,,]
[5,3,,station,,D,S]
[9,2,,interchange,,C,S]}

[Level Crossing]

I have a quick question: how do I get rid of the angle on the orange line near Trenton and make it a smooth curve?

Code: Select all

{[Central Mainline Commuter,#FF9900,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][2,4.3,E]
[2,3,N,station,,Fairview,W][2,2,,station,,Richland,W][2,2,N][3,0.6,N][7,0.6,,station,,Geneva,S]}

{[Central Mainline Exp,#FF0000,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][1.2,5,NE,,,,][5.2,1,E,,,,]
[5.2,1,,interchange,v2,Trenton,S][9,1,,interchange,v2,Carbondale,S][18,1,,interchange,v2,Gorham North,S]

[20,1,,station,,Oakland,S][23,1,,station,,Fredericksburg,S][26,1,,station,,Hanover,S][28,1,,station,,Newport,S]
[31,1,,station,,Livingston,S][34,1,,station,,Buena Vista,S][35,1,SE,,,,,]
[37,3,SE,@station,,Waterford North,W][39,5,E][39,5,,interchange,,North Bend,E]}


{[South Mainline Exp,#0000FF,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][9,5,,interchange,v2,Grafton,S]
[11,5,,interchange,v2,Collins,S][19,5,,interchange,v2,Elba,S][25,5,,station,,Green Valley North,S]
[28,5,,station,,Elmwood,S][37,5,,station,,Waterford,S][39,5,,interchange,,North Bend,E]}

[jvassie]

Im using Google Chrome, and at work i had the same issue using IE 8.

And what about javascript, is it turned on?

Nice thing

But I get a bit funky results with this:

Code: Select all

{[Route 1,#FF0000,true,0,0]
[2,2,,interchange,,A,S]
[5,2,,station,,B,S]
[9,2,,interchange,,C,S]}

{[Route 2,#FFFF00,true,0,0]
[2,2,,interchange,,A,S]
[3,3,,,,,,]
[5,3,,station,,D,S]
[9,2,,interchange,,C,S]}

Glad you like it

Thats an interesting bug, I thought it might be perhaps to do with having the same label on two routes at the same point, but removing Route 2's label at 2,2 doesn't fix it. Will look into it further.

{[Central Mainline Commuter,#FF9900,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][2,4.3,E]
[2,3,N,station,,Fairview,W][2,2,,station,,Richland,W][2,2,N][3,0.6,N][7,0.6,,station,,Geneva,S]}

{[Central Mainline Exp,#FF0000,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][1.2,5,NE,,,,][5.2,1,E,,,,]
[5.2,1,,interchange,v2,Trenton,S][9,1,,interchange,v2,Carbondale,S][18,1,,interchange,v2,Gorham North,S]

[20,1,,station,,Oakland,S][23,1,,station,,Fredericksburg,S][26,1,,station,,Hanover,S][28,1,,station,,Newport,S]
[31,1,,station,,Livingston,S][34,1,,station,,Buena Vista,S][35,1,SE,,,,,]
[37,3,SE,@station,,Waterford North,W][39,5,E][39,5,,interchange,,North Bend,E]}


{[South Mainline Exp,#0000FF,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][9,5,,interchange,v2,Grafton,S]
[11,5,,interchange,v2,Collins,S][19,5,,interchange,v2,Elba,S][25,5,,station,,Green Valley North,S]
[28,5,,station,,Elmwood,S][37,5,,station,,Waterford,S][39,5,,interchange,,North Bend,E]}

Try this for size:

Code: Select all

{[Central Mainline Commuter,#FF9900,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][2,4.3,E]
[2,3,N,station,,Fairview,W][2,1.8,,station,,Richland,W][3,0.8,N][7,0.8,,station,,Geneva,S]}

{[Central Mainline Exp,#FF0000,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][1.2,5,NE,,,,][5.2,1,E,,,,]
[5.2,1,,interchange,v2,Trenton,S][9,1,,interchange,v2,Carbondale,S][18,1,,interchange,v2,Gorham North,S]

[20,1,,station,,Oakland,S][23,1,,station,,Fredericksburg,S][26,1,,station,,Hanover,S][28,1,,station,,Newport,S]
[31,1,,station,,Livingston,S][34,1,,station,,Buena Vista,S][35,1,SE,,,,,]
[37,3,SE,@station,,Waterford North,W][39,5,E][39,5,,interchange,,North Bend,E]}


{[South Mainline Exp,#0000FF,true,0,0][1,5,,interchange,,Roscoe Thoreau Street,S][9,5,,interchange,v2,Grafton,S]
[11,5,,interchange,v2,Collins,S][19,5,,interchange,v2,Elba,S][25,5,,station,,Green Valley North,S]
[28,5,,station,,Elmwood,S][37,5,,station,,Waterford,S][39,5,,interchange,,North Bend,E]}

[jvassie]

Version 2.0

- You can now Register and Login as a user of the site
- New site structure and look
- New splash screen

No real functionality exists yet for users, but its worth registering, as will be adding new features over the coming days, for which you will need to be registered to use

Check the gallery every now and again for regular updates

[Level Crossing]

What's the point of making user-only features?

PS the fix above worked with some modification. Instead of moving the line down 0.2 units, I moved Richland station up 0.2 units.

[jvassie]

What's the point of making user-only features?

Well, it would make sense to have some way of storing created route maps, and therefore to associate a particular route map with a particular user, so credit can be given etc. It will also mean that you can retrieve stored routemaps etc. You can still use the tool without registering of course, but in order to save stuff, makes sense to be registered IMO, anyone else got thoughts on that?

PS the fix above worked with some modification. Instead of moving the line down 0.2 units, I moved Richland station up 0.2 units.

Glad you got it working

What do you reckon to the new version?