Javascript Project 1

I don’t know if I really enjoy Javascript all that much. When it comes to mobile, we are okay, but other than that I find it quite lame. But, I’m a novice so I will give it a chance.

I have this love of maps and being from Chicago I get to explore one of the greatest maps to exist: The ‘L.’ As such, I thought a great project to create with JS/HTML5 for mobile would be a map of Chicago’s transit system.

Part 1: Creating the red line.

Using JS I created a replica of the entire Red Line from Chicago’s L system with a clickable link to Wikipedia’s page about the track.  Pretty nifty!

Complications? Not many besides the tedious task of match x, y coordinates exactly. Otherwise, it went pretty smoothly.  Now, hopefully after I finish I can make some hitTests on the paths to make the app more interesting. However, for a rapid prototype (and this one being my first) we are on good grounds. We will see how this continues.

Here’s the script:


#myCanvas{margin-top: -40px; }

h4 {margin-left: 150px;}

h4 a{color: red; font-family: Helvetica, sans-serif;}



<script type=”text/javascript”>


window.onload = function(){


var application =new NKApplication();



var navController = new NKNavigationController();

navController.setTitle(“Chicago ‘L’way”);

navController.setTintColor(127, 62, 152);


var canvas = document.getElementById(“myCanvas”);

var context = canvas.getContext(“2d”);


//Red Line

context.strokeStyle = “red”;

context.lineWidth = 1;



context.moveTo(224, 22); //Howard

context.lineTo(228, 28); //Jarvis

context.lineTo(234, 42);

context.lineTo(234, 46); //Morse

context.lineTo(236, 52); //Loyola

context.lineTo(240, 62); //Granville

context.lineTo(240, 72); //Thorndale

context.lineTo(240, 82); //Bryn Mar

context.lineTo(240, 92); //Berwyn

context.lineTo(240, 102); //Argyle

context.lineTo(240, 112); //Lawrence

context.lineTo(240, 122); //Wilson

context.lineTo(240, 132); //Sheridan

context.lineTo(242, 135);

context.lineTo(245, 137); //Addison

context.lineTo(245, 142); //Belmont

context.lineTo(245, 152); //Fullerton

context.lineTo(245, 162); //North Clyborn

context.lineTo(247, 167);

context.lineTo(255, 167); //Clark/Division

context.lineTo(258, 169);

context.lineTo(258, 172); //Chicago

context.lineTo(258, 182); //Grand

context.lineTo(258, 202); //Lake

context.lineTo(258, 212); //Monroe

context.lineTo(258, 232); //Harrison

context.lineTo(255, 235);

context.lineTo(253, 240); //Roosevelt

context.lineTo(255, 280); //Cermak/Chinatown

context.lineTo(255, 310); //Sox, 35th

context.lineTo(250, 333); //47th

context.lineTo(250, 343); //Garfield

context.lineTo(250, 353); //63rd

context.lineTo(255, 363); //69th

context.lineTo(255, 383); //79th

context.lineTo(255, 393); //87th

context.lineTo(255, 403); //95th







<h4><a href src=”“>Red Line</a></h4>

<canvas id=”myCanvas” width=400 height=800>





Makes the page dramatically longer. I’d much appreciate simple hitTest JS that is written in the similar format of what is above.

A lot of people write their JS in their own style, which is completely understandable, but so disheartening as a beginner. Though Codecademy has been SUPER helpful, when people begin compressing name and code it’s hard to decipher what is needed in the actually functionality and the name someone created for the object. I digress.

I’m looking to add other capabilities to this, so if anyone has any ideas how to make this more interesting that what my concept will create, don’t be afraid to share.

Now, make to my major headache.

PS: I know this is post 2, but I needed a break from coding and this was a fantastic option.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s