POC - Metro Map Vector Lines

by Paulo Ávila

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>

<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.min.js"></script>

JavaScript

// http://vasyenmetro.com/data/reseau.json
// var STATIONID = lignes.arrets[#]
// stations[STATIONID].lat

var canvasWidth = 320;
var canvasHeight = 200;

var latMin = -85, latMax = 85, latRange = (latMax - latMin);
var lngMin = -180, lngMax = 180, lngRange = (lngMax - lngMin);

var stationPlotted;

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, canvasWidth, canvasHeight);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

var pointsToPlot = $.csv.toObjects("shape_id,shape_pt_lat,shape_pt_lon,shape_pt_sequence,shape_dist_traveled\n\
D..N06R,40.577422,-73.981233,0,\n\
D..N06R,40.578309,-73.981401,1,\n\
D..N06R,40.578339,-73.981405,2,\n\
D..N06R,40.578370,-73.981409,3,\n\
D..N06R,40.578400,-73.981412,4,\n\
D..N06R,40.578429,-73.981414,5,\n\
D..N06R,40.578459,-73.981415,6,\n\
D..N06R,40.578488,-73.981416,7,\n\
D..N06R,40.578518,-73.981415,8,\n\
D..N06R,40.578546,-73.981414,9,\n\
D..N06R,40.578575,-73.981413,10,")

//console.log(pointsToPlot);

for (var i = 0; i < pointsToPlot.length; ++i) {
    latPercentage = pointsToPlot[i].shape_pt_lat;
    latPercentage += (latPercentage > 0 ? latMax : 0);
    latPercentage = latPercentage / latRange;
    latPixel = latPercentage * canvasWidth;

    lngPercentage = pointsToPlot[i].shape_pt_lon;
    lngPercentage += (lngPercentage > 0 ? lngMax : 0);
    lngPercentage = lngPercentage / lngRange;
    lngPixel = lngPercentage * canvasHeight;

    console.log(pointsToPlot[i].shape_pt_lat, pointsToPlot[i].shape_pt_lon);
    console.log(latPercentage, lngPercentage);
    console.log(latPixel, lngPixel);

    //console.log(lngToX(pointsToPlot[i].shape_pt_lon, 12), latToY(pointsToPlot[i].shape_pt_lat, 12));
    
    stationPlotted = paper.circle(latPixel, lngPixel, 10);
    stationPlotted.attr("fill",...