this.mapPageDrawOverlay = function(context)
    {
        console.log("Record Route - mapPageDrawOverlay");

        var point = newRoutePageController.canvasPointFromLocation(coordinates.coord_x,coordinates.coord_y);

		context.fillStyle = "rgb(0, 0, 204)";
        context.lineWidth = 2.0;
        context.strokeStyle = "rgb(0, 0, 204)";

        context.beginPath();
        context.arc(point.x, point.y, 5, 0, 2*Math.PI);
        context.fill();
        context.stroke();

		//This circle represent the accuracy of the location recorded
		context.fillStyle = "rgba(0, 255, 255, 0.2)";
        context.lineWidth = 0.4;
        context.strokeStyle = "rgb(0, 255, 255)";

		context.beginPath();
		context.arc(point.x, point.y, coordinates.currentAccuracy, 0, 40*Math.PI);
		context.fill();
		context.stroke();

        for (var i = 0; i < Path.x.length; i++)
        {
            var start = newRoutePageController.canvasPointFromLocation(Path.x[i],Path.y[i]);
            var end = newRoutePageController.canvasPointFromLocation(Path.x[i-1],Path.y[i-1]);

            context.fillStyle = "rgb(255, 0, 255)";
            context.lineWidth = 1.0;
            context.strokeStyle = "rgb(255, 0, 255)";

            context.beginPath();
            context.arc(start.x, start.y, 3, 0, 2*Math.PI);
            context.fill();
            context.stroke();

            context.strokeStyle = "rgba(255, 0, 255,0.25)";
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(end.x, end.y);
            context.lineTo(start.x, start.y);
            context.stroke();
        }
    }